Shopable - Order Pages

An order page is a web page which has an order button that links to Shopable. To make this link possible just requires a bit of Javascript at the top of the page (the order function), specifying whether to open up Shopable in a frame or window, an understanding of the order function arguments, and an order button or link.

Order Function
There is one function at the top of the page order. Without arguments is serves like a "view basket" function, just displaying the current shopping basket. Otherwise it combines all it's arguments into one string, and sends them to the Shopable script to be processed. The most important setting is the shopLocation variable. This is the directory where the Shopable files are stored. It is a URL, so it can be an absolute path (from the web server's root directory, such as /mythings/shopable/), but in this example it is a relative path. Also, it must end in a slash. The function looks like this:

function order () {
  var shopLocation = "shopable/"; //where the shopable files are
  var itemString = ""; //stores all the item information
  if (arguments.length > 0) { //put the arguments into itemString
    var a = new Array(); a[0] = document.location.href;
    for (var i=0; i < arguments.length; i++) {a[i+1] = arguments[i];}
    var itemString = escape (a.join ("*"));
  } //there were arguments
  //open a window, but don't pass in a URL. This way, if the shopping basket is already
  //open, the index page does not get replaced
  var shopable = window.open ("", "shopable", "menubar=yes,width=600,height=350,status=yes");
  //if the shopping window is already open and loaded, call the addItem function
  if (shopable.loaded) {shopable.addItem (itemString);}
  //or else put Shopable's index page in the window we just opened, passing in the new item
  else {shopable.location.href = shopLocation + "index.html?" + itemString;}
} //end of order function
    

Frame or Window
The above code will open up Shopable in a new window. It is also possible to open it up in the same window as the order pages. If you do not want to use framesets on your website, simply change the 11th line above to var shopable = top;. This will cause Shopable to replace the order page, but it will have to load all it's code every time it is called, and will depend on cookies to remember the order. If you can use framesets, then make an invisible frame called shopable_settings and load display.html into it. Load your web site order pages into a different frame (order_frame in the example below). This method will also require changing the line above to var shopable = top;. And both methods require changes to Shopable's internal settings.

<FRAMESET ROWS="100%,*" BORDER="0" FRAMEBORDER="0">
  <FRAME NAME="order_frame" SRC="demo.html">
  <FRAME NAME="shopable_settings" SRC="shopable/loading.html">
</FRAMESET>
    

Order Function Arguments
Before discussing how to create order buttons, I'll discuss the arguments to the order function. Each argument is described below, and as it is not necessary to provide every argument, the default values are in parenthesis. Note that the number of options is set in the settings file, so the total number of arguments is not fixed.

• product code - used when the emails are sent out but never displayed
• description - appears on the left side of the shopping basket
• options - appear in columns or next to the description (see the settings manual)
• price - the price used to compute the subtotal without the currency symbol
• quantity (1) - how many of the item should be put in the basket
• weight (1) - item's weight (in units consistent with the shipping tables)
• tax code ('standard') - the item's tax code (see the shipping manual)
• minimum quantity (1) - the minimum quantity allowed in the basket
• quantity increment (1) - the quantity must be in increments of this
• display price (same as price) - the price displayed in the basket (useful for offering discounts)

Order Buttons
Bringing this altogether, I will show some examples of how to make order buttons and links. Note that you can also use other form elements as input to the order function (so customers could select options from a list, or type in the quantity they want). These examples assume that the basket has three options (colour, and two unnamed ones), and they tie in with the demonstration.

The simplest example is an HTML link which adds an item (which could easily be replace by an image). This order link uses the following code to sell a car:
<A HREF="javascript:order('car1', 'A Brand New Car', 'green', '', '', 4500, 1, 800)">Order a Car</A>

Order a Car

The following example uses an order button to sell a donkey for a 20% discount:
<FORM><INPUT NAME="donkey" TYPE="BUTTON" onClick="order('donkey1', 'A Lovely Donkey', 'greyish', '20 percent off!', '', 400, 200, 'standard', 1, 1, 500)" VALUE="Buy a Donkey"></FORM>

The next example sells various types of yellow curtains in 0.15 metre increments. Notice that the two unnamed options (fabric type, and the price per metre message) appear next to each other, separated by a comma (see the settings manual for more about this).
<FORM> Fabric <SELECT NAME="fabric"><OPTION>thin<OPTION>textured<OPTION>ugly</SELECT> Length (in metres) <INPUT TYPE="TEXT" SIZE="5" NAME="quantity" VALUE="0.6"> <INPUT NAME="orderbutton" TYPE="BUTTON" onClick="order('curtain1', 'Curtains', 'yellow', 'fabric: ' + this.form.fabric.options[this.form.fabric.selectedIndex].text, 'price is per metre', 10, this.form.quantity.value, 1, 'standard', 0.15, 0.15)" VALUE="Order"> </FORM>

Finally, we will sell beer in a 7 cans for 6 offer (at £1 a can). There is another order link for those who want beer at the normal price:
<A HREF="javascript:order('beer_offer', 'Beer', '', '7 cans for the price of 6!', '', 6/7, 7, 0.1, 'standard', 1, 7, 1)">7 Cans of Beer for the Price of 6</A><BR> <A HREF="javascript:order('beer', 'Beer', '', '', '', 1, 0.1)">Beer at Normal Price</A>

7 Cans of Beer for the Price of 6
Beer at Normal Price