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

# Den Warenkorb auf jeweils einen Upsell beschränken

> Verwende benutzerdefiniertes HTML, um das Upsell-Modul auszublenden, nachdem ein einzelner Upsell zum Warenkorb hinzugefügt wurde.

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

Diese Anpassung verhindert, dass mehrere Upsells gleichzeitig hinzugefügt werden, indem der Upsell-Bereich ausgeblendet wird, sobald ein Upsell angenommen wurde. Sobald der Upsell entfernt wird, erscheint das Modul wieder.

Das ist nützlich, wenn du:

* das Warenkorb-Erlebnis vereinfachen möchtest
* Entscheidungsmüdigkeit reduzieren möchtest
* die Exklusivität bestimmter Angebote wahren möchtest

***

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

* Wenn ein Kunde einen Upsell annimmt, wird der Upsell-Bereich ausgeblendet
* Wenn der Upsell-Artikel entfernt wird, wird der Upsell-Bereich wieder sichtbar
* Funktioniert sowohl mit KI-empfohlenen als auch mit manuellen Upsells

***

<div id="where-to-add-the-code">
  ## Wo du den Code hinzufügst
</div>

1. Gehe zu **Upcart > Cart Editor > Settings > Custom HTML**

<Warning>
  **Der Selektor unten gilt nur für Version 1.** `.upcart-upsells-module` befindet sich auf dem V1-Upsell-Karussell. Wenn dein Upsells-Modul auf **Version 2** läuft, ersetze ihn in allen drei Handlern durch `.upcart-public-upsell` — der Rest des Skripts bleibt unverändert. Siehe die [V2-CSS-Selektor-Bibliothek](/de/upcart/upcart_css_selector_library_v2).
</Warning>

2. Füge den folgenden Code an der Position **Above announcements/rewards** ein

***

<div id="html-script-to-copy">
  ## Zu kopierendes HTML-Skript
</div>

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

<Note>
  **Hinweis zur Legacy-API:** Die Callbacks `window.upcartOnItemRemoved`, `window.upcartOnAddUpsell` und `window.upcartOnCartLoaded` funktionieren noch, sind aber veraltet und erzeugen Konsolenwarnungen. Verwende `upcartSubscribeItemRemoved`, `upcartSubscribeUpsellsAddedToCart` und `upcartSubscribeCartLoaded` für alle neuen Skripte.
</Note>

***

<div id="result">
  ## Ergebnis
</div>

Sobald diese Anpassung hinzugefügt wurde:

* Kunden sehen Upsells nur, wenn sie noch keinen angenommen haben
* Das Upsell-Modul wird ausgeblendet, sobald ein Upsell hinzugefügt wird
* Das Modul erscheint automatisch wieder, wenn der Upsell-Artikel entfernt wird
* Keine Konfiguration von Produkt-IDs oder Tags erforderlich

So bleibt dein Upsell-Erlebnis fokussiert, übersichtlich und für Kunden leicht zugänglich.

***

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

Für fortgeschrittenere Anpassungen empfehlen wir die Zusammenarbeit mit einem **Shopify-Experten**. Er kann dir mit HTML, CSS und JavaScript in deinem Cart Drawer helfen.

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