Обзор

В этом руководстве показано, как добавить под кнопкой оформления заказа чекбокс, требующий от покупателей согласия с условиями вашего магазина. Пока чекбокс не отмечен, кнопки оформления заказа и экспресс-оплаты отключены. Это отличный способ обеспечить юридическое соответствие, задать чёткие ожидания и добавить профессионализма вашей корзине.

Что делает эта настройка

Добавляет чекбокс согласия с условиями под кнопкой оформления заказа
Не позволяет покупателям оформить заказ, пока они не согласятся
Блокирует стандартную кнопку оформления заказа. В версии 1 модуля экспресс-платежей она также делает кнопки экспресс-оплаты серыми — см. примечание ниже, если вы используете версию 2
Поддерживает полностью настраиваемые текст и ссылку

Эта настройка требует базовых знаний HTML, JavaScript и CSS. Она лучше всего подходит для владельцев магазинов или разработчиков с начальными навыками программирования.

Часть, касающаяся экспресс-кнопок, работает только в версии 1. Скрипт ищет #upcart-additional-checkout-buttons, а CSS стилизует .upcart-express-pay-button — оба селектора относятся к модулю экспресс-платежей версии 1. Версия 2 отображает #upcart-express-payments и клонирует собственные кнопки Shopify, у которых нет ни одного из этих селекторов, поэтому экспресс-оплата остаётся кликабельной, даже когда чекбокс не отмечен. Стандартная кнопка оформления заказа блокируется в обеих версиях.

Шаг 1: добавьте пользовательский HTML

Перейдите в Upcart > Cart Editor > Settings > Custom HTML
Вставьте следующее в Above announcements/rewards:

<script>  
  function TermsCheckboxUpdate() {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
    var termsWarning =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcartTermsWarning");  
    var checkoutButton =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var cartElement =  
      window.upcartDocumentOrShadowRoot.querySelector(".upcart-cart");  
    var expressButtons =  
      window.upcartDocumentOrShadowRoot.querySelector(  
        "#upcart-additional-checkout-buttons"  
      );  
  
    if (checkbox.checked) {  
      termsWarning.style.display = "none";  
  
      if (checkoutButton) {  
        checkoutButton.classList.remove("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.remove("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.remove("upcartDisableExpressButton");  
      }  
    } else {  
      termsWarning.style.display = "block";  
  
      if (checkoutButton) {  
        checkoutButton.classList.add("upcartDisableCheckoutButton");  
      }  
  
      if (cartElement) {  
        cartElement.classList.add("style_upcartDisableExpressButton");  
      }  
  
      if (expressButtons) {  
        expressButtons.classList.add("upcartDisableExpressButton");  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded(() => {  
    var checkbox =  
      window.upcartDocumentOrShadowRoot.querySelector("#agree");  
  
    if (checkbox) {  
      checkbox.setAttribute("onclick", "TermsCheckboxUpdate()");  
    }  
  
    TermsCheckboxUpdate();  
  });  
</script>

Примечание об устаревшем API: обратные вызовы window.upcartOnCartLoaded всё ещё работают, но устарели и выводят предупреждения в консоль. Используйте upcartSubscribeCartLoaded для всех новых скриптов.

Вставьте следующее в Below checkout button. Обновите ссылку и текст в соответствии с условиями вашего магазина:

<div class="upcartTermsWrapper">  
  <div class="upcartTermsCheckboxWrapper">  
    <input id="agree" type="checkbox" />  
    I accept the  
    <a  
      class="upcartTermsAnchor"  
      href="https://yourstore.com/terms"  
      target="_blank"  
    >  
      Terms & Conditions  
    </a>.  
  </div>  
  
  <div class="upcartTermsWarning">  
    Please accept the Terms & Conditions above before continuing.  
  </div>  
</div>

Шаг 2: добавьте пользовательский CSS

Перейдите в Upcart > Cart Editor > Settings > Custom CSS
Вставьте следующее для управления стилями:

.upcartDisableCheckoutButton {  
  pointer-events: none !important;  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}  
  
.upcartDisableExpressButton {  
  pointer-events: none !important;  
}  
  
.upcartTermsWarning {  
  text-align: center;  
  width: 100%;  
  color: red;  
  font-size: 14px;  
  font-weight: bold;  
}  
  
.upcartTermsAnchor {  
  text-decoration: underline !important;  
  color: #0000EE;  
  font-weight: bold;  
  font-size: 14px !important;  
  padding: 0 !important;  
}  
  
.upcartTermsWrapper {  
  width: 100%;  
}  
  
.upcartTermsCheckboxWrapper {  
  font-size: 14px;  
  text-align: center;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  gap: 5px;  
}  
  
.upcart-cart.style_upcartDisableExpressButton  
  .upcart-express-pay-button {  
  background-color: grey !important;  
  opacity: 0.5 !important;  
}

Вы можете изменить цвета под свой бренд, обновив значения color, background-color и opacity.

Итоговый результат

Когда покупатели открывают корзину:

Кнопки оформления заказа и экспресс-оплаты отключены, пока чекбокс не отмечен
Красное предупреждение появляется, если они пытаются продолжить без согласия
После отметки чекбокса все кнопки становятся активными

Нужна помощь?

Для сложных реализаций или более комплексных требований мы рекомендуем обратиться к эксперту Shopify. Служба поддержки Upcart не помогает с написанием или отладкой пользовательского кода. Посмотреть экспертов Shopify

Начало работы

Модули корзины

Настройки корзины

Закреплённая кнопка корзины

Multicart

Кастомизации

Аналитика

Интеграции и совместимость

Оплата и аккаунт

Устранение неполадок

Добавьте обязательный чекбокс согласия с условиями в корзину

Обзор

Что делает эта настройка

Шаг 1: добавьте пользовательский HTML

Шаг 2: добавьте пользовательский CSS

Итоговый результат

Нужна помощь?

​Обзор

​Что делает эта настройка

​Шаг 1: добавьте пользовательский HTML

​Шаг 2: добавьте пользовательский CSS

​Итоговый результат

​Нужна помощь?

Обзор

Что делает эта настройка

Шаг 1: добавьте пользовательский HTML

Шаг 2: добавьте пользовательский CSS

Итоговый результат

Нужна помощь?