Shopify |使產品下拉框的默認值爲'選擇一個選項'/'選擇一個大小'

Question

我正在使用網格主題並試圖通過默認爲「選擇大小」而不是「小「在product.liquid。 （客戶看到訂購默認尺寸的人的錯誤「小」訂單太多）。

通過這個工作：

https://docs.shopify.com/support/your-website/themes/how-to-add-a-pick-an-option-to-drop-downs

然而，搜索new Shopify.OptionSelectors％的文檔上面已經無果而終 - 不能在我的主題文件中的任何地方找到它。

我的預感是它實際上埋在option_selection.js這是一個Shopify（服務器端）資產，無法直接編輯。

這是我在product.liquid得（爲它的價值）：

<div class="product-options"> 
    <select class="product-variants" name="id" id="product-variants-{{ product.id }}"> 
     {% for variant in product.variants %} 
     <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option> 
    {% endfor %} 
</select> 
</div> 

和，不知道這是連接，我也有：

<script> 
    // required for splitting variants 
    // see ProductView 
    window.products["{{ product.id }}"] = {{ product | json }}; 
    FirstVariant["{{ product.id }}"] = {{ product.selected_or_first_available_variant.id | json }}; 
</script> 

編輯：註釋掉上述代碼中的<option>行，並且大小下拉列表會隨時被觸發，而不管是否被註釋掉。這導致我相信問題是與{{ product.id }}

Answer 1

所以你基本上想要刪除默認值，並強制用戶選擇一個值？我會做這樣的事情，那麼：

<div class="product-options"> 
<select class="product-variants" name="id" id="product-variants-{{ product.id }}"> 
    <option selected="selected" disabled>Pick A Size</option> 
    {% for variant in product.variants %} 
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option> 
{% endfor %} 

我也刪除if語句包括所選擇的屬性，如果產品有選擇的屬性或者如果它是第一個可用的變體。如果您希望默認值始終爲「選擇一個選項」，則不需要這些選項。

我添加到第一個選項的禁用屬性是爲了不允許用戶在打開選擇菜單後再次選擇它。