> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Предотвращение покупок, состоящих только из апселлов, в корзине

> Требуйте от покупателей добавить хотя бы один обычный товар перед оформлением заказа.

<div id="overview">
  # **Обзор**
</div>

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

Это гарантирует, что товары-апселлы функционируют в определённых границах, подчёркивая их роль дополнений к основным товарам.

После внедрения **кнопка оформления заказа будет отключена**, пока в корзину не будет добавлен хотя бы один товар, не являющийся апселлом.

<div id="how-it-works">
  ## Как это работает
</div>

* Если корзина содержит только товары-апселлы, кнопка оформления заказа становится серой
* Под кнопкой появляется предупреждающее сообщение
* Как только добавляется обычный товар, кнопка становится активной, а предупреждение исчезает — обеспечивается понятная валидация для сценариев, гарантирующих, что товары-апселлы покупаются только вместе с соответствующими товарами-триггерами, например, за счёт показа целевых предупреждающих сообщений.

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

<div id="step-1-add-custom-html">
  ## Шаг 1. Добавьте пользовательский HTML
</div>

Перейдите в:\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## В разделе **Above announcements/rewards** вставьте:
</div>

```
<script>  
  function CartContainsOnlyUpsells(cart) {  
    var cartWithoutUpsells = cart.items.filter(item => item.properties?.__upcartUpsell == null);  
    return cartWithoutUpsells.length === 0;  
  }  
  
  function ToggleCheckoutButton(shouldBeEnabled) {  
    var checkoutButton = window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var warning = window.upcartDocumentOrShadowRoot.querySelector(".upcartUpsellOnlyWarning");  
  
    if (checkoutButton && warning) {  
      if (shouldBeEnabled) {  
        checkoutButton.classList.remove("upcart-disable-checkout-button");  
        warning.style.display = "none";  
      } else {  
        checkoutButton.classList.add("upcart-disable-checkout-button");  
        warning.style.display = "block";  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded((event) => {  
    ToggleCheckoutButton(!CartContainsOnlyUpsells(event.cart));  
  });  
</script>
```

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

<div id="in-the-below-checkout-button-section-paste">
  ## В разделе **Below checkout button** вставьте:
</div>

```
<div class="upcartUpsellOnlyWarning" style="display: none;">  
  Your cart only contains upsell products. <br>  
  Please add a regular product to continue to checkout.  
</div>
```

Вы можете свободно изменить формулировку предупреждающего сообщения в соответствии с тоном вашего бренда.

<div id="step-2-add-custom-css">
  ## Шаг 2. Добавьте пользовательский CSS
</div>

Перейдите в:\
**Upcart > Cart Editor > Settings > Custom CSS**

Вставьте следующий код:

```
.upcartUpsellOnlyWarning {  
  width: 100%;  
  text-align: center;  
  margin-top: 10px;  
  color: red;  
  font-weight: bold;  
  font-size: 15px;  
}  
  
.upcart-disable-checkout-button {  
  cursor: none !important;  
  pointer-events: none !important;  
  opacity: 0.4 !important;  
}
```

Этот код стилизует предупреждающее сообщение и отключает кнопку оформления заказа визуально и функционально.

<div id="final-result">
  ## Итоговый результат
</div>

После настройки:

* Оформление заказа заблокировано, пока в корзине нет хотя бы одного товара, не являющегося апселлом
* Сообщение информирует покупателей о том, почему оформление заказа отключено
* Опыт остаётся плавным и соответствующим бренду

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

* Предотвращения случайных покупок одиночных апселлов
* Сохранения апселлов исключительно в роли дополнений
* Обеспечения лучшего контроля над AOV и комплектацией товаров

<div id="still-need-help">
  ## Всё ещё нужна помощь?
</div>

Если вам нужна помощь с кастомизациями, мы рекомендуем проконсультироваться с экспертом Shopify по добавлению HTML, CSS и даже JavaScript в вашу выдвижную корзину.

[Найти экспертов Shopify](https://www.shopify.com/partners/directory)