Shopify 触发变体选择功能，但不覆盖现有功能

Question

我在 Shopify 上使用 'Loft' 主题。当我 select 产品页面上的变体时，它们会更新 SKU 和该变体的价格我需要比这更多的功能，因为我想使用元字段显示每个变体的尺寸。

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

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

我的函数被调用，我可以执行我想要的操作。但这会阻止默认操作发生，例如更新价格和 SKU。有没有办法同时调用两者？

Answer 1

给你的菜谱如下。当原始 Liquid 渲染时（发生一次），您将产品作为 json 保存到某个 Javascript 变量中。您的额外任务是遍历变体，并为每个变体分配它们的元字段。为了让您的生活更轻松，您可以选择将变体尺寸保存为产品级别的 JSON_STRING 元字段，其中变体 ID 是您的键，尺寸是值。

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

Answer 2

有多种方法可以完成这项工作。

首先，您需要了解您的主题本机如何处理变体。对于阁楼，它使用 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 的主题允许您跳过混乱的覆盖并安装您自己的历史处理程序。这是您需要拥有自己的 script/liquid assemble 和 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+).*/, '');
        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');
});
});

Shopify 触发变体选择功能，但不覆盖现有功能

Shopify trigger function on variant selection but don't override existing functionality

javascript

liquid

shopify

shopify-template