``` `timer` * **Type** : `string` * **Description** : la valeur actuelle de la minuterie formatée sous forme de chaîne * **Utilisation** : afficher un compte à rebours dans des implémentations d'annonces personnalisées ```

Time remaining: {props.timer}

``` `shouldUseTimer` * **Type** : `boolean` * **Description** : indique si la fonctionnalité de minuterie est activée pour cette annonce * **Utilisation** : afficher conditionnellement le contenu et les contrôles liés à la minuterie ```

{props.shouldUseTimer && ( {props.timer} )}

``` `isTimerExpiredAndShouldHide` * **Type** : `boolean` * **Description** : indique si la minuterie a expiré et si l'annonce doit être masquée * **Utilisation** : contrôler la visibilité de l'ensemble de l'annonce en fonction de l'état de la minuterie ```

{!props.isTimerExpiredAndShouldHide && (

{props.timer}

)}

```

## Tiered Rewards

Le module Rewards vous permet de personnaliser l'affichage de la progression des récompenses avec votre propre design tout en conservant les fonctionnalités essentielles des récompenses comme le suivi des jalons, la visualisation de la progression et les messages de récompense.

### Props disponibles - **Modèle complet**

Barre de progression des récompenses à paliers avec des icônes de jalons pour la livraison gratuite et un produit

`rewardsMessageHtml` * **Type** : `string` * **Description** : le contenu HTML du message de récompenses * **Utilisation** : afficher le message de récompenses avec une mise en forme riche dans des implémentations personnalisées ```

``` `milestonesCompleted` * **Type** : `number` * **Description** : le nombre de jalons atteints * **Utilisation** : afficher le nombre de jalons atteints ou calculer le pourcentage d'achèvement ```

{Math.round((props.milestonesCompleted / props.milestonesData.milestonesToRender.length) * 100)}% Complete

``` `milestonesData` * Type : ``` { milestonesToRender: { id: string; label: string; icon: React.ReactElement; isCompleted: boolean; positionPercent: number; }[]; progressPercent: number; showMilestones: boolean; settings: { iconContainerSize: string; iconAlignment: string; labelAlignment: string; hideLabel: boolean; }; } ``` * **Description** : configuration complète des jalons et données de progression pour le système de récompenses * **Utilisation** : accéder aux informations des jalons, au pourcentage de progression et aux paramètres d'affichage * **Propriétés** : * `milestonesToRender` : tableau d'objets de jalons avec statut d'achèvement et positionnement * `progressPercent` : progression actuelle en pourcentage (0-100) * `showMilestones` : indique si les marqueurs de jalons doivent être affichés * `settings` : configuration visuelle de l'affichage des jalons

## Discounts

Le module Discounts prend en charge les modèles personnalisés afin que vous puissiez concevoir votre propre affichage tout en conservant les fonctionnalités essentielles comme la gestion des règles, la visibilité des sections et la présentation des récompenses. L'identifiant interne du type de module pour les modèles personnalisés est `TRIGGERED_REWARDS` pour assurer la rétrocompatibilité avec le code de modèles personnalisés existant.

### **Props disponibles - Modèle complet**

`rules` * **Type** : ``` { id: string; title: string; description: string; conditionsMet: boolean; }[] ``` * **Description** : tableau des règles de remise actuellement activées * **Utilisation** : afficher les récompenses disponibles, leurs titres, descriptions et si les conditions de chaque règle sont remplies * **Propriétés** : * `id` : identifiant unique de la règle de récompense * `title` : titre de la règle de remise * `description` : description de la règle de récompense * `conditionsMet` : indique si les conditions de la règle sont actuellement satisfaites par le panier. Utilisez cette propriété pour construire des interfaces de type « vous avez débloqué X » ou « dépensez Y \$ de plus pour débloquer X » ```

{props.rules.map((rule) => (

{rule.title}

{rule.conditionsMet ? "Reward unlocked!" : rule.description}

))}

``` `showSection` * **Type** : `boolean` * **Description** : indique si la section Discounts doit être affichée * **Utilisation** : contrôler la visibilité de l'ensemble du module Discounts ```

{props.showSection && (

Available Rewards...

)}

