Shopify 在选择变体时触发功能,但不会覆盖现有功能

Posted

技术标签:

【中文标题】Shopify 在选择变体时触发功能,但不会覆盖现有功能【英文标题】:Shopify trigger function on variant selection but don't override existing functionality 【发布时间】:2019-11-10 23:20:58 【问题描述】:

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

我创建了一个函数并在变体选择上调用它,如下所示:

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

我的函数被调用,我可以执行我想要的操作。但这会阻止默认操作的发生,例如更新价格和 SKU。有什么方法可以同时调用吗?

【问题讨论】:

【参考方案1】:

有多种方法可以实现这一目标。

首先,您需要了解您的主题是如何原生处理变体的。对于 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.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');
);
);

【讨论】:

你的第一个代码块正是我需要的!非常感谢!【参考方案2】:

你的食谱如下。当原始 Liquid 呈现(发生一次)时,您将产品以 json 格式保存到某个 javascript 变量中。您还有一项额外的任务是遍历变体,并为每个变体分配它们的元字段。为了让您的生活更轻松,您可以选择将变体维度保存为产品级别的 JSON_STRING 元字段,其中变体 ID 是您的键,维度是值。

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

【讨论】:

以上是关于Shopify 在选择变体时触发功能,但不会覆盖现有功能的主要内容,如果未能解决你的问题,请参考以下文章

Shopify - 将尺寸变体从选择下拉菜单更改为按钮

Shopify- 获取属性形式 <select>

Shopify 变体价格现在正确显示

尝试在 Shopify 中添加变体时出错

shopify 产品的颜色样本/变体下拉列表

使用布鲁克林主题在 Shopify 的收藏页面上显示所有颜色变体