Shopify option_selection.js - 如何修改？

Question

我遇到了一些麻烦。我正在改造我的商店，并试图改变变体下拉菜单在前端的显示方式。根据我的阅读，option_selection.js 是从 Shopifys 服务器托管和加载的全局资产，它改变了我的产品选项在我的主题中的显示方式。

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

目前看起来是这样的...

我希望它看起来像这样...

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

不幸的是，我不知道如何处理这个问题。模板代码似乎设置为显示价格，但我猜它被 option_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 论坛中询问过，但他们似乎已经死了。

Answer 1

1. 制作您自己的 option_selection.js 并将该文件上传到您主题中的 assets 文件夹。

2. 在您的主题文件中找到这一行（可能的模板/product.liquid）。

   {{ 'option_selection.js' | shopify_asset_url | script_tag }}
   

3. 注释该行并在其下方添加此代码。

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

希望对您有所帮助。

Answer 2

我知道这不是最好的解决方案，但你可能会做的一件事。

1. 下载 option_selection.js 并自己将其添加为资产。

2. 版本控制它，添加您需要的任何内容，然后在 Shopify 更新它的版本时使用 VCS 将其与您的副本合并，这样您就可以获得更新/修复，但仍然保留您的添加内容。

这是我最近在一个项目上必须做的，到目前为止我还没有遇到任何问题。

希望能有所帮助。

Answer 3

根据您的具体情况，您可以通过几行 CSS 为客户获得所需的 UX：

.selector-wrapper {
    display: none !important;
}

select#product-select {
    display: block !important;
}

需要考虑的一些事项：

在多于 1 个变体的情况下，不在每个选项旁边显示价格是有意义的。如果一个项目有 3 种材料和 3 种尺寸，用户可能会在看到每种材料的价格和每种尺寸的价格时感到困惑，特别是因为 X 材料和 Y em> size 最终可能会有所不同。在此过程中应该有一个价格标识符。

在只有 1 个变体的情况下，显示它们之间的价格差异会更有意义。

默认option_selection.js 输出选择器并隐藏“最终”<select name="id"> 变体选择器。以下是提供 2 个变体时的输出示例：

<div class="selector-wrapper">
    <label for="product-select-option-0">First Variant</label>
    <select class="single-option-selector" data-option="option1" id="product-select-option-0">
         <option value="firstvariant1">First Variant Option 1</option>
        <option value="firstvariant2">First Variant Option 2</option>
        <option value="firstvariant3">First Variant Option 3</option>
    </select>
</div>
<div class="selector-wrapper">
    <label for="product-select-option-1">Second Variant</label>
    <select class="single-option-selector" data-option="option2" id="product-select-option-1">
        <option value="secondvariant1">Second Variant Option 1</option>
        <option value="secondvariant2">Second Variant Option 2</option>
    </select>
</div>
<select id="product-select" name="id" style="display: none;">                           
    <option selected="" value="xxxxxxxxxxxxx">
        First Variant 1 / Second Variant 1 - $1.99
    </option>
    <option value="xxxxxxxxxxxxx">
        First Variant 1 / Second Variant 2 - $1.99
    </option>
    <option value="xxxxxxxxxxxxx">
        First Variant 2 / Second Variant 1 - $2.99
    </option>
    <option value="xxxxxxxxxxxxx">
        First Variant 2 / Second Variant 2 - $3.99
    </option>
    <option value="xxxxxxxxxxxxx">
        First Variant 3 / Second Variant 1 - $4.99
    </option>
    <option value="xxxxxxxxxxxxx">
        First Variant 3 / Second Variant 2 - $5.99
    </option>
</select>

因此，您可以使用上面提供的 CSS 覆盖它，并以这种方式实现您希望提供的体验。在只有 1 个变体的情况下，我认为很多用户会更喜欢这个过程，但这不是 OP 想要的语法。