Новости

Старт
Скачать

Типографика
Сетка
Формы
Таблицы
Кнопки
Метки
Пагинация
Крошки
Окна
Подсказки
Наверх
Уведомления
Помощники
ещё

Версия 7.0.0
26 февраля 2026 года

Кнопка добавления в корзину

Версия 3.0.0

Скачать CSS фрагмент компонента Скачать JS фрагмент компонента

Разработана новая универсальная кнопка для добавления товаров в корзину, которая заменяет стандартную кнопку.
Новая кнопка позволяет:

добавлять товар в корзину;
увеличивать и уменьшать количество товара с помощью кнопок «+» и «−»;
вручную указывать необходимое количество товара в числовом поле;
быстро корректировать количество товара непосредственно в карточке товара.

Пример

Пример с эффектом

Шаг изменения 5. Максимум 20

Нет в наличии

Атрибуты плагина

Атрибут	Описание	Значения	По умолчанию
data-item-id	ID товара	Число или строка	Обязательный
data-item-name	Название товара	Текст	`''`
data-item-price	Цена товара	Число	`0`
data-min	Минимальное количество товара	Число	`0`
data-max	Максимальное количество товара	Число	`0` — без ограничения
data-step	Шаг изменения количества	Число	`1`
data-effect	Включает анимацию при добавлении товара в корзину	`1` — включено, `0` — выключено	`0`
data-disabled	Отключает кнопку	`1` — отключено, `0` — включено	`0`

HTML

<div class="cart-action" data-item-id="0000003157" data-item-name="Позиция 1" data-item-price="800" data-effect="1" data-effect-color="#ff0081">
    <div class="cart-button">
        <button type="button" class="cart-add">В корзину</button>
        <div class="cart-counter">
            <button type="button" class="counter-btn counter-minus" aria-label="Уменьшить количество"></button>
            <input type="number" class="counter-value" value="1" min="0" step="1" inputmode="numeric" aria-label="Количество">
            <button type="button" class="counter-btn counter-plus" aria-label="Увеличить количество"></button>
        </div>
    </div>
    <div class="status-tip"></div>
</div>