Shopify option_selection.js-如何修改?

2022-03-02 00:00:00 shopify javascript

我有点小麻烦。我正在重新设计我的商店,我试图改变不同的下拉菜单在前端的显示方式。据我所知,option_selection.js是托管自Shopifys服务器的全局资产,它改变了我的产品选项在我的主题中的显示方式。

目前,它提供了两个下拉菜单和我设置的两个输卵管选项。我想要的是在下拉列表中选项标题旁边显示产品价格。

目前看起来是这样的.

我希望它看起来像这样.

或者最好还有这样的+/-价格修饰符.

不幸的是,我不知道如何处理这个问题。模板代码似乎设置为显示价格,但我猜它已被选项_selection.js覆盖

模板代码如下:

<select name="id" id="productSelect" class="product-variants trees">
      {% for variant in product.variants %}
        {% if variant.available %}

          <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

        {% else %}
          <option disabled="disabled">
            {{ variant.title }} - Sold out
          </option>
        {% endif %}
      {% endfor %}
    </select>

我在Shopifys论坛上问过,但他们似乎死了。


解决方案

  1. 创建您自己的option_selection.js并将该文件上载到主题中的Assets文件夹。
  2. 在您的主题文件(Possible Templates/duct.iquid)中查找此行。

    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
    
  3. 注释该行并在该行下面添加此代码。

    {{ 'new_option_selection.js' | asset_url | script_tag }}
    

希望这会有帮助。

相关文章