スレート

Question

のShopifyのチュートリアルは、Slate, の場合はまだサポートされていません。また、選択されたコールバックはコードベースに存在しなくなりました。このチュートリアルを変更して、スレートテーマで製品テンプレートのバリアントを選択するためのドロップダウンリストの代わりにラジオボタンやスウォッチを作成することはできますか？

Answer 1

はい。このチュートリアルでは、コードを少し修正することで動作させることができました。この回避策は、shopifyチュートリアルがSlateに対応するように更新されるまで関連性があります。

チュートリアルの指示に従ってください。 ステップ「Locate your selectCallback function」に到達すると、 にスレートにselectCallback関数がないことがわかります。 Yikes！ 代わりに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に追加するコードが、Variant Selectsに存在しないクラスを使用するためです。 product.liquidオン （これはほとんどのスレートのテーマのセクションである）ので、同じように、あなたの選択に、クラス「シングル・オプション・セレクター」を追加します。それはになっていますよう

{% 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 %} 

今、チュートリアルでは動作するはずです。私はこれが誰かを助けることを望む！