Битрикс. Добавляем количество товара в корзину через параметр URL

В 1С-Битрикс иногда нужно передавать количество товара в корзину прямо через URL.

Например:

quantity=5

Ниже пример JS-скрипта, который динамически изменяет параметр quantity в ссылке «В корзину» в зависимости от значения input.

HTML-разметка

<a class="price-card__quantyty-plus" href="#">+</a>

<input
    type="text"
    class="quantity price-card__quantyty-count"
    name="QUANTITY_1"
    value="1"
    id="QUANTITY_1"
>

<a class="price-card__quantyty-minus" href="#">-</a>

<a
    href="<?= $arResult["ADD_URL"] . '&quantity=1' ?>"
    id="addtoCart"
    class="addtoCart btn-basket"
>
    В корзину
</a>

JavaScript для изменения quantity

<script type="text/javascript">

$(document).ready(function() {

    $('input.quantity').change(function() {

        let obAddToCartLink =
            document.getElementById('addtoCart');

        console.log(obAddToCartLink);

        let link_str = String(obAddToCartLink);

        replace_str = link_str.replace(
            /(quantity=)[0-9]+/ig,
            '$1' + $(this).val()
        );

        obAddToCartLink.setAttribute(
            'href',
            replace_str
        );

    });

    $('input.quantity').keypress(function() {
        $(this).trigger('change');
    });

    $('a.price-card__quantyty-plus, a.price-card__quantyty-minus').click(function(e){

        e.preventDefault();
        e.stopPropagation();

        var oThisQuntityInput =
            $('input.quantity:first',
            $(this).parent().parent());

        var iThisQuantity =
            parseInt(oThisQuntityInput.val());

        var iSubtrahend = 1;

        if ($(this).hasClass("price-card__quantyty-plus"))
        {
            if (iThisQuantity < 2)
            {
                return false;
            }

            iSubtrahend =
                iSubtrahend * (-1);
        }

        var iThisQuantityNew =
            iThisQuantity + iSubtrahend;

        oThisQuntityInput.val(iThisQuantityNew);

        oThisQuntityInput.trigger('change');

    });

});

</script>

Как работает скрипт

Скрипт:

• отслеживает изменение quantity;
• берет ссылку «В корзину»;
• находит параметр quantity=1;
• заменяет его на текущее значение input;
• обновляет href ссылки.

Что делает replace()

Основная логика:

replace(
    /(quantity=)[0-9]+/ig,
    '$1' + $(this).val()
)

Регулярное выражение:

• ищет quantity=число;
• заменяет число новым количеством.

Пример работы

Было:

/catalog/?action=ADD2BASKET&id=10&quantity=1

После изменения quantity:

/catalog/?action=ADD2BASKET&id=10&quantity=5

Кнопки плюс и минус

Скрипт также реализует:

• увеличение количества;
• уменьшение количества;
• обновление input;
• обновление ссылки.

Важно про ID addtoCart

В примере используется:

id="addtoCart"

Если товаров на странице несколько, одинаковые ID использовать нельзя.

Как сделать для нескольких товаров

Лучше использовать:

• data-атрибуты;
• уникальные ID;
• closest();
• локальный контейнер товара.

Более современный вариант

Сейчас вместо:

keypress

лучше использовать:

input

А вместо jQuery:

• нативный JS;
• BX.ajax;
• fetch().

Когда используется такой подход

• каталог товаров;
• прайс-листы;
• B2B-магазины;
• быстрое добавление в корзину;
• таблицы товаров;
• кастомные шаблоны Битрикс.

Итог

Скрипт позволяет динамически менять:

quantity=1

в URL добавления товара в корзину в зависимости от значения input.

Такой способ удобен для кастомных шаблонов каталога и быстрого изменения количества товара.