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

# Reine Upsell-Käufe im Warenkorb verhindern

> Verlange von Kunden, mindestens ein reguläres Produkt hinzuzufügen, bevor sie zur Kasse gehen.

<div id="overview">
  # **Überblick**
</div>

Diese Anpassung verwendet HTML, CSS und JavaScript, um den Checkout zu blockieren, wenn der Warenkorb nur Upsell-Artikel enthält. Sie hilft sicherzustellen, dass Upsells als sekundäre Angebote und nicht als eigenständige Käufe behandelt werden, und unterstützt so eine kontrolliertere und gezieltere Upsell-Strategie.

Das stellt sicher, dass Upsell-Produkte innerhalb bestimmter Grenzen funktionieren und ihre Rolle als ergänzende Artikel zu Hauptprodukten betont wird.

Nach der Implementierung wird die **Checkout-Schaltfläche deaktiviert**, bis mindestens ein Nicht-Upsell-Produkt zum Warenkorb hinzugefügt wird.

<div id="how-it-works">
  ## So funktioniert es
</div>

* Wenn der Warenkorb nur Upsell-Artikel enthält, wird die Checkout-Schaltfläche ausgegraut
* Unter der Schaltfläche erscheint eine Warnmeldung
* Sobald ein reguläres Produkt hinzugefügt wird, wird die Schaltfläche aktiv und die Warnung verschwindet – Bietet eine klare Validierung für Szenarien, in denen sichergestellt werden soll, dass Upsell-Produkte nur mit den zugehörigen Trigger-Produkten gekauft werden, z. B. durch gezielte Warnmeldungen.

Diese Einrichtung ist ideal für Store-Betreiber oder Entwickler mit Grundkenntnissen in JavaScript und CSS.

<div id="step-1-add-custom-html">
  ## Schritt 1: Benutzerdefiniertes HTML hinzufügen
</div>

Gehe zu:\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## Füge im Abschnitt **Above announcements/rewards** Folgendes ein:
</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>
  **Hinweis zur Legacy-API:** `window.upcartOnCartLoaded`-Callbacks funktionieren noch, sind aber veraltet und erzeugen Konsolenwarnungen. Verwende `upcartSubscribeCartLoaded` für alle neuen Skripte.
</Note>

<div id="in-the-below-checkout-button-section-paste">
  ## Füge im Abschnitt **Below checkout button** Folgendes ein:
</div>

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

Du kannst den Wortlaut der Warnmeldung gerne an den Ton deiner Marke anpassen.

<div id="step-2-add-custom-css">
  ## Schritt 2: Benutzerdefiniertes CSS hinzufügen
</div>

Gehe zu:\
**Upcart > Cart Editor > Settings > Custom CSS**

Füge den folgenden Code ein:

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

Das stylt die Warnmeldung und deaktiviert die Checkout-Schaltfläche visuell und funktional.

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

Nach der Einrichtung:

* Der Checkout ist blockiert, solange sich nicht mindestens ein Nicht-Upsell-Produkt im Warenkorb befindet
* Eine Meldung informiert Kunden, warum der Checkout deaktiviert ist
* Das Erlebnis fühlt sich reibungslos und markenkonform an

Das ist besonders hilfreich für: Die Kombination effektiver Upsell-Strategien mit diesen Techniken verbessert außerdem das gesamte Einkaufserlebnis der Kunden, indem unnötige Konflikte im Kaufprozess beseitigt werden.

* Verhindern versehentlicher Einzelkäufe von Upsell-Artikeln
* Beibehalten von Upsells als reine Zusatzprodukte
* Bessere Kontrolle über AOV und Produkt-Bundling

<div id="still-need-help">
  ## Brauchst du weitere Hilfe?
</div>

Wenn du Unterstützung bei Anpassungen brauchst, empfehlen wir dir, einen Shopify-Experten zum Hinzufügen von HTML, CSS und sogar JavaScript zu deinem Cart Drawer zu konsultieren.

[Shopify-Experten ansehen](https://www.shopify.com/partners/directory)