Javascript 变体选择上的Shopify触发器功能，但不要覆盖现有功能

我正在Shopify上使用“Loft”主题。当我在产品页面上选择一个变型时，他们会更新该变型的SKU和价格。我需要更多的功能，因为我想使用元字段显示每个变型的尺寸

我创建了一个函数，并在variant select上调用它，如下所示：

jQuery(function($) {
  new Shopify.OptionSelectors('productSelect', {
    product: {{ product | json }},
    onVariantSelected: selectCallback,
    enableHistoryState: true
  });
});

---

我的函数被调用，我可以执行我想要的操作。但这会阻止默认操作的发生，比如更新价格和SKU。有什么方法可以两者兼而有之吗？

你的食谱如下。当原始液体呈现发生一次时，您可以将产品作为json保存到某个Javascript变量中。您还有一个额外的任务，就是循环遍历变量，并为每个变量分配其元字段。为了让您的生活更轻松，您可以选择在产品级别将变量维度保存为JSON_字符串元字段，其中变量ID是键，维度是值

---

尽管如此，您还是保存了键入变量ID的维度。现在，当选择器更改事件发生时，您将在现有选项选择器回调中的盘中获得该变量。编写一个函数，使用提供的变量ID从已保存的对象获取尺寸。使用这些值，更新DOM，就完成了

你的食谱如下。当原始液体呈现发生一次时，您可以将产品作为json保存到某个Javascript变量中。您还有一个额外的任务，就是循环遍历变量，并为每个变量分配其元字段。为了让您的生活更轻松，您可以选择在产品级别将变量维度保存为JSON_字符串元字段，其中变量ID是键，维度是值

---

尽管如此，您还是保存了键入变量ID的维度。现在，当选择器更改事件发生时，您将在现有选项选择器回调中的盘中获得该变量。编写一个函数，使用提供的变量ID从已保存的对象获取尺寸。使用这些值，更新DOM，就完成了

有很多方法可以实现这一点

首先，你需要知道你的主题是如何处理变体的。对于loft，它使用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.options Selectors的主题，您可以通过覆盖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');
});
});

---

有很多方法可以使这项工作

首先，你需要知道你的主题是如何处理变体的。对于loft，它使用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.options Selectors的主题，您可以通过覆盖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');
});
});

---

你的第一个代码块正是我需要的！非常感谢！你的第一个代码块正是我需要的！非常感谢！