Product Multi-Add As Attributes

---

Description

This code allows you to have a single add to cart button on the product page add multiple products to the cart. The products are called in from a custom field as a comma separated list and are displayed on the PROD page as an upsell or attribute.

Steps:

1. Create Custom Product Field with code of add_on_product. This will be used to store a comma separated list of product codes you want to display.
2. Add the first snippet right below the product attributes item in PROD
3. Add JS to page, make sure to add the id of AddToCart to the PROD page form.
4. Modify the action on the page to ADPM and set the inputs for Quantity and Product_Code to be Products[1]:Code and Products[1]:Quantity

Snippet

<form name="add" method="post" action="&mvte:urls:BASK:auto;" id="AddToCart">
    <input type="hidden" name="Action" value="ADPM" />
    <input type="hidden" name="Products[1]:code" value="&mvte:product:code;" />
    ... Quantity: <input type="text" id="prod_quantity" name="Products[1]:quantity" value="1" class="product-quantity-input textfield" />
</form>

<script type="text/javascript">
    function write_quantity_inputs() {
        var i, i_len, element_input, element_quantity, elementlist_inputs, element_add_on_quantity;

        element_quantity = document.getElementById('prod_quantity');
        element_add_on_quantity = document.getElementById('add_on_quantity');
        elementlist_inputs = document.querySelectorAll('.add_on_product input');

        if (!element_quantity || !element_add_on_quantity) {
            return;
        }

        element_add_on_quantity.innerHTML = '';

        for (i = 0, i_len = elementlist_inputs.length; i < i_len; i++) {
            if (elementlist_inputs[i].type.toLowerCase() === 'checkbox' && elementlist_inputs[i].checked) {
                element_input = document.createElement('input');
                element_input.type = 'hidden';
                element_input.name = 'Products[' + (i + 2) + ']:quantity';
                element_input.value = element_quantity.value;

                element_add_on_quantity.appendChild(element_input);
            }
        }

        return true;
    }

    document.addEventListener('DOMContentLoaded', function (event) {
        document.getElementById('AddToCart').addEventListener('submit', function (event) { write_quantity_inputs(); return true; }, false);

<div class="product-add-ons">
    <mvt:comment>Call in Add-On Products</mvt:comment>
    <mvt:item name="customfields" param="Read_Product_Code(l.settings:product:code, 'add_on_product',g.add_on_codes)" />
    <mvt:if expr="NOT ISNULL g.add_on_codes">
        <mvt:assign name="g.array_count" value="miva_splitstring( g.add_on_codes, ',', g.codes_array, '' )" />
        <mvt:if expr="miva_array_elements(g.codes_array) GT 0">
        <mvt:assign name="g.count" value="2" />
        <h3>Optional Add-Ons</h3>
            <div class="add_on_product">
            <mvt:foreach iterator="add_on_code" array="global:codes_array">
                <mvt:do file="g.Module_Library_DB" name="l.success" value="Product_Load_Code( l.settings:add_on_code, l.settings:add_on:product )" />
                <mvt:do name="l.settings:add_on:product:formatted_price" file="g.Module_Root $ g.Store:currncy_mod:module" value="CurrencyModule_AddFormatting( g.Store:currncy_mod, l.settings:add_on:product:price )" />
                <label><input type="checkbox" name="Products[&mvt:global:count;]:code" id="add_on_&mvt:global:count;" value="&mvt:add_on:product:code;"> &mvt:add_on:product:name; - &mvt:add_on:product:formatted_price;</label><br>
                <mvt:assign name="g.count" value="g.count + 1" />
            </mvt:foreach>
            </div>
        </mvt:if>
        <div id="add_on_quantity"></div>
    </mvt:if>
</div>

Functions Used

• Product_Load_Code
• CurrencyModule_AddFormatting
• Read_Product_Code
• miva_array_elements