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

【问题标题】：Adding 2 products to cart with 1 add to cart button Shopify使用 1 个添加到购物车按钮将 2 个产品添加到购物车 Shopify
【发布时间】：2020-06-16 04:36:42
【问题描述】：

我想在一个添加到购物车按钮上将 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。输出应该是这样的。

【问题讨论】：

可以添加html生成的代码吗？另外，您的浏览器是否显示任何错误？
添加了 html 代码。我的浏览器没有错误。
测试你的代码问题是$('#productSelect_left:selected').val(); 附近有空格#productSelect_left 和:selected 之间应该有空格。Working fiddle
但是选择没有显示正确的值，它在页面加载时播种了第一个选择的值。
如果我删除 selected="selected" 两个产品将添加到购物车但相同的变体。不是我选择的。

标签： jquery ajax shopify liquid

【解决方案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，您可以简单地在提交事件时序列化表单。

【讨论】：

我测试了您的解决方案，它运行良好。谢谢。

【解决方案2】：

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

添加具有不同变体的相同产品？
选择不适用于更改<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()。它仅用于测试。

【讨论】：

这是 Shopify。我编辑了我的问题描述添加图片和参考网站链接。