10.2. pages/ord/basket.html
Create the directory pages/ord/ in the tutorial catalog directory. In other words, ord/ should be inside the pages/ 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 Foundation store 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 an [item] prefix. Put the following code in the new file pages/ord/basket.html. 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 page and test the shopping basket in your browser.