The Shopping Basket

Order Link

Now that you have your products available, let's add a shopping cart so customers can purchase them. This is simply created using the [order] tag. The tag creates an HTML link that causes the specified item to be ordered and takes the shopper to her basket page. This is a built-in shortcut to the complete order process which uses an HTML form submission process. The parameter for the [order] tag is the product ID. To add these tags to the catalog, make the following change to pages/index.html:

      [loop-field description]
      </a>
    </td>
    <td align="right">[loop-field price]</td>
+    <td>[order [loop-code]]Order Now</a></td>
  </tr>
  [/loop]
    

The single line you need to add is marked by a '+'. However, do not include the '+' when adding this line. The surrounding lines are shown to give you the context. This style is called "context diff", and will be used extensively.

pages/ord/basket.html

Create the directory pages/ord/ in the tutorial catalog directory.

For the [order] tag, Interchange expects a default page called pages/ord/basket.html. This page displays the contents of the shopping basket and contains other shopping basket functionality.

The standard demo catalog has a full-featured shopping basket available for use, but this tutorial teaches you to build your own simple one. The shopping basket items can be accessed using a set of tags that have prefix of "item". Put the following code in the new pages/ord/basket.html file. The section that follows explains the tags used.

[include top]
[include left]

<h2>This is your shopping cart!</h2>

<table cellpadding="5">

<tr>
  <th>Qty.</th>
  <th>Description</th>
  <th>Cost</th>
  <th>Subtotal</th>
</tr>

[item-list]
<tr>
  <td align="right">[item-quantity]</td>
  <td>[item-field description]</td>
  <td align="right">[item-price]</td>
  <td align="right">[item-subtotal]</td>
</tr>
[/item-list]

<tr><td colspan="4"></td></tr>

<tr>
  <td colspan="3" align="right"><strong>Total:</strong></td>
  <td align="right">[subtotal]</td>
</tr>

</table>

<hr>

<p>
[page checkout]Purchase now</a><br>
[page index]Return to shopping</a>
</p>

[include bottom]

		

The basket items can be accessed one at a time by using the [item-list] tag. So we will create a table by iterating through the basket items. The text within the [item-list] [/item-list] tags is created for each item in the list.

[item-quantity] shows the quantity of the item ordered. If the same item is ordered multiple times, the quantity increases.

[item-field description] shows the description from the product database table. Any field that is not special to Interchange can be accessed from the shopping cart this way.

[item-price] shows the per-item price that is defined in the product database table.

[item-subtotal] shows the total cost of this order line. This is normally the price multiplied by the quantity, but it can also take into account other considerations, such as various kinds of price discounts.

[subtotal] shows the calculated shopping basket subtotal.

[page index] creates the starting HTML <a href=...> for a link to the catalog welcome page.

You also need to put a link in the index page so that shoppers can go to their shopping cart without ordering something. Modify the end of pages/index.html by adding the following lines:

  </table>
+ <hr>
+ <p align=center>[page order]View shopping cart</a></p>
  [include bottom]
    

Refresh the index page and test the shopping basket in your browser.

Phase 3: Tutorial Files

We have prepared the files from this tutorial phase for download in .tar, .tar.gz, .tar.bz2, and expanded formats.

DocBook! Interchange!