Shopify在选择变量时触发功能，但不覆盖现有功能 [英] Shopify trigger function on variant selection but don't override existing functionality

问题描述

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

I am using the 'Loft' theme on Shopify. When I select a variant on the product page, the them updates the SKU and the price to that variant I need more functionality than this, as I would like to show the dimensions of each variant using metafields.

我已经创建了一个函数，并在这样的变量选择上调用了它:

I have created a function and called it on variant select like this:

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

将调用我的函数，并且我可以执行所需的操作.但这阻止了默认操作的发生，例如更新价格和SKU.有什么办法我可以同时打电话给我吗?

My function is called and I can perform my desired actions. But this stops the default actions from happening, like updating the price and SKU. Is there a way I can call both?

推荐答案

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

There are a number of ways to make this work.

首先，您需要了解主题在本地如何处理变体.对于放样，它使用theme.Variant对象，因此自定义变体选择非常简单:

Firstly you need to be aware of how your theme is natively handling variants. For loft it uses the theme.Variant object so custom variant selection is as easy as:

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.OptionSelector的主题，您可以通过覆盖 selectCallback 全局函数，例如:

For themes that use the old Shopify.OptionSelectors you can either do this old school by overriding the selectCallback global function like:

(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.
};

})();

最后，我处理过的大多数现代主题以及使用带有 enableHistoryState:true 的Shopify.OptionSelectors的主题，都可以跳过覆盖的混乱情况，并安装自己的历史记录处理程序.在这里，您需要拥有自己的脚本/液体来组装获取变体和产品属性所需的JSON:

Finally most modern themes that I've dealt with and themes that use Shopify.OptionSelectors with enableHistoryState: true allow you to skip the messiness of overrides and install your own history handler. Here is where you'd need to have your own script/liquid assemble the JSON you'd need for getting variant and product properties:

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');
});
});

这篇关于Shopify在选择变量时触发功能，但不覆盖现有功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！