我有点麻烦。我正在修改我的商店,我试图改变如何变体下拉列表显示在前端。从我所读到的,option_selection.js是一个从Shopify服务器托管和加载的全局资产,它改变了我的产品选项在我的主题中的显示方式。
目前,它提供了两个下拉菜单与两个输卵管选项,我已经设置。我想是显示产品价格旁边的下拉列表中的选项的标题。
目前看起来是这样的。。
我希望它看起来像这样...
或者更好的是仍然有+/-价格修改器这样...
不幸的是,我不知道如何处理这一点。模板代码似乎被设置为显示价格,但是我猜它被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>
我在Shopify论坛上问过,但他们似乎死了。
3条答案
按热度按时间tzdcorbm1#
1.创建您自己的option_selection. js并将该文件上传到主题中的assets文件夹。
1.在你的主题文件中找到这一行(可能的模板/product.liquid)。
1.注解该行并在其下方添加以下代码。
希望能帮上忙。
2mbi3lxu2#
我知道这不是最好的解决方案,但有一件事你可能会做。
1.下载option_selection.js并将其添加为资产。
1.版本控制它,使任何您需要的添加,然后当Shopify更新它的版本时,使用VCS将其与您的副本合并,以便您获得更新/修复,但仍然保留您的添加。
这是我最近在一个项目中不得不做的,到目前为止我还没有遇到任何问题。
希望能帮上点忙。
v6ylcynt3#
根据您的情况,您可以通过几行CSS为客户获得所需的UX:
需要考虑的事项:
在有多个变量的情况下,不在每个选项旁边显示价格是有意义的。如果物品具有3种材料和3种尺寸,则用户可能会混淆看到每种材料的价格,然后看到每种尺寸的价格,特别是因为 X 材料和 Y 尺寸的组合最终可能是不同的东西。在这个过程中应该有一个价格标识符。
在只有一个变体的情况下,显示它们之间的价格差异更有意义。
默认的
option_selection.js
输出选择器并隐藏“最终”<select name="id">
变体选择器。以下是提供2个变体时的输出示例:因此,您可以使用上面提供的CSS覆盖它,并以这种方式实现您希望提供的体验。在只有一个变体的情况下,我认为很多用户会喜欢这个过程,但它不是OP想要的语法。