1. Introduction

The following article describes how you can include a function in the shopping cart that allows your customers to update the cart content. This goes for information entered in order line (product) quantity fields as well as input in custom order line fields. The article consists of different sections containing code snippets that put together in the right way, will add the update functionality. The last section in the article will display a final working code example for you to implement in your cart template.

2. Implementing the basic cart functionality

You will need to insert a few template tags that generates various output for a form that should enclose the entire cart content.

 

You have the following tags available:

  • Ecom:Order:CartForm.Start
    Returns a start tag for the cart form.
     
  • Ecom:Order:CartForm.End
    Returns an end tag for the cart form.
     
  • Ecom:Order:CartForm.Name
    Returns the name of the cart form. In case you want to use the cart name to make a custom JavaScript that manipulates the cart form.
     
  • Ecom:Order:CartForm.SubmitOrder
    Returns the link to submit the form (order) and proceed to step 2. The value should be assigned to the a href attribute.
     
  • Ecom:Order:CartForm.SubmitUpdate
    Returns the link to submit cart changes and remain in step 1. The value should be assigned to the a href attribute.

The first step in implementing the tags in the cart template, is to insert the form tags before and after the order lines loop. The following snippet shows the principle:
 

<!--@Ecom:Order:CartForm.Start--">

<!--@LoopStart(OrderLines)-->

 

----------

 

<!--@LoopEnd(OrderLines)-->

<!--@Ecom:Order:CartForm.End-->

Next you will need to insert the update and order links. You should implement the tags at the end of your template. The following template snippet is an example of how you could implement the two links:
 

<tr class="footer">
<td><a href="<!--@Global:Pageview.Url-->&amp;cartcmd=emptycart">Empty basket</a></td>
<td><a href="<!--@Ecom:Order:CartForm.SubmitOrder-->">Order</a></td>
<td><a href="<!--@Ecom:Order:CartForm.SubmitUpdate-->">Update</a></td>
</tr>


3. Updating order line quantities

You can insert a input field where you can update the quantity of each order line, i.e. products. You insert the field by inserting the following tag, e.g. next to the product name:

 

Ecom:Order:OrderLine.Quantity.Input.Box

 

All in all you have the following tags available:

  • Ecom:Order:OrderLine.Quantity.Form
    Returns the form and a hidden input field.
     
  • Ecom:Order:OrderLine.Quantity.Input.Name
    Returns the "Quantity" field name. This also allows you to style the name as you like.
     
  • Ecom:Order:OrderLine.Quantity.Input.Box
    Returns the "Quantity" input field.

The following example shows how you can implement the template tags in a shopping cart template:
 

<!--@LoopStart(OrderLines)-->
<tr>
<td nowrap><a href="/Default.aspx?ID=47&ProductID=<!--@Ecom:Product.ID-->"><!--@Ecom:Order:OrderLine.ProductName--></a></td>
<td><!--@Ecom:Order:OrderLine.Quantity.Input.Box--></td>
<td><!--@Ecom:Order:OrderLine.TotalPriceWithoutSymbol--></td>
<td>
<a href="<!--@Ecom:Order:OrderLine.IncrementLink-->"><img src=/Files/Billeder/Ecom/Grafik/basket-inc.gif border=0></a>
<a href="<!--@Ecom:Order:OrderLine.DecrementLink-->"><img src=/Files/Billeder/Ecom/Grafik/basket-dec.gif border=0></a>
<a href="<!--@Ecom:Order:OrderLine.DeleteLink-->"><img src=/Files/Billeder/Ecom/Grafik/basket-rem.gif border=0></a>
</td>
</tr>
<!--@LoopEnd(OrderLines)-->

4. Updating custom order line fields

The update function you are about to implement also works with any custom order line fields implemented in the shopping cart. The update function allows the customer to update the order according to the information entered in the custom order fields. The cart update will also mean that the order line fields will be validated according to the rules you have set up in the administration.

5. The final template example

The following code sample shows how all the functionality described above can be implemented in the shopping cart:
 

<!--@Ecom:Order:CartForm.Start-->

<!--@LoopStart(OrderLines)-->
<tr class="orderline<!--@Ecom:Order:OrderLine.Type-->">
<td nowrap>
<a href="<!--@Ecom:Order:OrderLine.ProductLink-->">
<!--@Ecom:Order:OrderLine.ProductName.Short-->
</a>
</td>
<td><!--@Ecom:Order:OrderLine.Quantity.Input.Box--></td>

<td>
<!--@LoopStart(Order.OrderLineFields)-->
<!--@HeaderStart--><table><!--@HeaderEnd-->
<tr>
<td>
<!--@Ecom:Order:OrderLine.OrderLineField.Name-->
</td>
<td>
<!--@Ecom:Order:OrderLine.OrderLineField.InputTextField-->
</td>
<td>
<span style="color:red"><!--@Ecom:Order:OrderLine.OrderLineField.ValidationErrorMessage--></span>
</td>
</tr>
<!--@FooterStart--></table><!--@FooterEnd-->
<!--@LoopEnd(Order.OrderLineFields)-->
</td>


<td align="right" nowrap><!--@Ecom:Order:OrderLine.TotalPrice--></td>
<td align="right" nowrap>
<a class="orderfunctions" href="<!--@Ecom:Order:OrderLine.IncrementLink-->"><img src="/Files/Billeder/Ecom/Grafik/basket-inc.gif" border="0"></a>
<a class="orderfunctions" href="<!--@Ecom:Order:OrderLine.DecrementLink-->"><img src="/Files/Billeder/Ecom/Grafik/basket-dec.gif" border="0"></a>
<a class="orderfunctions" href="<!--@Ecom:Order:OrderLine.DeleteLink-->"><img src="/Files/Billeder/Ecom/Grafik/basket-rem.gif" border="0"></a>
</td>
</tr>
<!--@LoopEnd(OrderLines)-->

<!--@Ecom:Order:CartForm.End-->

<tr class="total">
<td><b>Total</b></td>
<td colspan="3" align="right"><b><!--@Ecom:Order.OrderLines.Total.PriceWithVAT--></b></td>
<td></td>
</tr>
<tr class="footer">
<td><a href="<!--@Global:Pageview.Url-->&amp;cartcmd=emptycart">Empty basket</a></td>
<td><a href="<!--@Ecom:Order:CartForm.SubmitOrder-->">Order</a></td>
<td><a href="<!--@Ecom:Order:CartForm.SubmitUpdate-->">Update</a></td>
</tr>

Copyright 2010 Dynamicweb Software