Битрикс — как добавить товар в корзину

Добавление товара в корзину — базовая, но критически важная функция любого интернет-магазина на Битрикс. В этой статье я подробно расскажу о нескольких способах реализации этой функциональности — от простейшего решения до продвинутых методов с AJAX.

Способ 1. Простое добавление через форму (PHP)

Самый простой способ добавить товар в корзину — использовать стандартную HTML-форму с обработкой на сервере.

HTML-форма

<form action="" method="POST" id="add-to-cart-form">
    <input type="hidden" name="product_id" value="<?=$productId?>">
    <div class="quantity-selector">
        <button type="button" class="quantity-minus">-</button>
        <input type="number" name="quantity" value="1" min="1" class="quantity-input">
        <button type="button" class="quantity-plus">+</button>
    </div>
    <button type="submit" class="add-to-cart-btn">Добавить в корзину</button>
</form>

Обработчик на PHP

<?
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['product_id'])) {
    // Подключаем необходимые модули
    if (CModule::IncludeModule("catalog") && CModule::IncludeModule("sale")) {
        $productId = (int)$_POST['product_id'];
        $quantity = isset($_POST['quantity']) ? (int)$_POST['quantity'] : 1;
        
        // Проверяем существование товара
        $res = CIBlockElement::GetByID($productId);
        if ($res->Fetch()) {
            // Пытаемся добавить товар в корзину
            if (Add2BasketByProductID($productId, $quantity)) {
                // Редирект на страницу корзины или остаемся на странице
                if (!isset($_POST['ajax'])) {
                    LocalRedirect('/personal/cart/');
                }
            } else {
                $APPLICATION->IncludeComponent("bitrix:system.show_message", "", array(
                    "MESSAGE" => "Не удалось добавить товар в корзину",
                    "TYPE" => "ERROR"
                ));
            }
        } else {
            $APPLICATION->IncludeComponent("bitrix:system.show_message", "", array(
                "MESSAGE" => "Товар не найден",
                "TYPE" => "ERROR"
            ));
        }
    }
}
?>

Плюсы этого подхода:

• Простота реализации

• Не требует JavaScript

• Работает даже при отключенном JS у пользователя

Минусы:

• Страница перезагружается

• Нет мгновенной обратной связи

• Менее современный пользовательский опыт

Способ 2. Добавление через AJAX

Для более современного интерфейса лучше использовать AJAX.

JavaScript-реализация

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('add-to-cart-form');
    
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const productId = form.querySelector('input[name="product_id"]').value;
            const quantity = form.querySelector('input[name="quantity"]').value || 1;
            
            BX.ajax.runComponentAction(
                'bitrix:catalog.item',
                'addToBasket',
                {
                    mode: 'ajax',
                    data: {
                        productId: productId,
                        quantity: quantity,
                        ajax_basket: 'Y'
                    }
                }
            ).then(function(response) {
                if (response.status === 'success') {
                    // Обновляем мини-корзину
                    BX.onCustomEvent('OnBasketChange');
                    
                    // Показываем уведомление
                    BX.UI.Notification.Center.notify({
                        content: 'Товар добавлен в корзину',
                        autoHideDelay: 3000
                    });
                    
                    // Можно сделать редирект или другие действия
                    // window.location.href = '/personal/cart/';
                }
            }, function(response) {
                BX.UI.Notification.Center.notify({
                    content: 'Ошибка при добавлении товара',
                    autoHideDelay: 3000
                });
            });
        });
    }
    
    // Обработчики кнопок +/-
    document.querySelectorAll('.quantity-plus').forEach(btn => {
        btn.addEventListener('click', function() {
            const input = this.parentElement.querySelector('.quantity-input');
            input.value = parseInt(input.value) + 1;
        });
    });
    
    document.querySelectorAll('.quantity-minus').forEach(btn => {
        btn.addEventListener('click', function() {
            const input = this.parentElement.querySelector('.quantity-input');
            if (parseInt(input.value) > 1) {
                input.value = parseInt(input.value) - 1;
            }
        });
    });
});

Необходимые компоненты

Для работы AJAX-добавления нужно подключить необходимые JS-библиотеки:

CJSCore::Init(array('ajax', 'ui.notification'));

Преимущества AJAX-подхода:

• Мгновенная обратная связь

• Без перезагрузки страницы

• Современный пользовательский опыт

• Можно обновлять только мини-корзину

Недостатки:

• Требует JavaScript

• Более сложная реализация

• Нужно обрабатывать случаи с отключенным JS

Способ 3. Использование стандартных компонентов Битрикс

Битрикс предоставляет готовые компоненты для работы с корзиной:

$APPLICATION->IncludeComponent(
    "bitrix:catalog.item",
    "template_name",
    array(
        "IBLOCK_ID" => $iblockId,
        "PRODUCT_ID" => $productId,
        "BASKET_URL" => "/personal/cart/",
        "ACTION_VARIABLE" => "action",
        "PRODUCT_QUANTITY_VARIABLE" => "quantity",
        "ADD_TO_BASKET_ACTION" => "ADD",
        "SHOW_CLOSE_POPUP" => "Y"
    ),
    false
);

Параметры компонента:

• IBLOCK_ID — ID инфоблока с товарами

• PRODUCT_ID — ID конкретного товара

• BASKET_URL — URL страницы корзины

• SHOW_CLOSE_POPUP — показывать ли кнопку "Продолжить покупки" после добавления

Обработка ошибок и особых случаев

При реализации добавления в корзину нужно учитывать:

1. Проверка наличия товара:

   $res = CIBlockElement::GetByID($productId);
   if (!$res->Fetch()) {
       // Товар не найден
   }

   
   

2. Проверка доступного количества:

   $productInfo = CCatalogProduct::GetByID($productId);
   if ($quantity > $productInfo['QUANTITY']) {
       // Запрошенное количество больше доступного
   }

   
   

3. Проверка активности товара:

   $res = CIBlockElement::GetByID($productId);
   if ($arr = $res->Fetch()) {
       if ($arr['ACTIVE'] != 'Y') {
           // Товар неактивен
       }
   }

   
   

Оптимизация пользовательского опыта

1. Добавьте анимацию при добавлении в корзину:

   // Пример с GSAP
   gsap.fromTo(addToCartBtn, 
       {scale: 1}, 
       {scale: 1.1, duration: 0.2, yoyo: true, repeat: 1}
   );

   
   

2. Реализуйте "летающий товар":

   function animateFlyingProduct(imageSrc) {
       const img = document.createElement('img');
       img.src = imageSrc;
       img.style.position = 'fixed';
       // ... анимация к корзине
   }

   
   

3. Обновляйте мини-корзину:

   BX.onCustomEvent('OnBasketChange', function() {
       BX.ajax.loadJSON('/ajax/get_mini_cart.php', function(data) {
           document.querySelector('.mini-cart-count').innerText = data.count;
           document.querySelector('.mini-cart-total').innerText = data.total;
       });
   });

   
   

Заключение

Выбор способа добавления товара в корзину зависит от требований вашего проекта:

1. Для простых случаев — используйте стандартную форму с PHP-обработчиком.

2. Для современных магазинов — реализуйте AJAX-добавление с анимациями.

3. Для быстрого решения — применяйте стандартные компоненты Битрикс.

Не забывайте обрабатывать ошибки и оптимизировать пользовательский опыт — это повысит конверсию вашего магазина.