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

# Aankopen met alleen upsells in de winkelwagen voorkomen

> Vereis dat klanten minstens één regulier product toevoegen voordat ze afrekenen.

<div id="overview">
  # **Overzicht**
</div>

Deze aanpassing gebruikt HTML, CSS en JavaScript om de checkout te blokkeren wanneer de winkelwagen alleen upsell-artikelen bevat. Zo zorg je ervoor dat upsells worden behandeld als secundaire aanbiedingen en niet als losse aankopen, ter ondersteuning van een meer gecontroleerde en bewuste upsell-strategie.

Dit zorgt ervoor dat upsell-producten binnen specifieke grenzen functioneren en benadrukt hun rol als aanvullende artikelen op primaire producten.

Wanneer geïmplementeerd, wordt de **checkout-knop uitgeschakeld** totdat er minstens één niet-upsell-product aan de winkelwagen is toegevoegd.

<div id="how-it-works">
  ## Hoe het werkt
</div>

* Als de winkelwagen alleen upsell-artikelen bevat, wordt de checkout-knop grijs weergegeven
* Er verschijnt een waarschuwingsbericht onder de knop
* Zodra een regulier product wordt toegevoegd, wordt de knop actief en verdwijnt de waarschuwing - Biedt duidelijke validatie voor scenario's waarin upsell-producten alleen samen met bijbehorende triggerproducten worden gekocht, zoals het tonen van gerichte waarschuwingsberichten.

Deze opzet is ideaal voor winkeleigenaren of ontwikkelaars met basiskennis van JavaScript en CSS.

<div id="step-1-add-custom-html">
  ## Stap 1: Voeg aangepaste HTML toe
</div>

Ga naar:\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## Plak in de sectie **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>
  **Legacy-opmerking:** `window.upcartOnCartLoaded`-callbacks werken nog steeds, maar zijn verouderd en loggen consolewaarschuwingen. Gebruik `upcartSubscribeCartLoaded` voor alle nieuwe scripts.
</Note>

<div id="in-the-below-checkout-button-section-paste">
  ## Plak in de sectie **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>
```

Pas gerust de formulering van het waarschuwingsbericht aan zodat het past bij de toon van je merk.

<div id="step-2-add-custom-css">
  ## Stap 2: Voeg aangepaste CSS toe
</div>

Ga naar:\
**Upcart > Cart Editor > Settings > Custom CSS**

Plak de volgende code:

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

Dit stijlt het waarschuwingsbericht en schakelt de checkout-knop visueel en functioneel uit.

<div id="final-result">
  ## Eindresultaat
</div>

Zodra alles is ingesteld:

* Wordt de checkout geblokkeerd tenzij er minstens één niet-upsell-product in de winkelwagen zit
* Informeert een bericht klanten waarom de checkout is uitgeschakeld
* Voelt de ervaring soepel en passend bij je merk

Dit is vooral handig voor: het combineren van effectieve upsell-strategieën met deze technieken verbetert ook de algehele winkelervaring van de klant door onnodige conflicten in het aankoopproces te elimineren.

* Het voorkomen van onbedoelde aankopen van losse upsell-artikelen
* Upsells behouden als producten die alleen als add-on verkrijgbaar zijn
* Zorgen voor betere controle over AOV en productbundeling

<div id="still-need-help">
  ## Nog steeds hulp nodig?
</div>

Als je hulp nodig hebt bij aanpassingen, raden we aan om een Shopify Expert te raadplegen over het toevoegen van HTML, CSS en zelfs JavaScript aan je cart drawer.

[Bekijk Shopify Experts](https://www.shopify.com/partners/directory)