使用1个添加到购物车按钮将2个产品添加到购物车Shopify
我想通过一个添加到购物车按钮在购物车中添加2种产品。我在一个产品中有两个具有相同变体的选择选项。添加到购物车按钮将添加相同的产品，但添加不同的变体产品。这是我的选择选项代码。
<div class="product-single-variant-item">
<label>Power (Left Eye)</label>
<select name="id_left" id="productSelect_left">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}" {% if forloop.first %}selected="selected"{% endif %}>
{% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
{{ variantname[0] }}
</option>
{% else %}
<option disabled="disabled">
{% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
{{ variantname[0] }} - (Out of Stock)
</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="product-single-variant-item">
<label>Power (Right Eye)</label>
<select name="id_right" id="productSelect_right">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}" {% if forloop.first %}selected="selected"{% endif %}>
{% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
{{ variantname[1] }}
</option>
{% else %}
<option disabled="disabled">
{% assign variantname = variant.title | replace: ' ', '' | split: '/' %}
{{ variantname[1] }} - (Out of Stock)
</option>
{% endif %}
{% endfor %}
</select>
</div>
HTML生成的代码
<div class="product-single-variant d-none d-md-flex align-items-center mt-auto">
<div class="product-single-variant-item">
<label>Power (Left Eye)</label>
<select name="id_left" id="productSelect_left">
<option value="34353935515783" selected="selected">
±0.00
</option>
<option value="34353935548551">
-0.50
</option>
<option value="34353935581319">
-0.75
</option>
<option disabled="disabled">
-1.00 - (Out of Stock)
</option>
<option disabled="disabled">
-1.25 - (Out of Stock)
</option>
<option disabled="disabled">
-1.50 - (Out of Stock)
</option>
<option disabled="disabled">
-1.75 - (Out of Stock)
</option>
<option disabled="disabled">
-2.00 - (Out of Stock)
</option>
<option disabled="disabled">
-2.25 - (Out of Stock)
</option>
<option disabled="disabled">
-2.50 - (Out of Stock)
</option>
<option disabled="disabled">
-2.75 - (Out of Stock)
</option>
<option disabled="disabled">
-3.00 - (Out of Stock)
</option>
<option disabled="disabled">
-3.25 - (Out of Stock)
</option>
<option disabled="disabled">
-3.50 - (Out of Stock)
</option>
<option disabled="disabled">
-3.75 - (Out of Stock)
</option>
<option disabled="disabled">
-4.00 - (Out of Stock)
</option>
<option disabled="disabled">
-4.25 - (Out of Stock)
</option>
<option disabled="disabled">
-4.50 - (Out of Stock)
</option>
<option disabled="disabled">
-4.75 - (Out of Stock)
</option>
<option disabled="disabled">
-5.00 - (Out of Stock)
</option>
<option disabled="disabled">
-5.25 - (Out of Stock)
</option>
<option disabled="disabled">
-5.50 - (Out of Stock)
</option>
<option disabled="disabled">
-5.75 - (Out of Stock)
</option>
<option disabled="disabled">
-6.00 - (Out of Stock)
</option>
<option disabled="disabled">
-6.50 - (Out of Stock)
</option>
<option disabled="disabled">
-7.00 - (Out of Stock)
</option>
<option disabled="disabled">
-7.50 - (Out of Stock)
</option>
<option disabled="disabled">
-8.00 - (Out of Stock)
</option>
<option disabled="disabled">
-8.50 - (Out of Stock)
</option>
<option disabled="disabled">
-9.00 - (Out of Stock)
</option>
<option disabled="disabled">
-9.50 - (Out of Stock)
</option>
<option disabled="disabled">
-10.00 - (Out of Stock)
</option>
</select>
</div>
<div class="product-single-variant-item">
<label>Power (Right Eye)</label>
<select name="id_right" id="productSelect_right">
<option value="34353935515783" selected="selected">
±0.00
</option>
<option value="34353935548551">
-0.50
</option>
<option value="34353935581319">
-0.75
</option>
<option disabled="disabled">
-1.00 - (Out of Stock)
</option>
<option disabled="disabled">
-1.25 - (Out of Stock)
</option>
<option disabled="disabled">
-1.50 - (Out of Stock)
</option>
<option disabled="disabled">
-1.75 - (Out of Stock)
</option>
<option disabled="disabled">
-2.00 - (Out of Stock)
</option>
<option disabled="disabled">
-2.25 - (Out of Stock)
</option>
<option disabled="disabled">
-2.50 - (Out of Stock)
</option>
<option disabled="disabled">
-2.75 - (Out of Stock)
</option>
<option disabled="disabled">
-3.00 - (Out of Stock)
</option>
<option disabled="disabled">
-3.25 - (Out of Stock)
</option>
<option disabled="disabled">
-3.50 - (Out of Stock)
</option>
<option disabled="disabled">
-3.75 - (Out of Stock)
</option>
<option disabled="disabled">
-4.00 - (Out of Stock)
</option>
<option disabled="disabled">
-4.25 - (Out of Stock)
</option>
<option disabled="disabled">
-4.50 - (Out of Stock)
</option>
<option disabled="disabled">
-4.75 - (Out of Stock)
</option>
<option disabled="disabled">
-5.00 - (Out of Stock)
</option>
<option disabled="disabled">
-5.25 - (Out of Stock)
</option>
<option disabled="disabled">
-5.50 - (Out of Stock)
</option>
<option disabled="disabled">
-5.75 - (Out of Stock)
</option>
<option disabled="disabled">
-6.00 - (Out of Stock)
</option>
<option disabled="disabled">
-6.50 - (Out of Stock)
</option>
<option disabled="disabled">
-7.00 - (Out of Stock)
</option>
<option disabled="disabled">
-7.50 - (Out of Stock)
</option>
<option disabled="disabled">
-8.00 - (Out of Stock)
</option>
<option disabled="disabled">
-8.50 - (Out of Stock)
</option>
<option disabled="disabled">
-9.00 - (Out of Stock)
</option>
<option disabled="disabled">
-9.50 - (Out of Stock)
</option>
<option disabled="disabled">
-10.00 - (Out of Stock)
</option>
</select>
</div>
</div>
我认为可以通过 AJAX 完成。但是我不知道如何处理 AJAX 请求。我正在尝试使用 AJAX 添加类似的内容。
$(function(){
var variantLeft = $('#productSelect_left option:selected').val();
var variantRight = $('#productSelect_right option:selected').val();
var totalVariant = [variantLeft, variantRight];
$('#AddToCart').on('click', function(){
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1,
id: totalVariant
},
dataType: 'json',
success: function (data){}
});
});
});
但是我的代码不起作用，只能添加一个变体并选择第一个。另外，我的选择不适用于select。需要帮助！
这是我想要的参考文献site。输出应该是这样的。
2 个答案:
答案 0 :(得分：2)
在不使用Javascript的情况下，可以通过在变体选择上使用name =“ id []”来实现：
<select name="id[]" id="productSelect_left">
{% for variant in product.variants %}
<option value="{{ variant.id }}">
{{ variant.title }}
</option>
{% endfor %}
</select>
然后：
<select name="id[]" id="productSelect_right">
{% for variant in product.variants %}
<option value="{{ variant.id }}">
{{ variant.title }}
</option>
{% endfor %}
</select>
当然，两个都在同一个“添加到购物车”表格中。
Didnt'已经使用了一段时间，但是应该可以使用（这是已知的解决方案）。
如果您使用Ajax API，则只需在提交事件时序列化表单即可。
答案 1 :(得分：0)
让我将您的问题分为两部分-：
- 添加具有不同变体的相同产品吗？
- 选择不适用于更改
<select>吗？
答案-1
我看到了代码，并注意到您为两者使用了相同的选项值。因此，如何区分这两种变体。您必须传递变体密钥或在后端编写代码以求区别。
If your backend have already this functionality then ok.
答案-2
select不适用于更改选项。因为没有onchange的代码。因此，在页面加载时，选定的选项将由jquery保存。
修复代码，例如-：
<script>
var variantLeft = $('#productSelect_left option:selected').val();
var variantRight = $('#productSelect_right option:selected').val();
$('#productSelect_left').on('change', () => {
variantLeft = $('#productSelect_left option:selected').val();
console.log(variantLeft);
});
$('#productSelect_right').on('change', () => {
variantRight = $('#productSelect_right option:selected').val();
console.log(variantRight);
});
$('#AddToCart').on('click', function(){
var totalVariant = [variantLeft, variantRight];
console.log(totalVariant)
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1,
id: totalVariant
},
dataType: 'json',
success: function (data){}
});
});
</script>
输出-：
Same variant list
select change
已编辑-：与第二张图片一样，有两个不同的ID。因此，如果后端获得了这两个id，则通过匹配这些id fecth变体，使诸如
[{product_id: {variantLeft: varient}}, {product_id: {varianttRight: varient}]variantLeft and variantRight属于ajax请求。
然后一个接一个地处理以添加两个具有相同产品名称，具有不同变量的产品。可能是您为此更改了一些后端代码。
从脚本中删除console.log()。它仅用于测试。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？