⚠️ Vigtig meddelelse Denne tilpasning virker kun med Version 1 af Upcarts kurvmoduler. Hvis du for nylig har opgraderet din kurv til Version 2, virker disse tilpasninger muligvis ikke. Du skal bruge de nye selektorer til Version 2, som findes i migrationsguiden. Hvis dine tilpasninger ikke virker som forventet, kan du selv rulle kurven tilbage til Version 1: I Cart Editor skal du bruge dropdown-menuen Cart version øverst i menuen til venstre og vælge V1.0 (Legacy). Dropdown-menuen vises, når alle moduler i kurven er på V2. Vi arbejder i øjeblikket på nye tilpasningsskabeloner til Version 2 af modulerne, og de vil snart være tilgængelige.

Oversigt

Denne tilpasning giver dig mulighed for at skjule specifikke dele af kurven, såsom belønningsbjælken, hvis bestemte produkter er til stede. Den er nyttig, når du vil forenkle kurvoplevelsen for bestemte SKU’er eller forhindre, at specifikke kampagner vises sammen med bestemte varer. Denne opsætning bruger produkt-ID’er til at registrere, hvilke produkter der er i kurven, og skjuler et valgt element, hvis der findes et match. Du anvender logikken ved hjælp af brugerdefineret HTML og CSS i Upcart-editoren.

Hvornår du skal bruge dette

Skjul belønningsbjælken, når kampagnevarer er i kurven
Skjul brugerdefinerede indholdsblokke, tillidsbadges eller upsell-sektioner baseret på produkttype
Bevar et renere eller mere skræddersyet checkout-flow for specifikke varer

Denne tilgang kræver grundlæggende kendskab til HTML og JavaScript.

Trin 1: Find produkt-ID’erne

Gå til Shopify Admin > Products
Klik på det produkt, du vil målrette
Kopiér det numeriske produkt-ID fra URL’en efter /products/

Eksempel:

/products/1234567890 → 1234567890

Du skal bruge disse ID’er i det JavaScript-array, der styrer synligheden.

Trin 2: Tilføj brugerdefineret HTML

Gå til Upcart > Cart Editor > Settings > Custom HTML
Indsæt følgende kode i begge HTML-placeringerne Above announcements/rewards og On empty cart screen
Erstat værdierne i productIDsToExclude med dine produkt-ID’er
Opdater .YOUR-CLASS-HERE, så den peger på det kurvelement, du vil skjule (for eksempel: .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>

Bemærkning om ældre version: window.upcartOnCartLoaded-callbacks virker stadig, men er forældede og logger konsoladvarsler. Brug upcartSubscribeCartLoaded til alle nye scripts.

Trin 3: Valgfri fallback-CSS

Hvis du vil sikre, at elementet er skjult, før kurven er helt indlæst, kan du tilføje dette i sektionen Custom CSS:

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

Bemærk: Dette kan midlertidigt skjule elementet for alle brugere, indtil JavaScript kører, hvilket kan give flimren. I de fleste tilfælde er det bedre at holde sig til JavaScript-metoden.

Slutresultat

Når opsætningen er klar:

Det målrettede kurvelement (såsom belønningsbjælken) skjules, hvis kurven indeholder et af de angivne produkter
Elementet forbliver synligt ellers
Du kan genbruge denne logik til at skjule eller vise forskellige elementer baseret på produktspecifikke regler

Har du stadig brug for hjælp?

Til mere komplekse tilpasninger anbefaler vi at samarbejde med en Shopify Expert. De kan hjælpe med HTML, CSS og JavaScript i din cart drawer. Se Shopify Experts

Reference for kurvfunktioner

CSS-reference

Stylingopskrifter

Funktionalitetsopskrifter

Tilpassede skabeloner

Upcarts offentlige API

Skjul specifikke kurvelementer ved hjælp af produkt-ID'er

Oversigt

Hvornår du skal bruge dette

Trin 1: Find produkt-ID’erne

Trin 2: Tilføj brugerdefineret HTML

Trin 3: Valgfri fallback-CSS

Slutresultat

Har du stadig brug for hjælp?

​Oversigt

​Hvornår du skal bruge dette

​Trin 1: Find produkt-ID’erne

​Trin 2: Tilføj brugerdefineret HTML

​Trin 3: Valgfri fallback-CSS

​Slutresultat

​Har du stadig brug for hjælp?

Oversigt

Hvornår du skal bruge dette

Trin 1: Find produkt-ID’erne

Trin 2: Tilføj brugerdefineret HTML

Trin 3: Valgfri fallback-CSS

Slutresultat

Har du stadig brug for hjælp?