Cacher is the code snippet organizer for pro developers

<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>

<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 );
                }, false );
</script>

<form name="add" method="post" action="&mvte:urls:BASK:auto;" id="AddToCart">
	<div id="swatches" class="swatches"></div>
	<div class="clear"></div>
	<input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" />
	<input type="hidden" name="Old_Search" value="&mvte:global:Search;" />
	<input type="hidden" name="Action" value="ADPM" />
	<input type="hidden" name="Products[1]:code" value="&mvte:product:code;" />
	<input type="hidden" name="Category_Code" value="&mvte:global:category_code;" />
	<input type="hidden" name="Offset" value="&mvte:global:Offset;" />
	<input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
	<input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
	<input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
	<input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
	
	...
	
	Quantity: <input type="text" id="prod_quantity" name="Products[1]:quantity" value="1" class="product-quantity-input textfield" />