shopify - 如何在 Shopify 的 product.variants 循环中调用 option.value?
问题描述
我有一个隐藏的下拉菜单和两个variant-selector
下拉菜单。
一个下拉列表是 for color
,第二个是 for size
。
我想在下拉列表中添加size
数据data-size=""
和color
数据。data-color=""
name=id
<form method="post" action="/cart/add">
{% if product.variants.size > 1 %}
{% for option in product.options_with_values %}
<select class="variant-selector {{option.name}}" data-var="{{forloop.index}}">
{% if product.available %}
{% for values in option.values %}
<option value="{{values}}">{{values}}</option>
{% endfor %}
{% endif %}
</select>
{% endfor %}
<select name="id" style="display:none;" id="data{{forloop.index}}">
{% for variant in product.variants %}
{% if variant.available %}
<option data-size="" data-color="" value="{{ variant.id }}" >{{ variant.title }}</option>
{% endif %}
{% endfor %}
</select>
{% if variant.available%}
<input type="hidden" min="1" type="number" name="quantity" value="1" />
<input type="submit" value="{{ 'products.product.add_to_cart' | t }}" class="btn add-to-cart" />
{% else %}
<input type="submit" value="{{ 'products.product.sold_out' | t }}" class="btn add-to-cart" disabled="disabled">
{% endif %}
{% endif %}
</form>
解决方案
正如Dave B的评论,我不需要在 Shopifyoption.value
的循环中。product.variants
我只是添加data-size="{{ variant.option1 }}"
和data-color="{{ variant.option2 }}"
<select name="id" style="display:none;" id="data{{forloop.index}}">
{% for variant in product.variants %}
{% if variant.available %}
<option data-size="{{ variant.option1 }}" data-color="{{ variant.option2 }}" value="{{ variant.id }}" >{{ variant.title }}</option>
{% endif %}
{% endfor %}
</select>
推荐阅读
- html - 在移动设备上嵌入超出页面宽度 - 在 Squarespace
- reactjs - React Native SVG - 设置 SVG 宽度和高度会导致图标被切断
- apache - $_GET 变量为空 .htaccess 重写
- swift - 在 tableView 中出列可重用的 Cell 崩溃
- bash - crontab - 从 bash 脚本创建的编辑
- docker - Confleunt 演示 (cp-demo) 在 jq 上咳嗽。如何添加到docker?
- swift - dyld:库未加载...原因:没有找到合适的图像 Xcode Swift
- fortran - OpenMP:增长共享数组
- c# - 有人如何从实体框架代码首先映射上下文生成文档?
- python - 在没有 level 参数的多级索引上使用 pandas 方法