我想在购物车中添加 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我多么想要。输出应该是这样的。
最佳答案
这可以在没有 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>
当然都是在相同的“添加到购物车”表单中 .一段时间没有使用它,但应该可以工作(这是一个已知的解决方案)。
如果您使用 Ajax API,您可以简单地在提交事件上序列化表单。
关于jquery - 使用 1 个添加到购物车按钮将 2 个产品添加到购物车 Shopify,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62401020/