Skip to main content

​
Ce que fait le Shadow DOM

Lorsque le paramètre Render Cart in Shadow DOM est activé, Upcart crée un espace autonome qui maintient ses styles et scripts séparés du reste de votre boutique. Cela signifie que :
  • Le CSS global de votre thème ne peut pas écraser le design d’Upcart.
  • Le style d’Upcart n’interférera pas non plus avec votre thème.
  • Le panier reste cohérent sur différents appareils et thèmes.
Vous pouvez considérer le Shadow DOM comme une « bulle protectrice » autour de votre panier qui l’aide à s’afficher et à fonctionner comme prévu.

​
Comment cela se produit

Les thèmes Shopify et tiers sont souvent livrés avec du CSS et du JavaScript globaux qui peuvent affecter involontairement l’apparence ou le comportement d’Upcart. Le paramètre Render Cart in Shadow DOM aide à prévenir ces conflits en isolant le tiroir de panier d’Upcart dans son propre environnement protégé. Lorsqu’il est activé, le Shadow DOM maintient la cohérence du design et de la mise en page de votre panier, indépendamment des mises à jour du thème ou des modifications de code personnalisé. Cependant, si votre thème ou une application tierce a besoin d’un accès direct aux éléments du panier, cette isolation peut parfois créer des difficultés d’intégration.

​
Considérations techniques

Si vous ou un développeur devez modifier des éléments dans Upcart à l’aide de JavaScript, il est important d’utiliser les bonnes références de document :
  • Utilisez upcartDocumentOrShadowRoot pour cibler des éléments à l’intérieur d’Upcart.
  • Utilisez document pour cibler des éléments à l’extérieur d’Upcart (par exemple, l’en-tête ou le pied de page de votre thème Shopify).
Même si le Shadow DOM est isolé, Upcart fournit toujours des moyens d’interagir avec votre thème et d’autres applications via son API publique et ses fonctions utilitaires.

​
Dépannage et limitations

Dans la plupart des cas, l’activation du Shadow DOM corrigera automatiquement les conflits de CSS et de mise en page.
Cependant, il peut toujours exister des scénarios où vous rencontrez encore des problèmes :
  • Applications de tarification : si une autre application doit modifier directement les prix ou le comportement de paiement à l’intérieur du panier, le Shadow DOM peut rendre cela difficile puisqu’il masque la structure interne d’Upcart aux scripts externes.
  • JavaScript au niveau du thème : les scripts personnalisés qui utilisent document.querySelector() peuvent ne pas trouver les éléments du panier lorsque le Shadow DOM est activé.
Si vous devez tester le comportement de votre boutique pour ces intégrations, vous pouvez toujours désactiver temporairement le Shadow DOM dans Upcart → Settings → Advanced Settings.