Добавление 2 товаров в корзину с 1 кнопкой «добавить в корзину» 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. Нужна помощь!

Вот ссылка сайт как хочу. Результат должен быть таким.

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 , вы можете просто сериализовать форму при отправке события.

Answer 2

Позвольте мне разделить ваш вопрос на две части:

1. Добавить тот же продукт с другим вариантом?
2. Выбор не работает с изменением <select>?

Ответ - 1

Я видел код и заметил, что вы используете одинаковое значение параметра для обоих. Итак, как вы различаете оба варианта. Вы должны передать ключ для варианта или написать код на бэкэнде для diffrenciate. 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

Отредактировано - : Как и на втором изображении, есть два разных идентификатора. Итак, если бэкэнд получил эти два идентификатора, то при сопоставлении этих вариантов идентификатора fecth и создании комбинированной структуры данных типа [{product_id: {variantLeft: varient}}, {product_id: {varianttRight: varient}] variantLeft and variantRight они входят в ajax запрос.

И обрабатывают один за другим чтобы добавить два продукта с одинаковым названием и разными вариантами. Возможно, вы изменили для этого какой-то бэкэнд-код.

Удалить console.log() из скрипта. Используется только для теста.