``` `onToggleSection` * **Type** : `() => void` * **Description** : une fonction de rappel qui bascule l'état de visibilité de la section Discounts * **Utilisation** : à attacher à des boutons ou éléments interactifs pour permettre aux utilisateurs d'afficher/masquer la section des récompenses ``` ```

## Recommendations

Le module Recommendation vous permet de personnaliser l'affichage des produits d'upsell avec votre propre design tout en conservant les fonctionnalités e-commerce essentielles comme la sélection de variantes, les actions d'ajout au panier et l'affichage des informations produit.

### **Props disponibles - Modèle de tuile de recommandation**

Tuile de recommandation montrant un produit snowboard avec prix et bouton Add

*Le modèle de tuile de recommandation partage la [même interface de props que le modèle de tuile d'upsell](#available-props-upsell-tile-template) du module Upsells. Toutes les props disponibles, leurs types et des exemples d'utilisation sont documentés dans la section du module Upsells ci-dessous.*

## Cart Items

Le module Cart Items vous permet de personnaliser l'affichage des articles du panier avec votre propre design tout en conservant les fonctionnalités e-commerce essentielles. Ce module fournit plusieurs types de modèles, chacun avec ses propres props spécifiques pour différents aspects de l'affichage des articles du panier. **Afficher un indicateur de chargement pendant l'ajout au panier ou les mises à jour du panier :** le module Cart Items standard n'expose pas de spinner « ajout au panier » intégré. Si vous souhaitez afficher un état de chargement pendant qu'un article est ajouté ou qu'une opération de panier est en cours, utilisez le modèle Product tile et lisez les props `isLoading` et `loadingOperation` (documentées ci-dessous) pour afficher conditionnellement un spinner ou une superposition. Les modèles personnalisés nécessitent une expérience de développement — voir l'avis en haut de cette page.

### **Props disponibles - Modèle Product tile**

**Remarque :** activer le modèle *Product Tile* remplacera tous les autres modèles de ce module, y compris **Variant template**, **Properties template**, **Bundle template** et **Price template**.\ Si vous souhaitez utiliser du code personnalisé dans l'un de ces modèles, vous ***devez*** *désactiver le modèle Product Tile.* Tuile de produit du panier avec image, variante, prix soldé, sélecteur de quantité et bouton d'abonnement

Tuile de produit du panier avec image, variante, prix soldé, sélecteur de quantité et bouton d'abonnement

`title` * **Type** : `string` * **Description** : le titre/nom du produit * **Utilisation** : afficher le nom principal du produit dans les articles du panier `variant` * **Type** : `React.ReactNode` * **Description** : composant pré-rendu des informations de variante * **Utilisation** : afficher les détails de la variante sous forme de composant React `properties` * **Type** : `React.ReactNode` * **Description** : composant pré-rendu des propriétés du produit * **Utilisation** : afficher les propriétés du produit et les informations d'abonnement sous forme de composant React `bundle` * **Type** : `React.ReactNode` * **Description** : composant pré-rendu des détails du bundle * **Utilisation** : afficher les informations du bundle sous forme de composant React `compareAtPrice` * **Type** : `string | undefined` * **Description** : prix de comparaison formaté (prix d'origine) * **Utilisation** : afficher le prix d'origine des articles en promotion `price` * **Type** : `string` * **Description** : prix actuel formaté * **Utilisation** : afficher le prix actuel de l'article `savings` * **Type** : `string | undefined` * **Description** : montant des économies formaté * **Utilisation** : afficher le montant économisé par le client `imageUrl` * **Type** : `string | undefined` * **Description** : URL de l'image du produit * **Utilisation** : afficher l'image du produit `productUrl` * **Type** : `string | undefined` * **Description** : URL de la page produit * **Utilisation** : lien vers la page de détail du produit `quantity` * **Type** : `number` * **Description** : quantité actuelle de l'article dans le panier * **Utilisation** : afficher et gérer la quantité de l'article `showQuantitySelector` * **Type** : `boolean` * **Description** : indique s'il faut afficher les contrôles de quantité * **Utilisation** : afficher conditionnellement le sélecteur de quantité `discountCodes` * **Type** : `string[] | undefined` * **Description** : tableau des codes de remise appliqués à cet article * **Utilisation** : afficher les remises spécifiques à l'article `subscription` * **Type** : ``` { subscriptionUpgradeData: { buttonText: string; defaultSellingPlanId: number; } | null; sellingPlansData: { sellingPlanGroups: { name: string; selling_plans: { id: number; name: string; }[]; }[] | null; activeSellingPlanId: string; oneTimePurchaseText: string | null; } | null; upgradeSellingPlan: (item: CartItem, sellingPlanId: number) => void; changeSellingPlan: (item: CartItem, value: string) => void; getSellingPlanGroupText: (groupName: string, planName: string) => string; } ``` * **Description** : objet complet de gestion des abonnements avec les données de mise à niveau, les plans de vente et les fonctions de gestion * **Utilisation** : gérer la fonctionnalité d'abonnement * L'objet subscription contient : * **subscriptionUpgradeData** : informations de mise à niveau (null si aucune mise à niveau n'est disponible) * `buttonText` : texte du bouton de mise à niveau * `defaultSellingPlanId` : ID du plan de vente par défaut pour les mises à niveau * **sellingPlansData** : options de plans de vente disponibles (null si aucun plan) * `sellingPlanGroups` : tableau de groupes de plans avec leurs plans de vente * `activeSellingPlanId` : ID du plan de vente actuellement sélectionné * `oneTimePurchaseText` : texte de l'option d'achat unique (null si non disponible) * **upgradeSellingPlan** : fonction pour passer à un plan de vente spécifique * **changeSellingPlan** : fonction pour changer le plan de vente actuel * **getSellingPlanGroupText** : fonction utilitaire pour formater le texte d'affichage du plan de vente `onIncrease` * **Type** : `() => void` * **Description** : fonction pour augmenter la quantité de l'article * **Utilisation** : gérer les actions d'augmentation de quantité `onDecrease` * **Type** : `() => void` * **Description** : fonction pour diminuer la quantité de l'article * **Utilisation** : gérer les actions de diminution de quantité `onDeleteProduct` * **Type** : `() => void` * **Description** : fonction pour retirer l'article du panier * **Utilisation** : gérer la suppression d'articles `onQuantityChange` * **Type** : `(quantity: string) => void` * **Description** : fonction pour gérer la saisie directe de quantité * **Utilisation** : gérer les modifications manuelles de quantité `handleInputChange` * **Type** : `(e: React.ChangeEvent) => void` * **Description** : gestionnaire de changement de saisie pour le champ de quantité * **Utilisation** : gérer les modifications du champ de saisie de quantité `replaceItemWithVariant` * **Type** : `(variantId: string) => Promise<{ success: boolean }>` * **Description** : fonction pour remplacer l'article par une variante différente * **Utilisation** : gérer le changement de variante `isLoading` * **Type** : `boolean` * **Description** : état de chargement des opérations de panier * **Utilisation** : afficher des indicateurs de chargement `loadingOperation` * **Type** : `'increase' | 'decrease' | 'inputChange' | 'remove' | 'subscription' | undefined` * **Description** : opération spécifique en cours de chargement * **Utilisation** : afficher des états de chargement propres à chaque opération `setLoadingOperation` * **Type** : `(op: "increase" | "decrease" | "inputChange" | "remove" | "subscription" | undefined) => void` * **Description** : fonction pour définir l'état de l'opération en chargement * **Utilisation** : gérer les états de chargement des différentes opérations `rawItem` * **Type** : `CartItem` (voir le type `CartItem` [ci-dessous](#cartitem-object-properties)) * **Description** : données brutes de l'article du panier contenant toutes les informations

### **Props disponibles - Modèle Variant**

Ligne de variante d'un article du panier affichant la taille sélectionnée Medium

`item` * **Type** : `CartItem` (voir le type `CartItem` [ci-dessous](#cartitem-object-properties)) * **Description** : données brutes de l'article du panier contenant les informations de variante * **Utilisation** : accéder aux détails de la variante depuis l'article du panier

### **Props disponibles - Modèle Properties**

Ligne de propriété d'un article du panier affichant une note de message cadeau

`productProperties` * **Type** : `{ key: string; value: string; isUrl?: boolean; }[]` * **Description** : tableau des propriétés du produit (champs personnalisés, propriétés de ligne de commande) `subscriptionLabel` * **Type** : `string | undefined` * **Description** : libellé des informations d'abonnement

### **Props disponibles - Modèle Bundle**

Bundle déplié listant trois produits composants inclus avec leurs variantes

`getSizedImageUrl` * **Type** : `getSizedImageUrl: ({ src, width, height }: SizedImageParams) => string` * **Description** : fonction utilitaire pour obtenir des URL d'images correctement dimensionnées `item` * **Type** : ``` { itemComponents: { quantity: number; image: { url: string; height: number | null; width: number | null; alt: string; }; product: { title: string; has_only_default_variant: boolean; }; variantTitle: string; }[]; variantTitle: string | undefined; hasComponents: boolean; } ``` * **Description** : informations sur l'article du bundle, y compris ses composants. `itemComponents` est un tableau d'objets composants — parcourez-le avec map pour afficher chaque composant du bundle. `showDetailsText` * **Type** : `string | undefined` * **Description** : texte de l'action « afficher les détails » * **Utilisation** : afficher le texte du bouton de déploiement `hideDetailsText` * **Type** : `string | undefined` * **Description** : texte de l'action « masquer les détails » `isExpanded` * **Type** : `boolean` * **Description** : indique si les détails du bundle sont dépliés `toggleCollapsible` * **Type** : `() => void` * **Description** : fonction pour basculer la visibilité des détails du bundle * **Utilisation** : gérer les actions de dépliage/repliage `chevronDownIconComponent` * **Type** : `React.ReactElement` * **Description** : icône chevron pré-rendue pour le dépliage/repliage * **Utilisation** : afficher un indicateur de dépliage/repliage cohérent

### **Props disponibles - Modèle Price**

Prix du panier montrant le prix d'origine barré avec le prix soldé et les économies

`compareAtPrice` * **Type** : `string | undefined` * **Description** : prix de comparaison formaté (prix d'origine) * **Utilisation** : afficher le prix d'origine des articles en promotion `price` * **Type** : `string` * **Description** : prix actuel formaté * **Utilisation** : afficher le prix actuel de l'article `savings` * **Type** : `string | undefined` * **Description** : montant des économies formaté * **Utilisation** : afficher le montant économisé par le client

### **Propriétés de l'objet CartItem**

L'objet `CartItem` contient toutes les informations détaillées sur une ligne d'article du panier. Cet objet est disponible sous props.rawItem dans le modèle Product Tile et props.item dans le modèle Variant.

#### **Identification de base**

* `key (string)` - Identifiant unique de cet article du panier. * `id (number)` - ID de la variante (champ hérité, utilisez plutôt variant\_id) * `variant_id (number)` - L'ID de variante Shopify de cet article * `product_id (number)` - L'ID de produit Shopify * `lineIdxFrom1 (number)` - Index basé sur 1 de cet article dans le panier d'origine avant modifications

#### **Informations produit**

* `title (string)` - Le titre de la ligne d'article (généralement le titre de la variante) * `product_title (string)` - Le titre principal du produit * `handle (string)` - Handle d'URL du produit (par exemple, "camp-stool") * `vendor (string)` - Nom du fournisseur/de la marque du produit * `product_type (string)` - Catégorie/type du produit à des fins fiscales * `sku (string)` - Identifiant SKU (Stock Keeping Unit) * `product_description (string)` - Description complète du produit * `product_has_only_default_variant (boolean)` - Indique si le produit n'a qu'une seule variante

#### **Tarification (tous les prix en centimes)**

* `quantity (number)` - Nombre d'exemplaires de cet article dans le panier * `price (number)` - Prix unitaire avant remises * `original_price (number)` - Identique à price * `discounted_price (number)` - Prix unitaire après remises au niveau du produit * `compare_at_price (number | null)` - Prix de comparaison (prix conseillé). Remarque : ce champ est ajouté par Upcart, il n'est pas fourni par l'API de panier de Shopify * `final_line_price (number)` - Prix total après remises au niveau du produit (quantity × discounted\_price) * `original_line_price (number)` - Prix total avant remises (quantity × price) * `line_price (number)` - Prix total après toutes les remises * `final_price (number)` - **Obsolète** - Prix unitaire après remises produit (ne tient pas compte de la quantité) * `total_discount (number)` - Identique à line\_level\_total\_discount * `line_level_total_discount (number)` - Montant total de la remise appliquée à cette ligne d'article

#### **Médias et URL**

* `image (string)` - URL de l'image principale du produit * `url (string)` - Chemin d'URL relatif vers la page produit (par exemple, "/products/camp-stool?variant=42789611372803") * `featured_image (object | null)` - Détails de l'image mise en avant : * `alt (string)` - Texte alternatif de l'image * `aspect_ratio (number)` - Rapport d'aspect de l'image * `height (number)` - Hauteur de l'image en pixels * `url (string)` - URL de l'image * `width (number)` - Largeur de l'image en pixels

#### **Variantes et options**

* `variant_title (string | null)` - Titre de la variante (par exemple, "Large / Red") * `variant_options (string[])` - Tableau des valeurs d'options de la variante * `options_with_values (Array)` - Informations détaillées sur les options : * `name (string)` - Nom de l'option (par exemple, "Size") * `value (string)` - Valeur de l'option (par exemple, "Large") * `untranslated_product_title (string | undefined)` - Titre original du produit avant traduction (réponses de mutation du panier uniquement) * `untranslated_variant_title (string | undefined)` - Titre original de la variante avant traduction (réponses de mutation du panier uniquement)

#### **Propriétés personnalisées et métadonnées**

* `properties (Record | null)` - Propriétés de ligne d'article personnalisées, ou `null` lorsque la ligne n'en a aucune — vérifiez avant de lire une clé. Les propriétés dont les clés commencent par `__` sont toujours masquées aux clients ; les clés commençant par un seul `_` sont également masquées lorsque le paramètre de panier **Hide properties starting with single underscore "\_"** est activé. * `gift_card (boolean)` - Indique si cet article est une carte-cadeau * `taxable (boolean)` - Indique si cet article est soumis à la taxe * `requires_shipping (boolean)` - Indique si cet article nécessite une expédition * `grams (number)` - Poids de l'article en grammes

#### **Remises et promotions**

* `discounts (Array)` - Informations de remise simplifiées : * `amount (number)` - Montant de la remise en centimes * `title (string)` - Titre/nom de la remise * `line_level_discount_allocations (Array)` - Informations détaillées d'allocation de remises : * `amount (number)` - Montant de la remise en centimes * `discount_application (object)` - Détails complets de l'application de la remise : * `allocation_method (string)` - Mode d'allocation de la remise * `created_at (string)` - Date de création de la remise * `description (string | null)` - Description de la remise * `key (string)` - Identifiant clé de la remise * `target_selection (string)` - Ce que cible la remise * `target_type (string)` - Type de cible * `title (string)` - Titre de la remise * `total_allocated_amount (number)` - Montant total alloué * `type ('discount_code' | '')` - Type de remise (chaîne vide pour les remises automatiques) * `value (string)` - Valeur de la remise * `value_type (string)` - Mode d'application de la valeur

#### **Produits en bundle**

* `has_components (boolean | undefined)` - Indique si cet article est un bundle contenant d'autres produits (réponses GET du panier uniquement) * `item_components (Array | null | undefined)` - Détails des composants du bundle : * `quantity (number)` - Quantité de ce composant * `image (object)` - Image du composant : * `url (string)` - URL de l'image * `height (number | null)` - Hauteur de l'image * `width (number | null)` - Largeur de l'image * `alt (string)` - Texte alternatif * `product (object)` - Informations sur le produit composant : * `title (string)` - Titre du produit * `has_only_default_variant (boolean)` - Indique si le produit n'a que la variante par défaut * `variantTitle (string)` - Titre de la variante du composant

#### **Règles métier**

* `quantity_rule (object | undefined)` - Contraintes de quantité (réponses GET du panier uniquement) : * `min (number)` - Quantité minimale autorisée * `max (number | null)` - Quantité maximale autorisée (null = pas de limite) * `increment (number)` - Pas d'incrément de quantité

#### **Informations d'abonnement**

* `selling_plan_allocation (object | undefined)` - Détails de l'abonnement/du plan de vente : * `price (number)` - Prix de l'abonnement en centimes * `compare_at_price (number | null)` - Prix de comparaison de l'abonnement * `per_delivery_price (number)` - Prix par livraison * `selling_plan (object)` - Détails du plan de vente : * `id (number)` - ID du plan de vente * `name (string)` - Nom du plan * `description (string)` - Description du plan * `options (Array)` - Options du plan : * `name (string)` - Nom de l'option * `position (number)` - Position de l'option * `value (string)` - Valeur de l'option * `recurring_deliveries (boolean)` - Indique si le plan comporte des livraisons récurrentes

#### **Métadonnées d'intégration**

* `__appIntegrated (object | undefined)` - Données d'intégration d'application tierce : * `app ('stay.ai')` - Identifiant de l'application intégrée * `bundleRole ('parent' | 'child')` - Rôle dans la structure du bundle

## Upsells

Le module Upsells vous permet de personnaliser l'affichage des produits d'upsell avec votre propre design tout en conservant les fonctionnalités e-commerce essentielles comme la sélection de variantes, les actions d'ajout au panier et l'affichage des informations produit.

### **Props disponibles - Modèle de tuile d'upsell**

Tuile d'upsell montrant un produit avec prix soldé, liste déroulante de variantes et bouton Add

`itemUrl` * **Type** : `string` * **Description** : l'URL de la page produit * **Utilisation** : créer des liens vers la page de détail du produit pour améliorer la navigation utilisateur ```

