在shopify的收集页面中显示变体选项 [英] Displaying variants options in collection page shopify
问题描述
我知道这个问题在互联网上被问了百万遍,但似乎每个人都想拥有一个自己的解决方案.我找不到我真正需要的东西.
I know this question was asked million times on the internet but it seems like everyone wants to have a solution with their own twist. I can't find what I need exactly.
因此,我使用此代码在我的收藏中显示了变体,然后将其添加到购物车中.
So I used this code to display variants on my collection and then to add to cart.
<form action="/cart/add" method="post" style="text-align:center;">
<select name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - Sold Out</option>
{% endif %}
{% endfor %}
</select>
<input type="submit" value="Add to cart" class="btn" />
</form>
这有效,但是在下拉菜单中,它像这样给我显示:
This works but in the dropdown, it gives it to me like this:
xs / Black - $72.00
small / Black - $61.00
medium / Black - $52.00
large / Black - $74.00
xl / Black - $77.00
xxl / Black - $55.00
xs / Blue - $72.00
small / Blue - $72.00
medium / Blue - $72.00
xl / Blue - $72.00
xxl / Blue - $72.00
我想要的是让客户在不同的下拉列表中分别选择尺寸和颜色,然后单击添加到购物车".
What I want is for the customer to select size and color separately in different dropdowns and then click add to cart.
我到处都在寻找如何做到这一点的运气.请帮忙.如果有帮助,我的Shopify主题为首次亮相".
I was looking everywhere on how to do this with no luck. Please help. My Shopify theme is Debut if it helps.
推荐答案
要在单独的块中获取它,您必须迭代产品选项,最多 3 个,因此您可以单独显示大小和颜色.
To obtain it in separate blocks, you must iterate on the product options, which are maximum 3, so you can show size and color separately.
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden"
{% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select style="display:block" class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}
这篇关于在shopify的收集页面中显示变体选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!