Creating a Multi-Product Add to Cart Button

You can use specially-designed page and product templates that let customers check boxes for items that they want to buy and then click one [Add to Cart] button to add them all to the shopping cart. The basic idea is that you are creating an HTML form. The opening and closing FORM tags must be in the page template, while the product template contains the HTML and custom tags to display each product with a checkbox. Both templates must be designed to work together and must be used together.

Here are simple page and product templates with comments to illustrate the structure required. You can copy and paste each one into a file and upload them to your store to see how they work. (After uploading the templates, you must assign pages and products to use these templates.) Note that the tag that makes this all work is the opening FORM tag that calls the shopping cart CGI with the post method. In order for this to work you must use custom templates for both the page and products.

Page Template

<!DOCTYPE HTML><html><head>[-- PAGE.Name --]</head>

[-- PAGE.Name --]

# Start the Form. This custom template tag is very important!
#Display Add to Cart and View Cart Buttons
#Display the Products - The Products must us a special Template also [--LOOP PRODUCTS --][--PRODUCT--][--END_LOOP PRODUCTS--] # Display the Add to Cart and View Cart Buttons again # End the FORM
</body> </html> [--END_DEFINE PAGE--] [--DEFINE LINK_TO_PAGE--] [--PAGE.LinkGraphic--][-- IF PAGE.LinkName--][--PAGE.LinkName--][--ELSE--][--PAGE.Name--][--END_IF--] [--END_DEFINE LINK_TO_PAGE--]

Product Template


[--PRODUCT.Name--] [--PRODUCT.Price--]  Quantity
[-- Product.ProductDescription --] # Generate the Ordering Option Menus [-- IF PRODUCT.DisplayOrderingOptions --]
[-- PRODUCT.OptionText --] [-- ORDER_OPTION_MENU LINE --] [-- END_IF --]


Advanced: You can hard code the name of the product template into the PRODUCT tag. This will make it so that all products assign to this page will use that specific product template on this page. ShopSite will not use the product template that product has listed under Products > Edit Product Layout, it will use the one you have listed in the PRODUCT tag. For example, if you want all products assigned to your page to use the DefaultCustomProductTemplate the PRODUCT tag would look like [-- PRODUCT DefautlCustomProductTemplate --].

Ready-Made Multi-Add-To-Cart Template - You can download the Multi-Add-To-Cart Dynamic Template version 11 sp2 ZIP File to get ready-made page and product templates that create a single add to cart form to allow customers to add many products to the cart at once. The templates contained in the ZIP file are specific to the Dynamic Theme, Boutique Theme, Pinwheel Theme, Picture Theme and Trend Theme.

ConnectFollow ShopSite on FacebookFollow ShopSite on TwitterRead ShopSite's Ecommerce BlogWatch Ecommerce Videos on YouTube
Featured TutorialFacebook Connect for Customer Registration

Facebook Connect for Registration