``` `imageUrl` * **Type** : `string | undefined` * **Description** : l'URL de l'image du produit * **Utilisation** : afficher les images produit dans des implémentations d'upsell personnalisées * **Solution de repli** : gérez élégamment les valeurs undefined avec des images de substitution `description` * **Type** : `string` * **Description** : la description du produit * **Utilisation** : afficher la description du produit dans des implémentations d'upsell personnalisées `altText` * **Type** : `string` * **Description** : texte alternatif de l'image du produit pour l'accessibilité * **Utilisation** : offrir une prise en charge des lecteurs d'écran et améliorer la conformité en matière d'accessibilité ``` {props.altText}

``` `productId` * **Type** : `string` * **Description** : l'identifiant unique du produit * **Utilisation** : suivre les produits, implémenter des analyses ou l'utiliser dans la fonctionnalité d'ajout au panier `productTitle` * **Type** : `string` * **Description** : le titre/nom du produit * **Utilisation** : afficher le nom du produit dans des implémentations d'upsell personnalisées ```

{props.productTitle}

``` `oldPrice` & `newPrice` * **Type** : `string | null` (oldPrice), `string` (newPrice) * **Description** : prix de comparaison formaté et prix actuel * **Utilisation** : afficher les informations de prix avec des indicateurs de promotion `isSingleVariant` * **Type** : `boolean` * **Description** : indique si le produit n'a qu'une seule variante * **Utilisation** : afficher conditionnellement les éléments d'interface de sélection de variantes `productOptions` * **Type** : `{ name: string; position: 1 | 2 | 3; values: string[]; }[]` * **Description** : configuration complète des options du produit incluant tous les choix disponibles * **Utilisation** : accéder aux informations détaillées des options du produit pour une interface de sélection de variantes avancée `variantOptions` * **Type** : `{ label: string; value: string }[]` * **Description** : options de variantes disponibles pour le produit * **Utilisation** : créer des listes déroulantes ou des boutons de sélection de variantes * **Structure** : chaque option contient un libellé d'affichage et un identifiant de valeur unique `selectedVariantId` & `selectedVariantLabel` * **Type** : string (selectedVariantId), string | undefined (selectedVariantLabel) * **Description** : ID de la variante actuellement sélectionnée et son libellé d'affichage * **Utilisation** : suivre et afficher les informations de la variante sélectionnée `onVariantChange` * **Type** : `(variantId: string) => void` * **Description** : fonction pour gérer les changements de sélection de variante * **Utilisation** : mettre à jour la variante sélectionnée lorsque l'utilisateur fait un choix `onAddClick` * **Type** : `(productId: string, variantId?: string) => void` * **Description** : fonction pour gérer l'ajout du produit au panier * **Utilisation** : implémenter la fonctionnalité d'ajout au panier avec une identification correcte du produit et de la variante ``` ``` `rating` & `reviewCount` * **Type** : `number | undefined` (rating), `string | undefined` (reviewCount) * **Description** : note du produit et texte formaté du nombre d'avis * **Utilisation** : afficher la preuve sociale et les indicateurs de qualité du produit `addLoading` & `addButtonText` * **Type** : `boolean` (addLoading), `string` (addButtonText) * **Description** : état de chargement de l'action d'ajout au panier et texte du bouton * **Utilisation** : fournir un retour utilisateur pendant les opérations de panier et personnaliser le texte du bouton `cartItemsCount` * **Type** : `number` * **Description** : le nombre actuel d'articles dans le panier * **Utilisation** : afficher l'état du panier ou implémenter une logique basée sur le panier

## Additional Notes

Le module Notes vous permet de personnaliser la fonctionnalité de notes de panier avec votre propre design tout en conservant les capacités essentielles de prise de notes comme les sections dépliables, la gestion de la saisie de texte et les états de chargement.

### **Props disponibles - Modèle complet**

Section de notes du panier avec un champ de texte dépliable pour les instructions spéciales

`cartNote` * **Type** : `string` * **Description** : le contenu actuel de la note de panier saisie par le client * **Utilisation** : afficher et gérer le texte de la note de panier dans des implémentations personnalisées ```

