Skip to main content
Блок Product add-on предлагает один конкретный товар, который вы выбираете, в качестве дополнения внутри корзины, продвигая один известный товар (гарантию, пробник, бестселлер) как быстрое добавление прямо в корзине.
В отличие от Upsells, который показывает товары, выбранные стратегией, Product add-on всегда показывает именно тот товар, который вы выбрали.
Блок Product add-on, предлагающий покупателю дополнительный товар для включения в корзину

​
Поведение

  • Если не найден активный вариант — товар не задан, архивирован или отсутствует в наличии — блок ничего не отображает вместо неработающей кнопки.
  • Элемент управления отражает, находится ли в корзине позиция дополнения именно этого блока, поэтому его отключение удаляет добавленную им позицию (и не влияет на тот же товар, добавленный в другом месте).
  • Цена compare-at зачёркивается при наличии настоящей уценки; надпись «% off» скрывается, если скидка округляется до значения ниже 1%.
  • Изображение дополнения по умолчанию берётся из главного изображения товара, если у выбранного варианта его нет.

​
Настройки

Title, Price label и Description поддерживают одни и те же четыре токена: {{product_title}}, {{price}}, {{compare_at_price}} и {{savings}}.

​
Размещение и ограничения

  • Регион: тело или низ.
  • Максимум: 3 на состояние корзины — заполненная и пустая корзина получают каждая свой лимит.
  • Состояние: и заполненная, и пустая корзина.
  • Не добавляется по умолчанию. Не заблокирован — вы можете удалить или скрыть его.

​
Пользовательский шаблон

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

​
Контент

​
Состояние и действия

format определяет, какой обработчик применяется: handleAdd для button, handleToggle для checkbox и toggle. null в variantId означает, что добавлять нечего, поэтому блокируйте ваш элемент управления по этому значению вместо вызова обработчика, который не может завершиться успешно.

​
Дизайн

Стилизуйте этот блок через его раздел Design в панели настроек. Это переопределения на уровне блока, которые накладываются поверх вашего глобального дизайна и возвращаются к нему, если оставлены пустыми.

​
Текст

Раздел Text в Design позволяет управлять типографикой трёх элементов. Используйте селектор Text element, чтобы переключаться между ними. Title — название товара. Также поддерживает пользовательский шрифт. Полужирное начертание и цвет текста задаются в редакторе форматированного текста выше (на вкладке Settings), а не здесь. Price — строка цены. Полужирное начертание и цвет текста задаются в редакторе форматированного текста выше. Description — сопроводительный текст. Полужирное начертание и цвет текста задаются в редакторе форматированного текста выше.
Клик по текстовому элементу прямо в предпросмотре корзины подсвечивает его и автоматически открывает его элементы управления в панели.
Что такое настройки дизайна? Узнайте больше здесь: Настройки дизайна.