Aperçu

Si vous n’offrez des récompenses que dans certaines régions, vous pouvez masquer la barre de récompenses pour les clients de pays spécifiques à l’aide d’une combinaison de JavaScript et de CSS. Cela permet de garder votre panier épuré et pertinent pour les acheteurs en fonction de l’endroit d’où ils naviguent. Remarque : Même lorsqu’elle est masquée, la logique des récompenses continue de s’exécuter en arrière-plan. Par exemple, un cadeau gratuit peut toujours être ajouté au panier si les conditions sont remplies, même si la barre n’est pas visible.

Étape 1 : Trouver vos codes pays cibles

Vous devez définir quels pays doivent voir la barre de récompenses. Pour trouver les codes, consultez la liste Shopify des codes pays ISO à 2 lettres. Exemples :

US → États-Unis
CA → Canada
MX → Mexique

Étape 2 : Ajouter le HTML personnalisé

Allez dans Upcart > Cart Editor > Settings > Custom HTML
Collez le code suivant dans les deux emplacements suivants :
- Above announcements/rewards
- On empty cart

Remplacez "US" par le ou les codes pays souhaité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>

Note héritée : les rappels window.upcartOnCartOpened et window.upcartOnCartLoaded fonctionnent toujours mais sont obsolètes et génèrent des avertissements dans la console. Utilisez upcartSubscribeCartOpened et upcartSubscribeCartLoaded pour tous les nouveaux scripts.

Code alternatif pour la version Rewards V2.0

Si vous avez mis à niveau vos récompenses vers la version V2, le code est légèrement différent, car le sélecteur des récompenses est remplacé par le nouveau sélecteur .upcart-public-rewards. Utilisez le code ci-dessous si vous avez mis à niveau votre module de récompenses par paliers

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

Pour prendre en charge plusieurs pays, ajustez la condition comme ceci :

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

Étape 3 : Ajouter le CSS personnalisé

Allez dans Upcart > Cart Editor > Settings > Custom CSS
Collez ce code pour contrôler la visibilité :

.hide {  
  display: none;   
}

Résultat final

Les clients des pays exclus ne verront pas la barre de récompenses dans leur panier, même si la logique des récompenses continue de fonctionner en arrière-plan. Utilisez cette méthode si :

Vous n’offrez des récompenses que sur certains marchés
Vous souhaitez éviter d’afficher des promotions non applicables
Vous avez besoin d’une solution de contournement à court terme avant de mettre en place une véritable logique régionale

Besoin d’aide ?

Pour une logique régionale avancée ou une assistance JavaScript, nous vous recommandons de travailler avec un Shopify Expert. L’assistance Upcart ne fournit pas d’aide pour l’écriture ou le dépannage de code personnalisé. Voir les Shopify Experts

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Masquer la barre de récompenses pour des pays spécifiques

Aperçu

Étape 1 : Trouver vos codes pays cibles

Étape 2 : Ajouter le HTML personnalisé

Code alternatif pour la version Rewards V2.0

Étape 3 : Ajouter le CSS personnalisé

Résultat final

Besoin d’aide ?

​Aperçu

​Étape 1 : Trouver vos codes pays cibles

​Étape 2 : Ajouter le HTML personnalisé

​Code alternatif pour la version Rewards V2.0

​Étape 3 : Ajouter le CSS personnalisé

​Résultat final

​Besoin d’aide ?

Aperçu

Étape 1 : Trouver vos codes pays cibles

Étape 2 : Ajouter le HTML personnalisé

Code alternatif pour la version Rewards V2.0

Étape 3 : Ajouter le CSS personnalisé

Résultat final

Besoin d’aide ?