```

`notesPlaceholder`

* **Type** : `string`

* **Description** : texte indicatif du champ de saisie des notes

* **Utilisation** : guider les clients sur ce qu'ils doivent inclure dans leurs notes

```
<textarea  
  placeholder={props.notesPlaceholder}  
  ...  
/>
```

`notesTitle`

* **Type** : `string`

* **Description** : le titre/texte d'en-tête de la section de notes

* **Utilisation** : afficher le titre de la section dans des implémentations de notes personnalisées

```
<h3 className="notes-title" dangerouslySetInnerHTML={{ __html: props.notesTitle }} />
```

`chevronDownIconComponent`

* **Type** : `React.ReactElement`

* **Description** : composant d'icône chevron pré-rendu pour la fonctionnalité de dépliage/repliage

* **Utilisation** : afficher des indicateurs de dépliage/repliage cohérents dans des implémentations personnalisées

`loadingIndicatorComponent`

* **Type** : `React.ReactElement | null`

* **Description** : composant d'indicateur de chargement pré-rendu pour les opérations asynchrones

* **Utilisation** : afficher des états de chargement pendant les opérations d'enregistrement des notes

`handleCartNoteChange`

* **Type** : `(newCartNote: string) => void`

* **Description** : fonction pour gérer les modifications du contenu de la note de panier

* **Utilisation** : mettre à jour la note de panier lorsque l'utilisateur modifie le texte

`isExpanded`

* **Type** : `boolean`

* **Description** : indique si la section de notes est actuellement dépliée

* **Utilisation** : contrôler la visibilité de la zone de saisie des notes

`toggleCollapsible`

* **Type** : `() => void`

* **Description** : fonction pour basculer l'état déplié/replié de la section de notes

* **Utilisation** : à attacher à des boutons ou éléments interactifs pour contrôler la visibilité de la section

***

<div id="footer-section">
  ## Section Footer
</div>

Le module Addons vous permet de personnaliser l'affichage des produits add-on avec votre propre design tout en conservant les fonctionnalités e-commerce essentielles comme l'affichage des informations produit, la tarification, les contrôles à bascule et le formatage des devises.

<div id="available-props-full-template-6">
  ### **Props disponibles - Modèle complet**
</div>

`addonProduct`

* **Type** :

```
  {  
    product: {  
      id: number;  
      title: string;  
      description: string;  
    };  
    variant: {  
      id: number;  
      price: number;  
      compare_at_price: number | null;  
    };  
    image: {  
      src: string;  
      alt: string;  
    };  
  }
  ```

* **Description** : informations complètes du produit add-on, y compris les détails du produit, la tarification de la variante et les données d'image

* **Utilisation** : accéder à toutes les informations produit nécessaires pour afficher les produits add-on

* **Structure** : contient des objets imbriqués product, variant et image avec des données produit complètes

* **Propriétés de l'objet Product** `addonProduct.product`

* **id** : identifiant numérique unique du produit
    * **title** : nom d'affichage du produit add-on
    * **description** : contenu HTML de la description du produit
  * **Propriétés de l'objet Variant**

* **id** : identifiant numérique unique de la variante
    * **price** : prix actuel en centimes
    * **compare\_at\_price** : prix d'origine en centimes (null s'il n'y a pas de prix de comparaison)
  * **Propriétés de l'objet Image**

* **src** : URL de l'image du produit
    * **alt** : texte alternatif de l'image (pour l'accessibilité)

`toggle`

* **Type** :

```
  {  
    state: 'enabled' | 'disabled' | 'loading';  
    handleEnable: () => void;  
    handleDisable: () => void;  
  } | null
  ```

* **Description** : état du contrôle à bascule et gestionnaires pour activer/désactiver l'add-on

* **Utilisation** : implémenter une fonctionnalité de bascule interactive pour la sélection d'add-ons

* **États** : trois états possibles - enabled, disabled et loading

* **Gestionnaires** : fonctions distinctes pour les actions d'activation et de désactivation

`moneyFormat`

* **Type** : `string`

* **Description** : la chaîne de format de devise utilisée pour le formatage des prix

* **Utilisation** : à passer à la fonction formatMoney pour un affichage cohérent de la devise

`formatMoney`

* **Type** :

```
  (options: {  
    cents: string | number;  
    format?: string;  
    shouldRemoveHTML?: boolean;  
  }) => string
  ```

* **Description** : fonction utilitaire pour formater les valeurs monétaires

* **Utilisation** : formater les prix de manière cohérente avec les paramètres de devise de la boutique

* **Paramètres** : prend une valeur en centimes, une chaîne de format facultative et une option de suppression du HTML

<div id="discount-codes">
  ## Discount Codes
</div>

Le module Discount Code vous permet de personnaliser la fonctionnalité de saisie de code de remise avec votre propre design tout en conservant les capacités e-commerce essentielles comme la validation du code, la soumission du formulaire et le retour utilisateur.

<div id="available-props-full-template-7">
  ### **Props disponibles - Modèle complet**
</div>

`indicator`

* **Type** : `'validating' | 'invalid' | 'none'`

* **Description** : état de validation actuel de la saisie du code de remise

* **Utilisation** : afficher un retour d'interface approprié en fonction du statut de validation

* **États** :

* `validating` : le code est en cours de traitement/validation
  * `invalid` : la validation du code a échoué
  * `none` : aucun état de validation (par défaut/inactif)

`discountCodeInput`

* **Type** : `string`

* **Description** : valeur actuelle du champ de saisie du code de remise

* **Utilisation** : afficher et gérer le texte du code de remise saisi par l'utilisateur

```
<input  
  type="text"  
  value={props.discountCodeInput}  
  onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
  ...  
