0

我通过本教程将样本添加到我的 shopify 网站，我认为它们很棒，但我希望让它们变得“更聪明”一些。

http://docs.shopify.com/manual/configuration/store-customization/add-color-swatches-to-your-products#Demo

如果我有一顶有 4 种变体的帽子——sm/red、md/red、sm/blue、md/blue——产品页面上会显示 4 个按钮。2 在顶部，1 表示“sm”，1 表示“md” 在这 2 个按钮下方是 2 个颜色按钮，1 个红色和 1 个蓝色。

可以说我除了 sm/red 之外的所有东西都有库存。客户点击按钮“sm”，然后看到它下面有两个颜色选项。不幸的是，他们点击红色，并通过“添加到购物车”按钮更改为“已售罄”发现它已售罄。

如果用户单击“sm”按钮，红色样本变灰或出现 X，我会更喜欢，以便用户立即收到有关可用性的反馈。

实现这一目标有多难？

4

1 回答 1

3

这一点也不难。如果您已经按照您在问题中提到的Shopify 教程实现了色板，那么您只需向该selectCallback函数添加一些额外的代码。

添加到product.liquid：

...

var selectCallback = function(variant, selector) {

  ...

  var selectedSize = jQuery('.size.options li.selected span').text();

  if (selectedSize.length > 0) {
    var variants = selector.product.variants;
    var variantTitles = [];
    var i;

    for (i = 0; i < variants.length; i++) {
      variantTitles.push(variants[i].title);
    }

    jQuery('.color.options li').each( function() {
      var variantTitle = selectedSize + " / " + jQuery('div', this).text();

      // if variantTitle is a valid variant & not sold out, remove unavailable class
      var variantIndex = jQuery.inArray(variantTitle, variantTitles);
      if (variantIndex != -1 && variants[variantIndex].available == true) {
        jQuery('span', this).removeClass('unavailable');
      }
      // if not a valid variant or sold out, add unavailable class
      else {
        jQuery('span', this).addClass('unavailable');
      }
    });
  }
};

...

添加到swatches.liquid（在<style>标签内）：

.unavailable { opacity: 0.2; }

然后，如果您有 2 种尺寸（SM、MD）和 2 种颜色（红色、蓝色），并且“SM / Red”已售罄，您会得到：

小号/红色 售罄

我也把这段代码放在了gist中。

于 2013-10-13T05:36:30.330 回答