如何为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 /红色”已售罄，您可以获得：

我还将此代码放在gist。

中