/>
```

`discountCodePlaceholder`

* **Type** : `string`

* **Description** : texte indicatif du champ de saisie du code de remise

* **Utilisation** : guider les utilisateurs sur ce qu'ils doivent saisir dans le champ

`discountCodeButtonText`

* **Type** : `string`

* **Description** : texte à afficher sur le bouton d'application/soumission

* **Utilisation** : personnaliser le texte du bouton de soumission du code de remise

`setDiscountCodeInput`

* **Type** : `(value: string | ((prev: string) => string)) => void`

* **Description** : fonction pour mettre à jour la valeur de saisie du code de remise

* **Utilisation** : gérer les modifications de saisie de l'utilisateur dans le champ du code de remise

`handleSubmit`

* **Type** : `(e: React.FormEvent<HTMLFormElement>) => void`

* **Description** : fonction pour gérer la soumission du formulaire d'application du code de remise

* **Utilisation** : traiter la validation et l'application du code de remise

* **Événement** : gère les événements de soumission de formulaire

```
<form onSubmit={props.handleSubmit} >  
  <div className="input-group">  
    <input  
      type="text"  
      value={props.discountCodeInput}  
      onChange={(e) => props.setDiscountCodeInput(e.target.value)}  
      placeholder={props.discountCodePlaceholder}  
    />   
    <button   
      type="submit"  
      disabled={props.indicator === 'validating' || !props.discountCodeInput.trim()}  
    >  
      {props.discountCodeButtonText}  
    </button>  
  </div>  
