Modèles de widgets

Système de modèles de widgets

Le système de modèles vous donne un contrôle total sur le rendu, sur votre vitrine, des options de garantie, des articles du panier, des affichages de statut de commande et de la protection de livraison. Chacun des 12 types de widgets peut disposer d’un modèle HTML personnalisé, avec des variables de style Handlebars et des attributs data pour l’interactivité.

---

Gestionnaire de modèles

Accédez au gestionnaire de modèles via Tableau de bord → Widgets → Modèles. Il propose un éditeur de code Monaco avec coloration syntaxique et autocomplétion, un panneau d’aperçu et la documentation des variables disponibles pour chaque type de widget.

---

Référence des attributs data

Les attributs data relient les éléments du modèle au JavaScript du widget Umbrella.

Déclencheur de fenêtre

Attribut	Description
data-umbrella-modal-trigger	Ouvre une fenêtre au clic. Valeur : "selector" ou "info".
data-umbrella-modal-close-btn	Ferme la fenêtre au clic.

Sélection des options de garantie

Attribut	Description
data-umbrella-options	Obligatoire. Conteneur des sélecteurs d’options.
data-umbrella-option	Obligatoire. Identifie une option sélectionnable.
data-umbrella-option-price	Affiche le prix de l’option (mis à jour au changement de variante).
data-umbrella-selected-state	Modifie la visibilité selon l’état de sélection.
data-umbrella-selected-warranty-title	Affiche le titre de la garantie sélectionnée.
data-umbrella-selected-warranty-price	Affiche le prix de la garantie sélectionnée. Utilisez "rounded" ou "withCents".

Actions du panier

Attribut	Description
data-umbrella-add-to-cart-btn	Obligatoire dans les fenêtres et le panier. Ajoute la garantie sélectionnée au panier.
data-umbrella-decline-btn	Obligatoire dans les fenêtres et le panier. Refuse la garantie.

Protection de livraison

Attribut	Description
data-umbrella-shipping-protection-checkbox	Obligatoire. Case à cocher pour activer la protection de livraison.
data-umbrella-shipping-protection-checkbox-label	Obligatoire. Libellé de la case à cocher.

Sections dépliables

Attribut	Description
data-umbrella-expandable-section	Conteneur de la section dépliable.
data-umbrella-expandable-content	Contenu qui s’affiche/se masque.
data-umbrella-expandable-toggle	Bouton qui affiche ou masque le contenu.

Accordéon

Attribut	Description
data-umbrella-collapsible-accordion	Conteneur de l’accordéon.
data-umbrella-collapsible-item	Élément individuel de l’accordéon.
data-umbrella-collapsible-button	Bouton de bascule de l’élément.
data-umbrella-collapsible-content	Zone de contenu de l’élément.

Menu déroulant

Attribut	Description
data-umbrella-dropdown-menu	Conteneur du menu déroulant.
data-umbrella-dropdown-toggle	Ouvre/ferme le menu déroulant.
data-umbrella-dropdown-content	Panneau de contenu du menu déroulant.
data-umbrella-dropdown-option-value	Valeur de chaque option du menu déroulant.
data-umbrella-dropdown-selected-value	Affiche la valeur sélectionnée.
data-umbrella-dropdown-unselected-placeholder	Texte indicatif lorsque rien n’est sélectionné.

---

Référence des variables de modèle

Les variables utilisent la syntaxe Handlebars : {{variable}} pour le texte, {{{variable}}} pour le contenu HTML (prix).

Produit

{{productImage}}, {{productName}}, {{productType}}, {{productHandle}}, {{productId}}, {{productQuantity}}, {{{productPrice}}}

Variante sélectionnée

{{selectedVariantId}}, {{selectedVariantTitle}}, {{{selectedVariantPrice}}}

Garantie

{{warrantyId}}, {{warrantyTitle}}, {{{warrantyDescription}}}, {{warrantyImage}}, {{warrantyProductHandle}}, {{warrantyProductUrl}}

Boucle d’options ({{#each options}})

{{serviceLevel}}, {{term}}, {{title}}, {{{description}}}, {{imageUrl}}, {{isNoCoverageOption}}, {{{priceRounded}}}, {{{priceWithCents}}}, {{{totalPrice}}}, {{variantId}}

Garantie sélectionnée (panier)

{{warrantyTerm}}, {{warrantyServiceLevel}}, {{{warrantyPrice}}}, {{{warrantyPriceRounded}}}, {{warrantyTermDisplay}}, {{warrantyVariantId}}

Indicateurs de mode d’affichage

{{isInlineMode}}, {{isIndividualMode}}, {{isModalMode}}, {{{cheapestPrice}}}, {{{cheapestPriceRounded}}}

Contexte de la ligne d’article

{{isProtectedProductLineItem}}, {{isWarrantyLineItem}}

Prix dans le panier

{{isMultipleQuantity}}, {{{warrantySingleLineItemPrice}}}, {{{warrantyTotalLineItemPrice}}} (ainsi que leurs variantes rounded et withCents)

Indicateurs de couverture

{{isEligible}}, {{coversManufacturerDefect}}, {{coversAccidentalDamage}}, {{coversWearAndTear}}, {{coversSpillOrStain}}, {{coversLostOrStolen}}

Police (statut de commande)

{{policyId}}, {{policyNumber}}, {{policyStatus}}, {{policyStartDate}}, {{policyEndDate}}, {{isActive}}, {{claimWindowOpen}}, {{daysRemaining}}, {{orderName}}, {{fileClaimUrl}}

---

Variables disponibles par type de widget

Type de widget	Produit	Variante	Garantie	Options	Couverture	Mode d’affichage	Ligne d’article	Panier	Police
pdp_widget	Oui	Oui	Oui	Oui	Oui	Oui	—	—	—
selector_modal	Oui	Oui	Oui	Oui	Oui	Partiel	—	—	—
info_modal	Oui	Oui	Oui	—	Oui	—	—	—	—
cart_protected	Oui	Oui	Oui	—	Oui	—	Oui	Oui	—
cart_unprotected	Oui	Oui	Oui	Oui	Oui	Oui	—	Oui	—
order_status	—	—	Oui	—	Oui	—	—	—	Oui
order_status_modal	—	—	Oui	—	Oui	—	—	—	Oui
order_status_post_purchase	—	—	Oui	Oui	Oui	—	—	—	—
order_status_post_purchase_modal	—	—	Oui	Oui	Oui	—	—	—	—
shipping_protection	—	—	Oui	—	Oui	—	—	—	—
shipping_protection_modal	—	—	Oui	—	Oui	—	—	—	—

---

Conseils

• Utilisez les triples accolades {{{price}}} pour les prix afin que les entités HTML s’affichent correctement
• Incluez toujours data-umbrella-options et data-umbrella-option pour que la sélection des options fonctionne
• Testez avec différentes variantes de produit pour vérifier la mise à jour des prix
• Utilisez {{#if isInlineMode}} pour des mises en page propres à un mode d’affichage
• Incluez data-umbrella-modal-close-btn dans les fenêtres

---

Voir aussi

• Configuration des widgets — Comportement des widgets et options d’affichage
• Extension de thème Shopify — Widget PDP via l’intégration au thème
• Extensions de paiement Shopify — Paramètres de l’extension de paiement
• Extensions de commande Shopify — Affichage du widget de statut de commande