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

# Bestimmte Warenkorbelemente mit Produkt-IDs ausblenden

> Verwende Produkt-IDs, um die Rewards-Leiste oder andere Warenkorbelemente abhängig vom Warenkorbinhalt bedingt auszublenden.

⚠️ **Wichtiger Hinweis**

Diese Anpassung funktioniert nur mit Version 1 der Upcart-Warenkorbmodule. Wenn du deinen Warenkorb kürzlich auf Version 2 aktualisiert hast, funktionieren diese Anpassungen möglicherweise nicht. Du musst die neuen Selektoren für Version 2 aus dem [Migrationsleitfaden](/de/upcart/upcart_v20_migration_guide) verwenden.

Wenn deine Anpassungen nicht wie erwartet funktionieren, kannst du den Warenkorb selbst auf Version 1 zurücksetzen: Verwende im Cart Editor das Dropdown **Cart version** oben im linken Menü und wähle **V1.0 (Legacy)**. Das Dropdown erscheint, sobald jedes Modul im Warenkorb auf V2 ist.

Wir arbeiten derzeit an neuen Anpassungsvorlagen für Version 2 der Module, die bald verfügbar sein werden.

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

Mit dieser Anpassung kannst du bestimmte Teile des Warenkorbs ausblenden, zum Beispiel die Rewards-Leiste, wenn bestimmte Produkte vorhanden sind. Das ist nützlich, wenn du das Warenkorb-Erlebnis für bestimmte SKUs vereinfachen oder verhindern möchtest, dass bestimmte Aktionen neben bestimmten Artikeln erscheinen.

Diese Einrichtung verwendet Produkt-IDs, um zu erkennen, welche Produkte sich im Warenkorb befinden, und blendet ein ausgewähltes Element aus, wenn eine Übereinstimmung gefunden wird. Du wendest die Logik mit benutzerdefiniertem HTML und CSS im Upcart-Editor an.

***

<div id="when-to-use-this">
  ## Wann du das verwenden solltest
</div>

* Die Rewards-Leiste ausblenden, wenn sich Aktionsartikel im Warenkorb befinden
* Benutzerdefinierte Inhaltsblöcke, Trust-Badges oder Upsell-Bereiche abhängig vom Produkttyp ausblenden
* Einen saubereren oder besser zugeschnittenen Checkout-Ablauf für bestimmte Artikel bieten

Dieser Ansatz erfordert Grundkenntnisse in HTML und JavaScript.

***

<div id="step-1-find-the-product-ids">
  ## Schritt 1: Finde die Produkt-IDs
</div>

1. Gehe zu **Shopify-Adminbereich > Produkte**
2. Klicke auf das Produkt, das du ansprechen möchtest
3. Kopiere die numerische Produkt-ID aus der URL nach `/products/`

**Beispiel:**

```
/products/1234567890 → 1234567890
```

Diese IDs verwendest du im JavaScript-Array, das die Sichtbarkeit steuert.

***

<div id="step-2-add-custom-html">
  ## Schritt 2: Füge benutzerdefiniertes HTML hinzu
</div>

1. Gehe zu **Upcart > Cart Editor > Settings > Custom HTML**
2. Füge den folgenden Code in **beide** HTML-Positionen **Above announcements/rewards** und **On empty cart screen** ein
3. Ersetze die Werte in `productIDsToExclude` durch deine Produkt-IDs
4. Passe `.YOUR-CLASS-HERE` an, um das Warenkorbelement anzusprechen, das du ausblenden möchtest (zum Beispiel: `.upcart-rewards`, `.custom-message`, `.trust-badge`)

```
<script>  
  window.upcartSubscribeCartLoaded((event) => {  
    const items = event.cart.items;  
    const productIDsToExclude = [  
      6958755512411,  
      6958755610712,  
      7736708759774  
    ];  
  
    let cartContainsExcludedItem = false;  
  
    items.forEach((item) => {  
      productIDsToExclude.forEach((id) => {  
        if (item.productId === id) {  
          cartContainsExcludedItem = true;  
        }  
      });  
    });  
  
    const targetElement = window.upcartDocumentOrShadowRoot.querySelector(".YOUR-CLASS-HERE");  
    if (targetElement) {  
      targetElement.style.display = cartContainsExcludedItem ? "none" : "block";  
    }  
  });  
</script>
```

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

***

<div id="step-3-optional-fallback-css">
  ## Schritt 3: Optionales Fallback-CSS
</div>

Wenn du sicherstellen möchtest, dass das Element ausgeblendet ist, bevor der Warenkorb vollständig geladen wird, füge dies im Bereich **Custom CSS** hinzu:

```
.YOUR-CLASS-HERE {   display: none; }
```

**Hinweis:** Das kann das Element vorübergehend für alle Nutzerinnen und Nutzer ausblenden, bis das JavaScript ausgeführt wird, was zu Flackern führen kann. In den meisten Fällen ist es besser, sich auf die JavaScript-Methode zu verlassen.

***

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

Nach der Einrichtung:

* Das angesprochene Warenkorbelement (zum Beispiel die Rewards-Leiste) wird ausgeblendet, wenn der Warenkorb eines der angegebenen Produkte enthält
* Andernfalls bleibt das Element sichtbar
* Du kannst diese Logik wiederverwenden, um verschiedene Elemente basierend auf produktspezifischen Regeln aus- oder einzublenden

***

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

Für komplexere Anpassungen empfehlen wir die Zusammenarbeit mit einem **Shopify-Experten**. Diese können bei HTML, CSS und JavaScript in deinem Cart Drawer helfen.

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