Skip to main content
Добавьте чекбокс под кнопкой оформления заказа и не позволяйте покупателю продолжить, пока он не поставит галочку. Полезно для принятия условий, возрастных ограничений и подтверждений изготовления на заказ.
Событие checkout не может отменить оформление заказа. Оно срабатывает как уведомление непосредственно перед переходом браузера, поэтому возврат false или вызов preventDefault ничего не делает. Единственный способ ограничить оформление заказа — не дать кнопке реагировать на клики до её нажатия, что и показано на этой странице.Относитесь к этому как к UI-барьеру, а не юридической гарантии. Настойчивый покупатель всё равно может попасть на оформление заказа напрямую.

Как это работает

Три части:
  1. Блок Custom code под кнопкой оформления заказа отображает чекбокс.
  2. Пока галочка не установлена, блок добавляет класс на кнопки оформления заказа и экспресс-оплаты корзины через shadow root.
  3. Custom CSS делает так, что этот класс отключает клики.

Шаг 1: добавьте блок с чекбоксом

Добавьте блок Custom code под блоком кнопки Checkout, переключите его в режим React component и вставьте:
Нажмите Compile, затем включите «Use custom template». Пока вы этого не сделаете, блок ничего не отображает. Зависимость props.cart важна: она повторно применяет класс после повторного рендера корзины, который иначе бы его стёр.

Шаг 2: добавьте CSS

В Cart settings → Custom CSS:
Именно pointer-events: none фактически блокирует клик; прозрачность лишь показывает покупателю причину.

Шаг 3: протестируйте

В предпросмотре убедитесь, что:
  • Кнопка оформления заказа затемнена и не реагирует на клики при загрузке.
  • Установка галочки включает её; снятие снова отключает кнопку.
  • Кнопки экспресс-оплаты также заблокированы.
  • Добавление или удаление товара не включает кнопку заново, пока галочка снята.
Последний пункт — типичная проблема. Если кнопка сама включается после изменения корзины, эффект не перезапускается. Проверьте, что props.cart находится в массиве зависимостей.

Отслеживание того, кто принял условия

Чекбокс — это состояние только в браузере; оно никогда не попадает в заказ. Чтобы зафиксировать принятие, проставляйте его на каждую строку как свойство в момент добавления в корзину:
Добавьте это в форму товара в теме. Shopify считывает properties[...] прямо с формы, поэтому значение доходит до заказа, кто бы ни выполнял добавление: Aftersell, тема или другое приложение. Свойство с префиксом _ не отображается в строке для покупателя, но всё же доходит до Shopify и появляется в заказе. Это фиксирует, какая версия условий действовала, а не то, что покупатель поставил галочку.

Что важно сделать правильно

  • Обращайтесь только к классам cart-external-*. Двойники cart-internal-* — внутренняя механика корзины, а не точка входа для вашего кода. См. Custom CSS.
  • Проверяйте существование shadowRoot перед использованием. Он равен undefined, пока корзина не загрузится.
  • Блок ничего не отображает до загрузки корзины, поэтому кнопка оформления заказа никогда не бывает кратковременно активной до применения ограничения.
  • React-блок, выбросивший ошибку, ничего не отображает, а остальная часть корзины продолжает работать — здесь это означает незащищённую кнопку оформления заказа. Протестируйте в предпросмотре перед публикацией.

Что дальше