javascript - 店铺主页 个人中心 关注我们 线下门店 店铺信息将产品下拉框的默认值设为 'Pick an option'/'Pick a Size'

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(服务器端) Assets ，无法直接编辑。

这是我在 product.liquid 中得到的内容(就其值(value)而言):

<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 语句。如果您希望默认值始终为“选择一个选项”，则不需要这些。

我添加到第一个选项的禁用属性是为了不允许用户在打开选择菜单后再次选择它。