Shopify |为产品下拉框设置默认值,请说“选择一个选项”/“选择一个尺寸”

时间:2015-08-18 17:27:03

标签: javascript jquery html shopify

我正在使用网格主题并尝试在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 }}

2 个答案:

答案 0 :(得分: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语句。如果您希望默认值始终为“选择一个选项”,则不需要这些选项。

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

答案 1 :(得分:0)