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

Question

我想在一个 添加到购物车 按钮上将 2 件产品添加到购物车。我有两个 select 选项，其中一个产品具有相同的变体。添加到购物车按钮将添加相同产品但不同变体的产品。这是我的 select 选项代码。

<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){}
        });
    });
});

但我的代码无法正常工作，只能添加第一个 selected 的变体。另外，我的 selection 无法与 select 一起使用。需要帮助！

这是我想要的参考site。输出应该是这样的。

Answer 1

让我把你的问题分成两部分-:

添加具有不同变体的相同产品？
选择不适用于更改 <select> ?

答案 - 1

I saw code and notice you use same option value for both. So how, you differentiate both variant. You have to pass key for variant or write code at backend for diffrenciate. If your backend have already this functionality then ok.

答案 - 2

select not working with change the option. Because there is no code for onchange. So at the time of page load selected options save by 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

Edited -: As in second image there are two diffrent id's. So if backend got these two id's then by the match of these id fecth variant and make combinedata-structure like [{product_id: {variantLeft: varient}}, {product_id: {varianttRight: varient}] variantLeft and variantRight are comes inside ajax request.

并逐一添加两个产品名称相同但变体不同的产品。可能是您为此更改了一些后端代码。

从脚本中删除 console.log()。仅用于测试。

Answer 2

这可以在没有 Javascript 的情况下通过在变量 select:

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

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

Adding 2 products to cart with 1 add to cart button Shopify

ajax

jquery

liquid

shopify