Shopify 变体色板或单选按钮而不是 Slate 中的下拉菜单

Question

color swatches isn't supported yet for Slate 的 Shopify 教程，代码库中不再存在引用的 select 回调。是否可以修改本教程以在 Slate 主题上工作以创建单选按钮或色板而不是产品模板上 selecting 变体的下拉列表？

Answer 1

是的。通过稍微修改代码，我能够使本教程正常工作。只有在 shopify 教程更新为与 Slate 相对应之前，此变通方法才有意义。

按照说明按照教程进行操作。当你到达步骤“Locate your selectCallback function”时，你会注意到 Slate 中没有 selectCallback 函数。哎呀！而是在 theme.js 中找到“_onSelectChange”并在其中添加代码。这是添加了样本代码的最终函数：

/**
 * Event handler for when a variant input changes.
 */
_onSelectChange: function() {
  var variant = this._getVariantFromOptions();

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

  if (!variant) {
    return;
  }

// BEGIN SWATCHES
var selector = this.originalSelectorId;
if (variant) {
    var form = $(selector).closest('form');
    for (var i=0,length=variant.options.length; i<length; i++) {
        var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
        if (radioButton.size()) {
            radioButton.get(0).checked = true;
        }
    }
}
// END SWATCHES

  this._updateMasterSelect(variant);
  this._updateImages(variant);
  this._updatePrice(variant);
  this.currentVariant = variant;

  if (this.enableHistoryState) {
    this._updateHistoryState(variant);
  }
},

然后，完成本教程后，您会发现它仍然无法正常工作。这是因为您添加到 theme.liquid 的代码使用的 class 不再位于您的变体 Selects 中。在 product.liquid（这是关于大多数 Slate 主题的部分）将 class "single-option-selector" 添加到您的选择中，如下所示：

    {% unless product.has_only_default_variant %}
    {% for option in product.options_with_values %}
    <div class="selector-wrapper js">
    <label for="SingleOptionSelector-{{ forloop.index0 }}">
      {{ option.name }}
    </label>
    <select
              id="SingleOptionSelector-{{ forloop.index0 }}"
              class="single-option-selector"
              data-single-option-selector
              data-index="option{{ option.position }}">
             {% for value in option.values %}
                 <option value="{{ value | escape }}"
                 {% if option.selected_value == value %}selected="selected"{% endif %}>
                 {{ value }}
                </option>
            {% endfor %}
    </select>
    </div>
    {% endfor %}
    {% endunless %}

现在，教程应该可以正常工作了。我希望这对某人有所帮助！

Shopify 变体色板或单选按钮而不是 Slate 中的下拉菜单

Shopify variant swatches or radio buttons instead of dropdowns in Slate

shopify

slate