steveosoule/Miva-AttributeMachine-on-OUSM.md

## Miva-AttributeMachine-on-OUSM.md

      
    Raw
  

              Miva-AttributeMachine-on-OUSM.md
            
          
    Add AttributeMachine functionality to OUSM

OUSM does not have the same ability to show/hide variants & out-of-stock products in the same way that the PROD page does. PROD is able to do it by leveraging AttributeMachine, and AttributeMachine requires certain <form/> elements & names in that don't exist on OUSM.
We can use the upsell-data on OUSM to output ADPR-style forms, add AttributeMachine to them, and then on submit/continue we can use JavaScript re-map the PROD/ADPR form-data to the OUSM/AUPM form-data's requirements.
Assign these extra items to OUSM:

Attribute Machine (code: attributemachine)
CSSUI Product Attributes (code: product_attributes)

Hide the default OUSM/AUPM form

To hide it with the provided JavaScript, Add an id="js-ousm-default" to an element that wraps the existing AUPM form.
Add this new template code:

<section id="ousm-adpr">
	<h2>Custom: OUSM with Attribute Machine</h2>
	<mvt:foreach array="upsale" iterator="upsold_product">
		<form method="post" action="&mvte:urls:OSEL:auto;" class="js-ousm-adpr-form">
			<input type="hidden" name="Action" value="ADPR" />
			<input type="hidden" name="Product_Code" value="&mvt:upsold_product:code;" />
			<input type="hidden" name="Quantity" value="1" />
			<h3>
				<label>
					<input type="checkbox" name="Upsell_Selected" value="Yes">
					&mvt:upsold_product:name;
				</label>
			</h3>
			<p>Regular Price: <s>&mvt:upsold_product:formatted_price;</s> | Sale Price: &mvt:upsold_product:formatted_upsell_price; | Savings: &mvt:upsold_product:formatted_upsell_savings;</p>
			<mvt:item name="product_attributes" param="upsold_product:id" />
		</form>
		<mvt:item name="attributemachine" param="body:upsold_product:id" />
	</mvt:foreach>
	<br>
	<button class="button js-ousm-adpr-button">Continue</button>
	<div style="display: none;">
		<form method="post" action="&mvte:urls:OSEL:secure;" id="js-aupm-form">
			<input type="hidden" name="Action" value="AUPM" />
			<mvt:item name="tax" />
			<div id="js-aupm-form-fields"></div>
		</form>
	</div>
</section>
Add Attribute Machine to the Head

Add this one inside the OUSM page's head tag:
<head>
	<!-- ...whatever is already there... -->
	<mvt:item name="attributemachine" param="head" />
</head>
Include this JavaScript

(function OUSM_Attribute_Machine($){
	var $forms = $('.js-ousm-adpr-form');

	var init = function(){
		if( !$forms ) return;

		$('#js-ousm-default').hide();

		$forms.on('submit', function(e){
			e.preventDefault();

			handle_submit();
		});
		$('.js-ousm-adpr-button').on('click', handle_submit);
	};


	var handle_submit = function(){

		var $selected_forms = $forms.filter(function(i, form){
			return $(form).find('[name="Upsell_Selected"]:checked').length;
		});

		if( !$selected_forms.length ){
			go_to_OSEL();
			return;
		}

		submit_ADPR_forms_to_AUPM_form($selected_forms);

	};
	
	var go_to_OSEL = function(){
		window.location = $forms[0].action;
	};

	var submit_ADPR_forms_to_AUPM_form = function($forms){
		var $aupm_form = $('#js-aupm-form'),
			$aupm_fields = $('#js-aupm-form-fields');

		$aupm_fields.html('');
		$aupm_fields.append('<input type="hidden" name="Upsell_Product_Count" value="' + $forms.length + '">');
		
		$forms.each(function(i, form){
			var $form = $(form),
				product_index = i + 1;

			$aupm_fields.append('<input type="hidden" name="Upsell_Selected[' + product_index + ']" value="Yes">');
			$aupm_fields.append('<input type="hidden" name="Product[' + product_index + ']:code" value="' + $form.find('[name="Product_Code"]').val() +'">');

			$form.find('[name*="Product_Attributes"]').each(function(j, input){
				var attribute_index = j + 1;
					name = 'Product[' + product_index + ']:Attributes[' + input.name.split('[')[1];

				$aupm_fields.append('<input type="hidden" name="' + name + '" value="' + input.value + '">');
			});
		});

		$aupm_form.submit();
	}


	init();
})(jQuery);