选择变体时 Shopify SKU 不更新答案

【问题标题】：Shopify SKU not updating when variant is selected选择变体时 Shopify SKU 不更新
【发布时间】：2017-06-13 17:26:33
【问题描述】：

我正在调用一个产品 SKU 编号，当基于 this Shopify tutorial 选择变体时应该更改该编号。

按照指示，我将以下 sn-p 放置在我希望 SKU 显示的位置：

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

但是，当变体发生变化时，SKU 永远不会像在教程的 gif 中那样更新。

这是它的 an example 在它不起作用的网站上。

此外，这是一个屏幕截图，显示该选项确实是 Shopify 变体，而不是其他东西（只是为了覆盖我的所有基础）。

我唯一的猜测是，Shopify 可能已经改变了，而且现在的做法有所不同，或者我以某种方式设置了一些不正确的东西，尽管我已经按照教程的说明（放置在 product-template.liquid 中，它被引用来自 product.liquid（主题是分段的）。

【问题讨论】：

你能分享你的商店网址吗？您使用的是哪个主题？我可以帮你解决它...
是的，当然，该 URL 实际上位于上面写着“示例”的位置 (mostergo.com/products/ergocentric-aircentric-chair)。我也在使用 Debut 主题（我相信是最新版本）。
见这里我已经添加了一些代码来更改 sku channelpilot.myshopify.com/collections/frontpage/products/… 密码：- rtublu 让我知道这是否适合您..
你检查了吗？
@jhawes 是的。看一下theme.js 中的slate.Variants 函数。特别是_onChangeSelect，它在变体更改时触发，this._updatePrice(variant);

标签： shopify liquid sku

【解决方案1】：

我最近才开始使用 Shopify，但我会尽力提供帮助。我确实注意到您使用的是 current_variant.sku，但 Shopify 的对象参考资料说要使用 variant.sku。这是我找到它的地方：

https://help.shopify.com/themes/liquid/objects/variant#variant-sku

希望对您有所帮助。

【讨论】：

我猜本教程的一部分可能已经过时或为非分段主题而设计（较新的主题已分段）。无论如何，我确实尝试了 variant.sku，但没有运气。这是我正在学习的教程，以防万一：help.shopify.com/themes/customization/products/show-sku-numbers
我在我的代码中试过了，效果很好。我在 devtools 中查看了尽可能多的代码，看起来 sku 的代码不在表单中。您应该在 sku 代码下方看到 <form action="/cart/add" method="post" ...> Stuff is here. div classes and things like that. Sku code should be here, wherever it looks good to you. </form> 您需要将 sku 代码放在这些表单标签中。
当我第一次读到你的评论时，我想“热得要命，就是这样......需要在
内才有意义”，但仍然没有运气。我用

中的 SKU 调用更新了页面。 mostergo.com/collections/office-chairs/products/…

【解决方案2】：

我从未编辑过该网站的 Assets/theme.js 文件，而且我相当确定除了我自己之外没有其他人接触过任何文件。

尽管theme.js 文件中遗漏了一个非常重要的功能，该功能是变体更改sku 所需的。

这些行似乎没有安装在我的 theme.js 文件中：

_updateSKU: function(variant) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }

  this.$container.trigger({
    type: 'variantSKUChange',
    variant: variant
  });
},

此外，对于 _initVarients 函数，缺少以下内容（与具有相同类型代码的其他行放在一起）：

this.$container.on('variantSKUChange' + this.settings.namespace, this._updateSKU.bind(this));

这些在我的 theme.js 文件中没有丢失，但值得检查，因为它们是 SKU 更新所必需的：

位于_onSelectChange 函数内部（与具有相同类型代码的其他行放在一起）：

this._updateSKU(variant);

位于_updatePrice 函数之后：

_updateSKU: function(evt) {
      var variant = evt.variant;

      // Update the sku
      $('.variant-sku').html(variant.sku);
    },

【讨论】：

很高兴你找到它:)

【解决方案3】：

  // Variant is sold out, disable the submit button
            // $addToCart.addClass('disabled').prop('disabled', true);
            $addToCart.hide();
            $variantQuantity.removeClass('is-visible');
            if (variant.incoming) {
              $variantQuantity.html({{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }}.replace('[date]', variant.next_incoming_date)).addClass('is-visible');
            }
            else {
              $variantQuantity.removeClass('is-visible');
            }
            $quantityElements.hide();
            $outofstock.show();
          }
          //console.log(variant.sku);
          $('.variant-sku').html("");
          $('.variant-sku').text(variant.sku);
           // Update price display.
          var customPrice = Shopify.formatMoney(variant.price, theme.moneyFormat);
          if (variant.compare_at_price > variant.price) {
            var comparePrice = Shopify.formatMoney(variant.compare_at_price, theme.moneyFormat);
            var customPriceFormat = ' <del id="old-product-price">' + comparePrice + '</del>';
                customPriceFormat += ' <ins id="product-price">' + customPrice + '</ins>';
            $productPrice.html(customPriceFormat);
            var save = ((variant.compare_at_price - variant.price)*100)/variant.compare_at_price;
            $('#product-{{product.id}} .product-image-summary .onsale').html({{ 'products.product.save_js' | t: saved_amount: '[sale]' | json }}.replace('[sale]', Math.ceil(save))).show();
          }else{
             $productPrice.html(customPrice);
            $('#product-{{product.id}} .product-image-summary .onsale').hide();
          }
          jQuery('.currency .active').trigger('click');
          //Update sku
          if(variant.sku){
             $productsku.text(variant.sku);
            
          }else{
              $productsku.text(theme.strings.na);
            
           }

我发现 produc_js.liquid sn-p 需要更新。

enter image description here

【讨论】：