Skip to main content
Макет вашей корзины — это стопка блоков: настраиваемых элементов, которые вы добавляете, переставляете, оформляете и настраиваете в редакторе корзины. Какие блоки вы включаете и в каком порядке — это и есть корзина, которую видят покупатели. О том, как блоки располагаются внутри состояний и секций, см. Как работают корзины?.

​
Блоки и вложенные блоки

Есть два вида блоков:
  • Блоки располагаются непосредственно в корзине, в одной из трёх секций: Header, Body или Footer. Каждая секция предлагает свой набор блоков.
  • Вложенные блоки размещаются внутри другого блока. Сегодня вложенные блоки есть только у Cart items: строка Product (сама строка позиции), Subscription upgrade и Custom code.

​
Добавление, перестановка и удаление блоков

  • Добавляйте блок через окно выбора Add block. Блок затенён, если он не может размещаться там, куда вы его добавляете, или если вы достигли его лимита (окно выбора показывает бейдж count/max).
  • Переставляйте, перетаскивая блок внутри его секции.
  • Удаляйте значком корзины, кроме заблокированных блоков (ниже).
  • Показывайте/скрывайте большинство блоков переключателем-глазом, который скрывает блок от покупателей, не удаляя его. Несколько структурных блоков скрыть нельзя: Cart items, Checkout button и строка Product.

​
Заблокированные блоки

Некоторые блоки можно переставлять, но нельзя удалить, чтобы базовое поведение корзины (например, оформление заказа) нельзя было убрать случайно:
  • Cart items
  • Checkout button

​
Блоки по умолчанию

Новые корзины начинают с рабочего макета по умолчанию:
  • Заполненная корзина: Header, Banner, Cart items, Summary, Checkout button
  • Пустая корзина: Header, блок Empty cart
Состояние пустой корзины — это весь пустой макет. Блок Empty cart — один блок внутри него. О разнице см. Как работают корзины?.

​
Сколько блоков каждого типа можно добавить

Лимиты считаются на состояние корзины, а не на корзину. Заполненная корзина и пустая корзина имеют отдельные лимиты, поэтому корзина может содержать три баннера в заполненном макете и ещё три в пустом. Большинство блоков ограничены одним на состояние. Исключения:

​
Content, Design и Code

Каждый блок настраивается через до трёх поверхностей в редакторе:
  • Content: настройки блока (текст, выбор товаров, пороги и так далее). Блок Custom code — единственное исключение: у него нет панели Content, потому что блок и есть код.
  • Design: поблочное оформление, накладываемое поверх глобальных настроек дизайна. Есть у каждого блока, кроме Custom code, у которого вообще нет панели настроек.
  • Code: переопределение встроенного отображения блока с помощью пользовательского шаблона. Большинство блоков это поддерживают; пара — нет.

​
Показ или скрытие по рынку, стране или валюте

Некоторые блоки могут показывать разные настройки или полностью скрываться в зависимости от того, кто покупатель. Это отличается от переключателя-глаза в боковой панели, который включает или выключает блок для всех. Поддерживаемые типы условий сегодня: рынок Shopify, страна покупателя и валюта покупателя (каждое с In или Not in). Итог корзины и содержимое корзины не являются типами условий. Используйте пороги уровней в Rewards для прогресса по сумме/количеству или Cart SDK, когда нужно правило, которое редактор не может выразить. Условия — это упорядоченный список: побеждает первое совпавшее условие. Помещайте конкретные правила выше универсального All buyers. Если ничего не совпало, блок ничего не отображает для этого покупателя. В редакторе сегодня полный интерфейс Conditions доступен в блоке Rewards: разные наборы уровней для рынка, страны или валюты. Остальные блоки либо используют единую конфигурацию «для всех покупателей», либо пока не участвуют в этой системе. Предпросмотр редактора не оценивает реального покупателя. Выберите условие в панели, чтобы просмотреть этот вариант.

​
Все блоки

Структура
  • Header: заголовок, счётчик товаров, логотип и кнопка закрытия, закреплён сверху.
  • Cart items: товары, которые покупатели добавляют в корзину; повторяется для каждой строки.
  • Subscription upgrade: вложенный блок, предлагающий преобразовать позицию в подписку.
  • Summary: итоги, экономия и применённые скидки.
  • Checkout button: основной призыв к действию для перехода к оформлению заказа.
  • Empty cart: содержимое, отображаемое, когда корзина пуста.
  • Express payments: кнопки ускоренного оформления заказа (Shop Pay, PayPal и другие) внутри корзины.
Мерчандайзинг
  • Upsells: рекомендации товаров, подобранные стратегией.
  • Product add-on: один конкретный товар, предлагаемый как дополнение.
  • Rewards: многоуровневые вознаграждения, такие как бесплатная доставка или подарки.
  • Shipping protection: опциональное дополнение с защитой доставки.
Ввод покупателя
  • Discount code: поле для применения кода скидки.
  • Notes: поле для примечаний к заказу.
Контент
  • Banner: баннер с сообщением и опциональным таймером обратного отсчёта.
  • Image: одно изображение или готовый набор, например значки платёжных систем.
  • Custom code: пользовательский HTML или React в любом месте корзины.
Расширение

​
Блоки, доступные в каждой секции

Каждая секция имеет свой набор доступных блоков. Это сохраняет макет сфокусированным и уменьшает загромождение. Некоторые из этих блоков привязаны к состоянию (например, Empty cart — только в пустом состоянии). См. Как работают корзины?.

​
Ошибки валидации блоков

Если настройки блока содержат недопустимое значение, рядом с именем этого блока в боковой панели появляется маленькая красная точка. Точка остаётся, пока вы не исправите проблему. Это не закрываемое уведомление. Пока в каком-либо блоке есть ошибка, сохранение заблокировано. Кнопка Save остаётся кликабельной, но её нажатие показывает всплывающее сообщение об ошибке («Fix the errors in your cart blocks before saving») и переходит к первому блоку с проблемой, открывая его настройки, чтобы вы могли исправить подсвеченное поле. Publish дополнительно требует отсутствия несохранённых изменений, поэтому остаётся недоступной до успешного чистого сохранения. Как только недопустимое поле исправлено, точка исчезает сама, и сохранение проходит нормально.
Скрытые блоки тоже проходят валидацию. Скрытый вами блок может содержать недопустимую настройку, показывать точку ошибки и блокировать сохранение точно так же, как видимый, поэтому если сохранение заблокировано, а все видимые блоки выглядят нормально, проверьте скрытые блоки.