正文 

当前位置： 首页 > 源码 >

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

     2023-02-15     59

关键词：

【中文标题】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主题开发|从选择列表中选择不同的产品变体时更新价格【英文标题】：ShopifyThemeDevelopment|Updatingpricewhendifferentproductvariantischosenfromselectlist【发布时间】：2020-02-2017:51:00【问题描述】：当从其他产品选项的选择下拉列表中... 查看详情

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

】尝试在Shopify中添加变体时出错【英文标题】：ErrorwhentryingtoaddavariantinShopify【发布时间】：2017-02-0813:42:27【问题描述】：我正在尝试向现有产品ID添加一个变体。下面是我完成的JSON请求。但是我得到一个错误"errors":"variant":"expec... 查看详情

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

】Shopify-将尺寸变体从选择下拉菜单更改为按钮【英文标题】：Shopify-Changesizevariantfromselectdropdowntobuttons【发布时间】：2020-07-2807:13:45【问题描述】：我想将我的变体显示从下拉（选择）更改为使用按钮。我在网上其他地方找不到... 查看详情

Shopify 变体价格现在正确显示

】Shopify变体价格现在正确显示【英文标题】：ShopifyVariantPriceNowShowingCorrectly【发布时间】：2020-03-0909:54:06【问题描述】：这看起来很简单，但无论出于何种原因，我都看不到森林中的树木。所以我在屏幕截图1中看到了当前情况... 查看详情

Shopify- 获取属性形式 <select>

】Shopify-获取属性形式<select>【英文标题】：Shopify-gettingattributeform<select>【发布时间】：2021-10-0522:28:33【问题描述】：所以我有一个问题。我正在Sopify中开发一家商店，并且我有一个自定义部分，其中我有用于选择变体... 查看详情

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

】使用布鲁克林主题在Shopify的收藏页面上显示所有颜色变体【英文标题】：ShowAllColorVariantsonCollectionpageinShopifyusing***lynTheme【发布时间】：2016-05-1509:28:20【问题描述】：嘿，我在我的shopify网站上使用***lyn主题。我有不同的产品会... 查看详情

Shopify - 通过多个变体 ID 检索多个变体详细信息

】Shopify-通过多个变体ID检索多个变体详细信息【英文标题】：Shopify-Retrievesmultiplevariantdetailbymultiplevariantid【发布时间】：2019-05-0309:02:37【问题描述】：有没有办法在单个shopify调用中使用多个变体ID获取多个变体详细信息。实际... 查看详情

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

】shopify产品的颜色样本/变体下拉列表【英文标题】：ColorSwatch/Variantdropdownlistforshopifyproducts【发布时间】：2013-09-2410:00:39【问题描述】：我打算做的是为产品“颜色”变体做一个下拉列表，但是与选项值有某种关联，会显示图像... 查看详情

Shopify：如何显示每个位置变体的库存数量？

】Shopify：如何显示每个位置变体的库存数量？【英文标题】：Shopify:Howtodisplayinventoryquantitiesofavariantperlocation?【发布时间】：2020-08-2408:00:11【问题描述】：是否可以在产品页面上显示每个位置的产品变型的库存数量？由于此信息... 查看详情

Shopify 订单网络挂钩

】Shopify订单网络挂钩【英文标题】：Shopifyorderwebhooks【发布时间】：2012-09-2603:23:04【问题描述】：我查看了不同的订单webhook，想知道它们何时被触发。到目前为止，这是我想出的：orders/updated会在订单以任何方式发生更改时触发... 查看详情

在 Shopify 产品页面上显示一种颜色选项

】在Shopify产品页面上显示一种颜色选项【英文标题】：DisplayonecolouroptiononShopifyproductpage【发布时间】：2021-01-1810:47:02【问题描述】：我试图在任何时候只显示我产品的一种颜色变体。当我手动为每种产品颜色分配图像时，我可... 查看详情

使用 Shopify 在 Collection 页面上筛选变体

】使用Shopify在Collection页面上筛选变体【英文标题】：VariantfilteronCollectionpageswithShopify【发布时间】：2017-12-2223:22:28【问题描述】：我正在尝试在我的收藏页面中设置过滤器。到目前为止，我设法设置了一个很棒的自定义标签过... 查看详情

下拉转换为单选按钮，不再触发特定功能

...下拉菜单转换为单选框。棘手的是，当用户从下拉列表中选择一个选项时，它会触发一些通过ajax自动更新 查看详情

使 sqlite 用户定义的函数不会在空选择时触发

】使sqlite用户定义的函数不会在空选择时触发【英文标题】：makesqliteuserdefinedfunctionnottriggeronemptyselects【发布时间】：2017-10-1821:42:49【问题描述】：我正在使用sql.js（通过emscripten从sqlite编译到js），当我在返回空行的选择结果上... 查看详情

Select2 不会在更改/选择第一个选项时触发

】Select2不会在更改/选择第一个选项时触发【英文标题】：Select2doesn\'ttriggeronchange/selectionoffirstoption【发布时间】：2016-10-2023:18:45【问题描述】：我在做什么：当模式弹出窗口打开时，动态地向选择框添加选项。并等待onchange触发... 查看详情

更改功能不会在 iOS 上触发

...上的结帐。在某一时刻，您可以使用inputtype="date"选择交货日期。更改日期后，应启用/禁用运输方式，在桌面浏览器和Android上运行良好。但在iOS上不会触发onchange功能jQuery部分functionupd 查看详情

如何在shopify中覆盖主题

】如何在shopify中覆盖主题【英文标题】：Howtooverwritethethemeinshopify【发布时间】：2020-06-1108:26:06【问题描述】：任何人都可以帮助我如何覆盖Shopify中的主题。是否有任何选项可以在主主题下创建自定义子主题并将自定义代码写入... 查看详情

WPF，`Loaded` 事件仅在第一次视图模型初始化时触发，但不会在后续视图模型初始化时触发

】WPF，`Loaded`事件仅在第一次视图模型初始化时触发，但不会在后续视图模型初始化时触发【英文标题】：WPF,`Loaded`eventisonlyfiredonfirstviewmodelinitializationbutnotsubsequentones【发布时间】：2017-08-0112:53:24【问题描述】：我像这样多次初... 查看详情