Shopify 和 jQuery：如何使用产品变体下拉选择菜单更改自定义值答案

【问题标题】：Shopify and jQuery: how to change custom value using product variant drop down select menuShopify 和 jQuery：如何使用产品变体下拉选择菜单更改自定义值
【发布时间】：2014-02-26 21:58:44
【问题描述】：

这是我第一次使用 Shopify。到现在为止还挺好。但是，我没有使用 Shopify 购物车。我正在使用一家名为 Shopatron 的第三方公司来实现，他们通过一些基本的 API 提供自己的购物车功能。基本上，Shopatron 提供了 SKU。当我在 Shopify 中创建产品时，我使用该 SKU，然后在 product.liquid 页面上使用 Shopatron 的“添加到购物车”按钮的以下代码调用它：

<tron:ATCButton part_number="{{ product.variants.first.sku }}"></tron:ATCButton>

这很好用，并将 SKU 传递到 Shopatron 购物车。但是，我需要向某些商品添加 Shopify 变体，这意味着根据下拉菜单选择会有不同的 SKU（下拉菜单显然是 Shopify 商品）。我需要知道如何更改“{{ product.variants.first.sku }}”值，以便它根据下拉选择更新 SKU。

我假设这可以用 jQuery 完成，但我不确定如何将它结合在一起。任何帮助将不胜感激！在电子商务部分下的http://developer.shopatron.com/api 有 Shopatron API 参考，尽管我认为这是 Shopify 的事情。

【问题讨论】：

标签： jquery shopify

【解决方案1】：

shopify 有一个

new Shopify.OptionSelectors("product-select", { product: {{ product | json }},onVariantSelected: selectCallback });

所以如果你创建一个名为

的函数

var selectCallback = function(){
    if (variant) {

      if (variant.available) {

        $("#shptrn_addToCart input[name=partNumber]").val(variant.sku);
      }
    }
};

应该为您的 shopatron 添加到购物车按钮正确设置 sku

【讨论】：

非常感谢您提供的信息。看起来很简单，但除了在 CMS GUI 中添加项目信息外，我无法控制下拉菜单。换句话说，我无法将 data-part=... 添加到菜单中。除非我误会了？你是说我只需通过硬代码将data-part="{{product.variants.sku}}" 添加到菜单中一次？我认为这意味着它必须是每个项目的值，这会破坏 CMS 的目的。希望这是有道理的。我会尝试一些事情，看看效果如何。谢谢！
好吧，模式几乎相同。要分解它，您需要知道从下拉列表中选择的动态部件号，仅此而已。只要你能确定你能解决问题。如果可以，请发布下拉代码或它的样子。
`
我想这就是你想看到的？ class 和 id 由 CMS 分配。这个观点来自我的检查员。

<select class="single-option-selector" id="product-select-option-0"> <option value="complete set">Complete Set</option> <option value="towel only">Towel Only</option> </select>

我会再发表评论，以便您可以查看源代码视图。
<form id="add-item-form" action="/cart/add" method="post" class="variants clearfix"> <div class="select clearfix"> <select id="product-select" name='id'> <option value="568917081">Complete Set - $ 84.00</option> <option value="569524773">Bath Towel Only - $ 50.00</option> </select> </div> <div class="purchase-section multiple"> <div class="purchase"> <tron:ATCButton part_number="31BLOSMBBATHCE"></tron:ATCButton> </div>  </div>  </form>