> ## 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.

# Zapobieganie zakupom samych upselli w koszyku

> Wymagaj od klientów dodania co najmniej jednego zwykłego produktu przed przejściem do checkoutu.

<div id="overview">
  # **Omówienie**
</div>

Ta personalizacja używa HTML, CSS i JavaScriptu do blokowania checkoutu, gdy koszyk zawiera wyłącznie produkty upsell. Pomaga zapewnić, że upselle są traktowane jako oferty dodatkowe, a nie samodzielne zakupy, wspierając bardziej kontrolowaną i przemyślaną strategię upsellową.

Dzięki temu produkty upsell funkcjonują w określonych granicach, podkreślając ich rolę jako uzupełnienia produktów głównych.

Po wdrożeniu **przycisk checkoutu będzie wyłączony**, dopóki do koszyka nie zostanie dodany co najmniej jeden produkt niebędący upsellem.

<div id="how-it-works">
  ## Jak to działa
</div>

* Jeśli koszyk zawiera tylko produkty upsell, przycisk checkoutu jest wyszarzony
* Pod przyciskiem pojawia się komunikat ostrzegawczy
* Po dodaniu zwykłego produktu przycisk staje się aktywny, a ostrzeżenie znika — zapewnia to jasną walidację w scenariuszach, w których produkty upsell mają być kupowane wyłącznie z powiązanymi produktami wyzwalającymi, na przykład poprzez wyświetlanie ukierunkowanych komunikatów ostrzegawczych.

Ta konfiguracja jest idealna dla właścicieli sklepów lub deweloperów z podstawową znajomością JavaScriptu i CSS.

<div id="step-1-add-custom-html">
  ## Krok 1: dodaj niestandardowy HTML
</div>

Przejdź do:\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## W sekcji **Above announcements/rewards** wklej:
</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>
  **Uwaga dotycząca starszej wersji:** wywołania zwrotne `window.upcartOnCartLoaded` nadal działają, ale są przestarzałe i generują ostrzeżenia w konsoli. We wszystkich nowych skryptach używaj `upcartSubscribeCartLoaded`.
</Note>

<div id="in-the-below-checkout-button-section-paste">
  ## W sekcji **Below checkout button** wklej:
</div>

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

Możesz dowolnie dostosować treść komunikatu ostrzegawczego do tonu swojej marki.

<div id="step-2-add-custom-css">
  ## Krok 2: dodaj niestandardowy CSS
</div>

Przejdź do:\
**Upcart > Cart Editor > Settings > Custom CSS**

Wklej poniższy kod:

```
.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;  
}
```

Ten kod styluje komunikat ostrzegawczy oraz wyłącza przycisk checkoutu wizualnie i funkcjonalnie.

<div id="final-result">
  ## Efekt końcowy
</div>

Po skonfigurowaniu:

* Checkout jest zablokowany, dopóki w koszyku nie znajdzie się co najmniej jeden produkt niebędący upsellem
* Komunikat informuje klientów, dlaczego checkout jest wyłączony
* Całość działa płynnie i spójnie z marką

Jest to szczególnie pomocne w następujących przypadkach — połączenie skutecznych strategii upsellowych z tymi technikami poprawia także ogólne doświadczenie zakupowe klientów, eliminując zbędne konflikty w procesie zakupowym:

* Zapobieganie przypadkowym zakupom pojedynczych produktów upsell
* Utrzymanie upselli wyłącznie jako produktów dodatkowych
* Zapewnienie lepszej kontroli nad AOV i łączeniem produktów w zestawy

<div id="still-need-help">
  ## Nadal potrzebujesz pomocy?
</div>

Jeśli potrzebujesz pomocy przy personalizacjach, zalecamy skonsultowanie się z ekspertem Shopify w sprawie dodania HTML, CSS, a nawet JavaScriptu do Twojego cart drawer.

[Zobacz ekspertów Shopify](https://www.shopify.com/partners/directory)