jquery - 使用 1 个添加到购物车按钮将 2 个产品添加到购物车 Shopify

Question

我想在购物车中添加 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我多么想要。输出应该是这样的。

Answer 1

这可以在没有 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，您可以简单地在提交事件上序列化表单。