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

# Masquer des éléments spécifiques du panier à l'aide des identifiants de produit

> Utilisez les identifiants de produit pour masquer de manière conditionnelle la barre de récompenses ou d'autres éléments du panier en fonction de son contenu.

⚠️ **Avis important**

Cette personnalisation fonctionne uniquement avec la version 1 des modules de panier Upcart. Si vous avez récemment mis à niveau votre panier vers la version 2, ces personnalisations peuvent ne pas fonctionner. Vous devrez utiliser les nouveaux sélecteurs fournis pour la version 2 dans le [guide de migration.](/fr/upcart/upcart_v20_migration_guide)

Si vos personnalisations ne fonctionnent pas comme prévu, vous pouvez revenir vous-même à la version 1 du panier : dans le Cart Editor, utilisez le menu déroulant **Cart version** en haut du menu de gauche et choisissez **V1.0 (Legacy)**. Le menu déroulant apparaît une fois que chaque module du panier est en V2.

Nous travaillons actuellement sur de nouveaux modèles de personnalisation pour la version 2 des modules, et ils seront bientôt disponibles.

<div id="overview">
  # Aperçu
</div>

Cette personnalisation vous permet de masquer des parties spécifiques du panier, comme la barre de récompenses, si certains produits sont présents. Elle est utile lorsque vous souhaitez simplifier l'expérience du panier pour certains SKU ou empêcher l'affichage de promotions spécifiques à côté de certains articles.

Cette configuration utilise les identifiants de produit pour détecter quels produits se trouvent dans le panier et masque un élément choisi si une correspondance est trouvée. Vous appliquerez cette logique à l'aide de HTML et CSS personnalisés dans l'éditeur Upcart.

***

<div id="when-to-use-this">
  ## Quand l'utiliser
</div>

* Masquer la barre de récompenses lorsque des articles promotionnels sont dans le panier
* Masquer des blocs de contenu personnalisés, des badges de confiance ou des sections d'upsell en fonction du type de produit
* Maintenir un parcours de paiement plus épuré ou plus adapté pour des articles spécifiques

Cette approche nécessite des connaissances de base en HTML et JavaScript.

***

<div id="step-1-find-the-product-ids">
  ## Étape 1 : Trouver les identifiants de produit
</div>

1. Allez dans **Shopify Admin > Products**
2. Cliquez sur le produit que vous souhaitez cibler
3. Copiez l'identifiant numérique du produit dans l'URL après `/products/`

**Exemple :**

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

Vous utiliserez ces identifiants dans le tableau JavaScript qui contrôle la visibilité.

***

<div id="step-2-add-custom-html">
  ## Étape 2 : Ajouter le HTML personnalisé
</div>

1. Allez dans **Upcart > Cart Editor > Settings > Custom HTML**
2. Collez le code suivant dans **les deux** emplacements HTML : **Above announcements/rewards** et **On empty cart screen**
3. Remplacez les valeurs dans `productIDsToExclude` par vos identifiants de produit
4. Modifiez `.YOUR-CLASS-HERE` pour cibler l'élément du panier que vous souhaitez masquer (par exemple : `.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>
  **Note héritée :** les rappels `window.upcartOnCartLoaded` fonctionnent toujours mais sont obsolètes et génèrent des avertissements dans la console. Utilisez `upcartSubscribeCartLoaded` pour tous les nouveaux scripts.
</Note>

***

<div id="step-3-optional-fallback-css">
  ## Étape 3 : CSS de secours facultatif
</div>

Si vous souhaitez vous assurer que l'élément est masqué avant le chargement complet du panier, ajoutez ceci dans la section **Custom CSS** :

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

**Remarque :** cela peut masquer temporairement l'élément pour tous les utilisateurs jusqu'à l'exécution du JavaScript, ce qui peut provoquer un scintillement. Dans la plupart des cas, il est préférable de s'appuyer sur la méthode JavaScript.

***

<div id="final-result">
  ## Résultat final
</div>

Une fois la configuration terminée :

* L'élément de panier ciblé (comme la barre de récompenses) sera masqué si le panier contient l'un des produits spécifiés
* L'élément reste visible dans le cas contraire
* Vous pouvez réutiliser cette logique pour masquer ou afficher différents éléments en fonction de règles spécifiques aux produits

***

<div id="still-need-help">
  ## Besoin d'aide supplémentaire ?
</div>

Pour des personnalisations plus complexes, nous vous recommandons de travailler avec un **Shopify Expert**. Il peut vous aider avec le HTML, le CSS et le JavaScript dans votre tiroir de panier.

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