</form>
```

<div id="cart-summary">
  ## Cart Summary
</div>

Le module Cart Summary vous permet de personnaliser l'affichage du récapitulatif du panier et des remises avec votre propre design tout en conservant les fonctionnalités e-commerce essentielles comme la gestion des remises, le calcul des économies et la transparence des prix.

<div id="available-props-full-template-8">
  ### **Props disponibles - Modèle complet**
</div>

`totalSavingsText`

* **Type** : `string`

* **Description** : libellé de texte pour la section des économies totales

* **Utilisation** : afficher le libellé des économies dans des implémentations personnalisées de récapitulatif de panier

`discountApplications`

* **Type** :

```
  {  
    key: string;  
    title: string;  
    type: 'discount_code' | '';  
  }[]
  ```

* **Description** : tableau des codes de remise appliqués et des remises automatiques

* **Utilisation** : afficher toutes les remises actives avec leurs titres et leurs types

* **Structure** : chaque remise contient une clé unique, un titre d'affichage et un identifiant de type

`cartTotalDiscount`

* **Type** : `number`

* **Description** : le montant total de la remise en centimes

* **Utilisation** : accéder à la valeur brute de la remise pour des calculs ou un formatage personnalisé

`showCartTotalDiscount`

* **Type** : `boolean`

* **Description** : indique si la remise totale doit être affichée. Marquée obsolète au profit de `showTotalSavings`, mais voir la remarque ci-dessous — à l'intérieur d'un modèle personnalisé, c'est toujours la prop dont vous disposez.

* **Utilisation** : afficher conditionnellement les informations de remise selon les paramètres

`formattedCartTotalDiscount`

* **Type** : `string`

* **Description** : chaîne HTML pré-formatée du montant total de la remise. Marquée obsolète au profit de `formattedTotalSavings`, mais voir la remarque ci-dessous.

* **Utilisation** : afficher le montant de la remise correctement formaté avec les symboles de devise

<Warning>
  **`showTotalSavings` et `formattedTotalSavings` ne sont pas disponibles à l'intérieur d'un modèle personnalisé.** Elles existent dans le contexte interne du module, mais le modèle Cart summary ne reçoit que `showCartTotalDiscount` et `formattedCartTotalDiscount` — la lecture de la paire plus récente renvoie `undefined`. Utilisez les deux props ci-dessus, et notez qu'elles affichent uniquement le total des remises ; elles ne suivent pas le paramètre **Show compare-at price savings in footer total**.
</Warning>

`isRemovingDiscount`

* **Type** : `boolean`

* **Description** : indique si une opération de suppression de remise est en cours

* **Utilisation** : afficher des états de chargement pendant la suppression d'une remise

`handleRemoveDiscount`

* **Type** : `() => Promise<void>`

* **Description** : fonction pour gérer la suppression d'un code de remise

* **Utilisation** : retirer les codes de remise appliqués du panier

`totalCompareAtPrice`

* **Type** : `number`

* **Description** : somme des prix de comparaison (tous les articles du panier)

* **Utilisation** : calculer et afficher les économies ou les informations de prix d'origine

`totalAfterAllDiscounts`

* **Type** : `number`

* **Description** : total final du panier en centimes après application de toutes les remises

* **Utilisation** : afficher le prix final que paieront les clients

`originalTotalPrice`

* **Type** : `number`

* **Description** : total d'origine du panier en centimes avant toute remise

* **Utilisation** : afficher le prix d'origine pour la transparence et le calcul des économies

`cartItemCount`

* **Type** : `number`

* **Description** : nombre total d'articles dans le panier

* **Utilisation** : afficher le nombre d'articles dans les récapitulatifs de panier

<div id="trust-badges">
  ## Trust Badges
</div>

Le module Trust Badges vous permet de personnaliser l'affichage des badges de confiance avec votre propre design tout en conservant les fonctionnalités essentielles de renforcement de la confiance comme la visibilité conditionnelle des badges et la gestion correcte des images.

<div id="available-props-full-template-9">
  ### **Props disponibles - Modèle complet**
</div>

`showBadge`

* **Type** : `boolean`

* **Description** : indique si le badge de confiance doit être affiché

* **Utilisation** : contrôler la visibilité des badges de confiance selon les paramètres du module

`badgeUrl`

* **Type** : `string`

* **Description** : l'URL de l'image du badge de confiance à afficher

* **Utilisation** : URL source de l'image du badge de confiance dans des implémentations personnalisées

Shopping Cart ({props.cartQuantity})

{rule.title}

Available Rewards...

{props.productTitle}