Volusion Customize MultiChildAddToCart

Maybe you’ve read a little about Volusion’s MultiChildAddToCart function — or gotten daring and tried it.

What it does is allow you to build a dummy product, and then make several (or all) other products as child products of the dummy product.  This results in a product page where a table with quantity fields and check boxes appear next to each product name, so a customer can order several different products from one page.

Like most of the other automatic functions in Volusion, there is little to no control over the visual or functional appearance of MultiChildAddToCart grids.   They offer one hack, (inserting a tiny comment tag into each child product’s name field, e.g.- <!001>, <!456>, <!999>, etc, and the software will sort the grid based on the hidden tag), but it means junking up your products database.

Worse, if you don’t get it right the first time, or need to add, edit or delete some child products, after Volusion has generated all the  child product data into your PRODUCT database, you need to manually clean up the mess and start over (creating that parent and group of child products).

Of course there is a better way…

How would you like to be able to create a page with a table of products  arranged into groups, with dividers and headings about each group, areas for special instructions or comments, and the ability to allow customers to order from any or all products you sell in a single page?

Using a little Javascript, some DOM, an HTML table and some CSS you can have it all and have it your way.

First the Javascript, and an explanation of what it does:

There are two functions, chkIsNum() and doOrder().  The first makes sure that no non-numeric info gets entered in any quantity field.  The second builds a string of product codes and prepares it as a URL with a query string to push the order to the Volusion shopping cart page, (where prices will be calculated, shipping, tax and any discounts that apply will be applied), and the customer will have placed their order with “one click“.

Cut and paste the entire snip below into a blank Category page, or place it in an “article”, then view the page to see the results.

<!– start snip –>
<script type=”text/javascript”>
function chkIsNum(oStr) {
var nStr = new String(oStr);
nStr = nStr.replace(/[^0-9]/g, ”);
if (nStr != oStr) {
alert(“You have entered a non-numeric character in a quantity field.”);
return 1;
} else {
return 0;
}
}
function doOrder(){
var fval;
var hadErr = 0;
var theForm = document.forms[“qOrderForm”];
var oString = “/ShoppingCart.asp?ProductCode=”;
for(i=0; i<theForm.elements.length; i++) {
if(theForm.elements[i].type == “text”) {
fval = theForm.elements[i].val;
hadErr += chkIsNum(fval);
if((fval != “”) && (fval > 0) && (fval < 999)) {
for(n=0; n<fval; n++) {
oString += theForm.elements[i].name + “,”;
}
}
}
}
if (oString != “/ShoppingCart.asp?ProductCode=”) {
oString = oString.substring(0, oString.length – 1);
if (hadErr == 0) { window.location = oString; }
}
}
</script>
<!– the HTML, (customize as needed, style with CSS, etc) –>
<form id=”qOrderForm”>
<table border=”1″ cellspacing=”0″ cellpadding=”0″>
<tbody>
<tr>
<th>Product Code</th>
<th>Product</th>
<th>Quantity</th>
</tr>
<tr><th colspan=”3″>Blue Widgets</th></tr>
<tr>
<td>WIDG001</td>
<td>Small Blue Widget</td>
<td><input type=”text” id=”WIDG001″ size=”3″ maxlength=”3″ value=””></td>
</tr>
<tr>
<td>WIDG002</td>
<td>Medium Blue Widget</td>
<td><input type=”text” id=”WIDG002″ size=”3″ maxlength=”3″ value=””></td>
</tr>
<tr>
<td>WIDG003</td>
<td>Large Blue Widget</td>
<td><input type=”text” id=”WIDG003″ size=”3″ maxlength=”3″ value=””></td>
</tr>
<tr><th colspan=”3″>Red Widgets</th></tr>
<tr>
<td>WIDG004</td>
<td>Small Red Widget</td>
<td><input type=”text” id=”WIDG001″ size=”3″ maxlength=”3″ value=””></td>
</tr>
<tr>
<td>WIDG005</td>
<td>Medium Red Widget</td>
<td><input type=”text” id=”WIDG005″ size=”3″ maxlength=”3″ value=””></td>
</tr>
<tr>
<td>WIDG006</td>
<td>Large Red Widget</td>
<td><input type=”text” id=”WIDG006″ size=”3″ maxlength=”3″ value=””></td>
</tr>
</tbody>
</table>
<input type=”button” onclick=”doOrder()” value=”PLACE ORDER”>
</form>
<!– end snip –>
Posted in eCommerce, Volusion Tagged with: , , , , , , ,