Функция триггера Shopify при выборе варианта, но не отменяет существующие функции

Есть несколько способов заставить это работать.

Во-первых, вам нужно знать, как ваша тема изначально обрабатывает варианты. Для чердака используется объект theme.Variant, поэтому выбор пользовательского варианта так же прост, как:

jQuery('#shopify-section-product-template').on('theme:variants:changed', function(evt, variantObj){

   console.log('theme event for '+ variantObj.sku); // limited view of variant.
   console.log(variantObj);
});

Для тем, которые используют старый Shopify.OptionSelectors, вы можете использовать эту старую школу, переопределив глобальную функцию selectCallback, например:

(function(){
   var original_selectCallback = window.selectCallback;
   window.selectCallback = function(variant, selector) {
    original_selectCallback(variant, selector); // call the original function
    myCustomHandler(variant); // called with the full jsonified variant object.
};

})();

Наконец, самые современные темы, с которыми я имел дело, и темы, которые используют Shopify.OptionSelectors с enableHistoryState: true, позволяют вам пропустить беспорядок переопределений и установить собственный обработчик истории. Вот где вам понадобится ваш собственный скрипт / жидкость для сборки JSON, который вам понадобится для получения свойств варианта и продукта:

document.addEventListener('DOMContentLoaded', function(){

function usePushState(handler){

    //modern themes use pushstate to track variant changes without reload
    function track (fn, handler, before) {
        return function interceptor () {
            if (before) {
                handler.apply(this, arguments);
                return fn.apply(this, arguments);
            } else {
                var result = fn.apply(this, arguments);
                handler.apply(this, arguments);
                return result;
            }
        };
    }

    var currentVariantId = null;
    function variantHandler () {
        var selectedVariantId = window.location.search.replace(/.*variant=(\d+).*/, '$1');
        console.log('checking variant change to '+ selectedVariantId);
        if(!selectedVariantId) return;
        if(selectedVariantId != currentVariantId){
            currentVariantId = selectedVariantId;
            handler(selectedVariantId);
        }
    }

    // Assign listeners
    window.history.pushState = track(history.pushState, variantHandler);
    window.history.replaceState = track(history.replaceState, variantHandler);
    window.addEventListener('popstate', variantHandler);
}


usePushState(function(variantId){
    console.log('variant: '+ variantId +' selected');
});
});

Рецепт для вас следующий. Когда исходная жидкость визуализируется (происходит один раз), вы сохраняете продукт как json в некоторую переменную Javascript. У вас есть дополнительная задача - перебрать варианты и назначить каждому варианту их метаполя. Чтобы упростить себе жизнь, вы могли бы выбрать сохранение параметров варианта в виде метаполя JSON_STRING на уровне продукта, где идентификатор варианта является вашим ключом, а измерения - значением.

Тем не менее, вы сохраняете измерения, привязанные к идентификатору варианта. Теперь, когда происходит событие изменения селектора, вам передается вариант на блюде в существующем обратном вызове селектора опций. Напишите себе функцию, которая использует предоставленный идентификатор варианта для получения размеров вашего уже сохраненного объекта. С этими значениями обновите DOM, и все готово.