Skip to main content

​
Was Shadow DOM bewirkt

Wenn die Einstellung Render Cart in Shadow DOM aktiviert ist, erstellt Upcart einen in sich geschlossenen Bereich, der seine Styles und Skripte vom Rest deines Stores getrennt hält. Das bedeutet:
  • Das globale CSS deines Themes kann das Design von Upcart nicht überschreiben.
  • Das Styling von Upcart beeinträchtigt auch dein Theme nicht.
  • Der Warenkorb bleibt über verschiedene Geräte und Themes hinweg konsistent.
Du kannst dir das Shadow DOM als „Schutzblase“ um deinen Warenkorb vorstellen, die dafür sorgt, dass er so aussieht und funktioniert, wie er soll.

​
Wie es dazu kommt

Shopify- und Drittanbieter-Themes bringen oft globales CSS und JavaScript mit, das unbeabsichtigt beeinflussen kann, wie Upcart aussieht oder sich verhält. Die Einstellung Render Cart in Shadow DOM hilft, diese Konflikte zu vermeiden, indem sie den Cart Drawer von Upcart in einer eigenen geschützten Umgebung isoliert. Wenn sie aktiviert ist, hält das Shadow DOM dein Warenkorb-Design und -Layout konsistent — unabhängig von Theme-Updates oder benutzerdefinierten Code-Änderungen. Wenn dein Theme oder eine Drittanbieter-App jedoch direkten Zugriff auf Warenkorb-Elemente benötigt, kann diese Isolation manchmal Integrationsherausforderungen mit sich bringen.

​
Technische Überlegungen

Wenn du oder ein Entwickler Elemente innerhalb von Upcart mit JavaScript ändern müsst, ist es wichtig, die richtigen Dokumentreferenzen zu verwenden:
  • Verwende upcartDocumentOrShadowRoot, wenn du Elemente innerhalb von Upcart ansprichst.
  • Verwende document, wenn du Elemente außerhalb von Upcart ansprichst (zum Beispiel den Header oder Footer deines Shopify-Themes).
Auch wenn das Shadow DOM isoliert ist, bietet Upcart weiterhin Möglichkeiten, über seine öffentliche API und Hilfsfunktionen mit deinem Theme und anderen Apps zu interagieren.

​
Fehlerbehebung und Einschränkungen

In den meisten Fällen behebt das Aktivieren des Shadow DOM CSS- und Layout-Konflikte automatisch.
Es kann jedoch immer Szenarien geben, in denen du weiterhin Probleme hast:
  • Preis-Apps: Wenn eine andere App Preise oder das Checkout-Verhalten direkt im Warenkorb ändern muss, kann das Shadow DOM das erschweren, da es die interne Struktur von Upcart vor externen Skripten verbirgt.
  • JavaScript auf Theme-Ebene: Benutzerdefinierte Skripte, die document.querySelector() verwenden, finden Warenkorb-Elemente möglicherweise nicht, solange das Shadow DOM aktiviert ist.
Wenn du das Verhalten deines Stores für diese Integrationen testen musst, kannst du die Einstellung vorübergehend deaktivieren: Öffne den Cart Editor, gehe zu Settings → Cart settings, klappe Advanced Settings auf und deaktiviere Render cart in shadow DOM.