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.
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.StartEcom:Order:CartForm.EndEcom:Order:CartForm.NameEcom:Order:CartForm.SubmitOrderEcom:Order:CartForm.SubmitUpdateThe 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-->&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>
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.FormEcom:Order:OrderLine.Quantity.Input.NameEcom:Order:OrderLine.Quantity.Input.BoxThe 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)-->
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.
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-->&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>