Shopping cart
The shopping cart page can be used to display (to the customer) which products he or she has ordered and the total price / vat of those products. It can also be used to select an shipping method, in which case a separate shipping page is unnecessary. The customer can be offered to change the content of his shopping cart by adjusting quantities of products or removing products entirely. The customer might also fill in an discount code if such an action exists. All these possible features are controlled by the myShop extensions and are available in the custom layout for the shopping cart.
Basket
One of the most important parts of the shopping cart is the basket. The myShop extension for it is myshop-repeat:basket, and it works much like a productlist, but with a few differences. The extensions which can be used within the basket are fixed, and do not include displaying any of the product information directly from the spreadsheet (which is usual for any normal productlist). The fixed information for each product which can be displayed is limited to:
- myshop-value:product-id
Shows the product id of the product. Which column from the spreadsheet is used as product id can be set in the editor. - myshop-value:description
Shows the description of the product. This description contains certain columns (set in the editor) from the spreadsheet, separated by commas. - myshop-value:quantity
Shows the number of products the customer ordered. - myshop-value:vat-percentage
Shows the vat-percentage for this product (with a % sign). - myshop-value:vat
Shows the vat percentage for this product (without a % sign). - myshop-value:price/price-formatted
Shows the price per piece formatted or unformatted for the current product. - myshop-value:price-line-total/price-line-total-formatted
Shows the total price for the quantity of products formatted or unformatted.
Controlling quantity and contents
The following inputs / actions can be used for each line of the basket contents, to control the products in it and the quantity of those products.
Changing quantity
For changing the quantity, there are three methods available:
- Popup
This method opens the orderpopup in which the user can specify the new quantity for the product on that line.
Extension: myshop-action:change-product - Input field
This method shows an input field, combined with an action to activate the new quantity, to let the user enter and activate a new quantity in the same screen.
Extensions: myshop-control:quantity-update, myshop-action:update-product. - Increment / Decrement buttons
With increment and decrement buttons, the user can increase or decrease the quantity of a product with one click.
Extensions: myshop-action:decrement-product, myshop-action:increment-product
Removing products
The action myshop-action:remove-product removes all quantities of the product on that line.
Totals
The shopping basket can also display the vat-totals and total price for all products in the basket. The information which can be displayed is:
- myshop-repeat:vat-list
Creates a list of all vat rate which are applied to the basket content, can show vat rate, total vat and the figure over which the vat is calculated. - myshop-value:price-subtotal/price-subtotal-formatted
Shows the subtotal price of the shopping basket, with or without currency sign. - myshop-value:price-total/price-total-formatted
Shows the total price including vat and actions, with or without currency sign.
Navigation
The navigational actions available within the shopping basket are:
- myshop-action:continue-shopping
This action takes the customer back to where he came from in the shop. - myshop-action:help-basket
This action pops up a window with some information for the customer on how to use the shopping cart. - myshop-action:next-page
This action takes the users to the next page of the ordering procedure.
Special discounts
All actions (or discounts) which are defined in the editor can be shown with the myshop-repeat:action-list extension. This extension will loop over all actions and allow you to display these actions. The extensions which can be used within this loop are:
- myshop-value:label
Shows the label (or name) of the action. - myshop-value:price-formatted
Can be used to display the price (discount or addition) of the action. - myshop-value:price-vat-formatted
Shows the vat calculated over the action.
An action can require coupon codes, so the user needs a way to add these codes to the action list. The extension myshop-control:coupon-code can be used to display a input box which the customer can use. When this box contains a valid coupon code (set in the editor) the action for that code will be added to the shopping cart when the next-page action is executed.
Related products
It is also possible to show a list of related products in the shopping basket. This is done by using the myshop-repeat:related-products extension. See the related-products page for more information.
Example
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example of a simple shopping basket</title>
</head>
<body>
<table style="myshop-has:products" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td align="center">
<table width="98%" cellpadding="0" cellspacing="0" bgcolor="#ffffff" border="0">
<tr>
<td colspan="7"> </td>
</tr>
<!-- Basket header -->
<tr>
<td style="font-weight:bold">Artikel</td>
<td style="font-weight:bold">Omschrijving</td>
<td style="font-weight:bold">Aantal</td>
<td align="right" style="font-weight:bold">Prijs</td>
<td align="right" style="font-weight:bold">Totaal</td>
<td> </td>
</tr>
<!-- Product list -->
<tr style="myshop-repeat:basket">
<td style="myshop-value:product-id">product number</td>
<td style="myshop-value:description">description</td>
<td style="myshop-value:quantity">quantity</td>
<td align="right" style="myshop-value:price-formatted">price</td>
<td align="right" style="myshop-value:price-line-total-formatted">price</td>
<td align="right"><a style="myshop-action:change-product">wijzigen</a></td>
<td align="right"><a style="myshop-action:remove-product">verwijder</a></td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<!-- Shipping selection -->
<tr style="myshop-has:shipping-selection">
<td colspan="3"> </td>
<td style="font-weight:bold;myshop-action:shipping-selection" align="right"> </td>
<td align="right" style="font-weight:bold;myshop-value:price-shipping-formatted">0,00</td>
<td colspan="2"> </td>
</tr>
<!-- VAT list -->
<tr style="myshop-repeat:vat-list">
<td colspan="3"> </td>
<td><span style="myshop-value:vat-percentage"/> BTW van <span style="myshop-value:vat-from-price-formatted"/></td>
<td align="right" style="myshop-value:price-vat-formatted">vat</td>
<td colspan="2"> </td>
</tr>
<!-- Total price including vat -->
<tr>
<td colspan="3"> </td>
<td style="font-weight:bold">Totaal</td>
<td align="right" style="font-weight:bold;myshop-value:price-total-formatted">0,00</td>
<td colspan="2"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<span style="myshop-has:continue-shopping">
<a style="myshop-action:continue-shopping">Continue shopping</a>
</span>
<a style="myshop-action:help-basket">Help</a>
<a style="myshop-action:next-page">Next</a>
</td>
</tr>
<tr>
<td><span style="myshop-value:remarks"/></td>
</tr>
<tr style="myshop-has:terms-conditions">
<td>
<a style=myshop-action:terms-conditions">Terms and conditions</a>
</td>
</tr>
</table>
</body>
</html>Overview applicable extensions
- myshop-block:basket
- myshop-value:product-id
- myshop-value:description
- myshop-value:quantity
- myshop-value:vat-percentage
- myshop-value:vat
- myshop-value:price
- myshop-value:price-line-total
- myshop-repeat:vat-list
- myshop-value:price-subtotal
- myshop-value:price-total
- myshop-action:help-basket
- myshop-action:next-page
- myshop-value:label
Post your comment on this topic.