Adding multiple products to the shopping cart with one click
The following article describes how you can let your web shop visitors add multiple products to the shopping cart with a single click.
All you need to do is to change the template for the product list.
The following shows an implementation example of the necessary template tags:
<form name="multiForm" id="multiForm" method="post">
<input type="hidden" name="CartCmd" id="CartCmd" value="addMulti" />
<!--@LoopStart(Products)-->
<!--@Ecom:Product.Form.Multi.HiddenFields-->
<!--@Ecom:Product.Number--> - <!--@Ecom:Product.Name-->
<!--@Ecom:Product.Price.Price--><br />
<input type="text" name="Quantity!--@Ecom:Product.LoopCounter-->" value="0" />
<!--@LoopEnd(Products)-->
</form>
Steps
All you need to do is:
- Insert form tags that enclose the entire product loop. Remember to add closing form tags.
- After the form start tag add a hidden field which act as cart command for the multiple adding function:
<input type="hidden" name="CartCmd" id="CartCmd" value="addMulti" />
- Insert a form field handler tag inside the product loop:
<!--@Ecom:Product.Form.Multi.HiddenFields-->
- Insert an quantity input field and change the default name to:
name="Quantity<!--@Ecom:Product.LoopCounter-->
To finish things off then simply let users submit the form when adding products to the shopping cart, i.e. the "Add to cart" link as displayed in the following:
<a href="javascript:document.multiForm.submit();"><img src="files/system/shop_addtocart.jpg" alt="Add to cart" border="0" /></a>
