如何为 shopify 主题创建“更智能”的色板

Question

我正在通过本教程将色板添加到我的 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，我会更喜欢这样，以便用户立即收到有关可用性的反馈。

要做到这一点有多难？

Answer 1

这一点也不难。如果您已经按照问题中提到的Shopify tutorial 实现了色板，那么您只需向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 中。