Как это работает
- Блок Custom code под кнопкой оформления заказа отображает чекбокс.
- Пока галочка не установлена, блок добавляет класс на кнопки оформления заказа и экспресс-оплаты корзины через shadow root.
- Custom CSS делает так, что этот класс отключает клики.
Шаг 1: добавьте блок с чекбоксом
props.cart важна: она повторно применяет класс после повторного рендера корзины, который иначе бы его стёр.
Шаг 2: добавьте CSS
pointer-events: none фактически блокирует клик; прозрачность лишь показывает покупателю причину.
Шаг 3: протестируйте
- Кнопка оформления заказа затемнена и не реагирует на клики при загрузке.
- Установка галочки включает её; снятие снова отключает кнопку.
- Кнопки экспресс-оплаты также заблокированы.
- Добавление или удаление товара не включает кнопку заново, пока галочка снята.
props.cart находится в массиве зависимостей.
Отслеживание того, кто принял условия
properties[...] прямо с формы, поэтому значение доходит до заказа, кто бы ни выполнял добавление: Aftersell, тема или другое приложение.
Свойство с префиксом _ не отображается в строке для покупателя, но всё же доходит до Shopify и появляется в заказе. Это фиксирует, какая версия условий действовала, а не то, что покупатель поставил галочку.
Что важно сделать правильно
- Обращайтесь только к классам
cart-external-*. Двойникиcart-internal-*— внутренняя механика корзины, а не точка входа для вашего кода. См. Custom CSS. - Проверяйте существование
shadowRootперед использованием. Он равенundefined, пока корзина не загрузится. - Блок ничего не отображает до загрузки корзины, поэтому кнопка оформления заказа никогда не бывает кратковременно активной до применения ограничения.
- React-блок, выбросивший ошибку, ничего не отображает, а остальная часть корзины продолжает работать — здесь это означает незащищённую кнопку оформления заказа. Протестируйте в предпросмотре перед публикацией.
Что дальше
- Блоки Custom code: режим React и его props.
- Custom CSS: соглашение о публичных классах.
- События: что событие
checkoutможет и чего не может.