是的。我可以通过稍微修改代码来使本教程正常工作。只有在 Shopify 教程更新为与 Slate 相对应之前,此解决方法才有意义。
按照说明按照教程进行操作。 当您到达“找到您的 selectCallback 函数”步骤时, 你会注意到 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 的代码使用的类不再位于您的变体 Selects 中。 在product.liquid上(这是大多数Slate主题的部分)将“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 %}
现在,教程应该可以正常工作了。我希望这可以帮助别人!