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

# Specifieke cartelementen verbergen met product-ID's

> Gebruik product-ID's om de rewards bar of andere cartelementen voorwaardelijk te verbergen op basis van wat er in de winkelwagen zit.

⚠️ **Belangrijke mededeling**

Deze aanpassing werkt alleen met Versie 1 van de Upcart-cartmodules. Als je je winkelwagen onlangs hebt geüpgraded naar Versie 2, werken deze aanpassingen mogelijk niet. Je moet dan de nieuwe selectors voor Versie 2 gebruiken uit de [migratiegids.](/nl/upcart/upcart_v20_migration_guide)

Als je aanpassingen niet werken zoals verwacht, kun je de winkelwagen zelf terugzetten naar Versie 1: gebruik in de Cart Editor de dropdown **Cart version** bovenaan het linkermenu en kies **V1.0 (Legacy)**. De dropdown verschijnt zodra elke module in de winkelwagen op V2 staat.

We werken momenteel aan nieuwe aanpassingstemplates voor Versie 2 van de modules; deze zijn binnenkort beschikbaar.

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

Met deze aanpassing kun je specifieke delen van de winkelwagen verbergen, zoals de rewards bar, als bepaalde producten aanwezig zijn. Dit is handig wanneer je de cartervaring voor bepaalde SKU's wilt vereenvoudigen of wilt voorkomen dat specifieke promoties naast bepaalde artikelen verschijnen.

Deze opzet gebruikt product-ID's om te detecteren welke producten in de winkelwagen zitten en verbergt een gekozen element als er een match wordt gevonden. Je past de logica toe met aangepaste HTML en CSS in de Upcart-editor.

***

<div id="when-to-use-this">
  ## Wanneer gebruik je dit
</div>

* De rewards bar verbergen wanneer er promotieartikelen in de winkelwagen zitten
* Aangepaste contentblokken, vertrouwensbadges of upsell-secties verbergen op basis van producttype
* Een schonere of meer op maat gemaakte checkoutflow behouden voor specifieke artikelen

Deze aanpak vereist basiskennis van HTML en JavaScript.

***

<div id="step-1-find-the-product-ids">
  ## Stap 1: Vind de product-ID's
</div>

1. Ga naar **Shopify Admin > Products**
2. Klik op het product dat je wilt targeten
3. Kopieer de numerieke product-ID uit de URL na `/products/`

**Voorbeeld:**

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

Je gebruikt deze ID's in de JavaScript-array die de zichtbaarheid bepaalt.

***

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

1. Ga naar **Upcart > Cart Editor > Settings > Custom HTML**
2. Plak de volgende code in **beide** HTML-locaties: **Above announcements/rewards** en **On empty cart screen**
3. Vervang de waarden in `productIDsToExclude` door je eigen product-ID's
4. Werk `.YOUR-CLASS-HERE` bij zodat deze het cartelement targt dat je wilt verbergen (bijvoorbeeld: `.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-opmerking:** `window.upcartOnCartLoaded`-callbacks werken nog steeds, maar zijn verouderd en loggen consolewaarschuwingen. Gebruik `upcartSubscribeCartLoaded` voor alle nieuwe scripts.
</Note>

***

<div id="step-3-optional-fallback-css">
  ## Stap 3: Optionele fallback-CSS
</div>

Als je er zeker van wilt zijn dat het element verborgen is voordat de winkelwagen volledig is geladen, voeg dan dit toe in de sectie **Custom CSS**:

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

**Let op:** dit kan het element tijdelijk voor alle gebruikers verbergen totdat JavaScript wordt uitgevoerd, wat flikkering kan veroorzaken. In de meeste gevallen is het beter om op de JavaScript-methode te vertrouwen.

***

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

Zodra alles is ingesteld:

* Het getargete cartelement (zoals de rewards bar) wordt verborgen als de winkelwagen een van de opgegeven producten bevat
* Het element blijft anders zichtbaar
* Je kunt deze logica hergebruiken om verschillende elementen te verbergen of te tonen op basis van productspecifieke regels

***

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

Voor complexere aanpassingen raden we aan om samen te werken met een **Shopify Expert**. Zij kunnen helpen met HTML, CSS en JavaScript in je cart drawer.

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