Overzicht

Als je alleen in bepaalde regio’s beloningen aanbiedt, kun je de rewards bar verbergen voor klanten in specifieke landen met een combinatie van JavaScript en CSS. Zo blijft je winkelwagen schoon en relevant voor shoppers, afhankelijk van waar ze vandaan browsen. Let op: Zelfs wanneer de bar verborgen is, draait de beloningslogica nog steeds op de achtergrond. Een gratis geschenk kan bijvoorbeeld nog steeds aan de winkelwagen worden toegevoegd als aan de voorwaarden wordt voldaan, ook al is de bar niet zichtbaar.

Stap 1: Vind de landcodes van je doelmarkten

Je moet definiëren welke landen de rewards bar te zien krijgen. Raadpleeg voor de codes de lijst van Shopify met ISO-landcodes van 2 letters. Voorbeelden:

US → Verenigde Staten
CA → Canada
MX → Mexico

Stap 2: Voeg aangepaste HTML toe

Ga naar Upcart > Cart Editor > Settings > Custom HTML
Plak de volgende code in beide locaties:
- Above announcements/rewards
- On empty cart

Vervang "US" door de gewenste landcode(s).

<script>  
  function hideRewards() {  
    let rewardsBar = window.upcartDocumentOrShadowRoot.querySelector(".upcart-rewards");  
    let country = window.Shopify.country;  
  
    if (country.includes("US")) {  
      rewardsBar.classList.remove("hide");  
      return;  
    }  
  
    rewardsBar.classList.add("hide");  
  }  
  
  window.upcartSubscribeCartOpened(() => setTimeout(hideRewards, 300));  
  window.upcartSubscribeCartLoaded(hideRewards);  
</script>

Legacy-opmerking: window.upcartOnCartOpened- en window.upcartOnCartLoaded-callbacks werken nog steeds, maar zijn verouderd en loggen consolewaarschuwingen. Gebruik upcartSubscribeCartOpened en upcartSubscribeCartLoaded voor alle nieuwe scripts.

Alternatieve code voor de Rewards V2.0-versie

Als je je beloningen hebt geüpgraded naar de V2-versie, is de code net iets anders: de rewards-selector is vervangen door de nieuwe selector .upcart-public-rewards. Gebruik de onderstaande code als je je module voor gestaffelde beloningen hebt geüpgraded

<script>  
  function hideRewards() {  
    let rewardsBar = window.upcartDocumentOrShadowRoot.querySelector(".upcart-public-rewards");  
    let country = window.Shopify.country;  
  
    if (country.includes("US")) {  
      rewardsBar.classList.remove("hide");  
      return;  
    }  
  
    rewardsBar.classList.add("hide");  
  }  
  
  window.upcartSubscribeCartOpened(() => setTimeout(hideRewards, 300));  
  window.upcartSubscribeCartLoaded(hideRewards);  
</script>

Pas de voorwaarde als volgt aan om meerdere landen te ondersteunen:

if (["US", "CA", "GB"].includes(country)) {

Stap 3: Voeg aangepaste CSS toe

Ga naar Upcart > Cart Editor > Settings > Custom CSS
Plak deze code om de zichtbaarheid te regelen:

.hide {  
  display: none;   
}

Eindresultaat

Klanten uit uitgesloten landen zien de rewards bar niet in hun winkelwagen, ook al blijft de beloningslogica op de achtergrond werken. Gebruik deze methode als:

Je alleen in bepaalde markten beloningen aanbiedt
Je wilt voorkomen dat niet-toepasselijke promoties worden weergegeven
Je een tijdelijke workaround nodig hebt voordat je echte regiogebaseerde logica opzet

Hulp nodig?

Voor geavanceerde regionale logica of JavaScript-ondersteuning raden we aan om samen te werken met een Shopify Expert. Upcart-support helpt niet bij het schrijven of oplossen van problemen met aangepaste code. Bekijk Shopify Experts

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

De rewards bar verbergen voor specifieke landen

Overzicht

Stap 1: Vind de landcodes van je doelmarkten

Stap 2: Voeg aangepaste HTML toe

Alternatieve code voor de Rewards V2.0-versie

Stap 3: Voeg aangepaste CSS toe

Eindresultaat

Hulp nodig?

​Overzicht

​Stap 1: Vind de landcodes van je doelmarkten

​Stap 2: Voeg aangepaste HTML toe

​Alternatieve code voor de Rewards V2.0-versie

​Stap 3: Voeg aangepaste CSS toe

​Eindresultaat

​Hulp nodig?

Overzicht

Stap 1: Vind de landcodes van je doelmarkten

Stap 2: Voeg aangepaste HTML toe

Alternatieve code voor de Rewards V2.0-versie

Stap 3: Voeg aangepaste CSS toe

Eindresultaat

Hulp nodig?