Miva - PROD with Variant Details that update on `variant_changed`

api-page-mvt.xml

<mvt:if expr="g.get EQ 'load_variant_details' AND g.Product_Code">
	<mvt:do file="g.Module_Library_DB" name="l.settings:output:result:product_loaded" value="Runtime_Product_Load_Code(g.Product_Code, l.settings:product)" />
	<mvt:do file="g.Module_Library_DB" name="l.settings:output:result:productlist_load_variant" value="ProductList_Load_Variant(l.settings:product:id, g.Variant_ID, l.settings:product:parts)" />
	<mvt:do file="g.Module_Root $ '/modules/component/cmp-mv-prodctgy-meta.mvc'" name="l.result" value="METAValueList_Load_Product( l.settings:product:id, l.settings:product:meta_value_list)" />
	<mvt:foreach iterator="part" array="product:parts">
		<mvt:do file="g.Module_Root $ '/modules/component/cmp-mv-prodctgy-meta.mvc'" name="l.result" value="METAValueList_Load_Product( l.settings:part:id, l.settings:product:meta_value_list )" />
		<mvt:comment><mvt:item name="customfields" param="Read_Product_ID(l.settings:part:id, 'backordered_until', l.settings:part:custom_fields:backordered_until)" /></mvt:comment>
	</mvt:foreach>

	<mvt:assign name="l.null" value="miva_output_header( 'Content-type', 'application/json' )" />
	<mvt:assign name="l.settings:output:page" value="l.settings:page" />
	<mvt:assign name="l.settings:output:product" value="l.settings:product" />
	<mvt:do file="g.Module_JSON" name="l.null" value="JSON_Output( l.settings:output )" />
</mvt:if>

PROD--variables-mvt.xml

<mvt:if expr="g.variant_id LE 0">
    <mvt:assign name="g.variant_id" value="0" />
</mvt:if>
<script>
	var variant_id = &mvtj:global:variant_id;;
	var product_code = '&mvtj:product:code;';
</script>

scripts-js--PROD_Variant_Details.js

(function PROD_Variant_Details(product_code, variant_id){
	var init = function(){
		MivaEvents.SubscribeToEvent('variant_changed', function (product_data) {
			load_variant_details(product_data);
		});
		if ( variant_id > 0 ) {
			var product_data = {
				product_code: product_code,
				variant_id: variant_id
			};

			load_variant_details(product_data);
		}
	};

	var load_variant_details = function(product_data){
		if ( $('.add-to-cart__price').html() !== '$--.--' ) {
			$('.product-detail__price ').html( $('.add-to-cart__price').html()  )
		}

		update_url(product_data.variant_id);
		$.getJSON('/mm5/merchant.mvc?Screen=api&get=load_variant_details', product_data, process_json);
	};

	var update_url = function(variant_id){
		var current_uri = window.location.href.replace(window.location.origin, '');
		var new_search = '';

		if( /variant_id=\d+/.test(window.location.search) ){
			new_search = window.location.search.replace(/variant_id=\d+/, 'variant_id=' + variant_id);
		} else if( !window.location.search){
			new_search = '?variant_id=' + variant_id;
		} else {
			new_search += '&variant_id=' + variant_id;
		}

		var new_uri = window.location.pathname + new_search + window.location.hash;
		window.history.replaceState({}, $('title').text(), new_uri);
	};

	var process_json = function(data){

		if( !data ) {
			// console.info('No variant_changed json found');
			return;
		}

		var product = data.product.parts.length ? data.product.parts[0] : data.product;

		$('.product-detail__code').html(product.code);
		$('.product-detail__name').html(product.name);
	};

	init();
})(window.product_code, window.variant_id);