Skip to main content

​
Wat Shadow DOM doet

Wanneer de instelling Render Cart in Shadow DOM is ingeschakeld, creëert Upcart een op zichzelf staande ruimte die de eigen stijlen en scripts gescheiden houdt van de rest van je winkel. Dit betekent:
  • De globale CSS van je thema kan het ontwerp van Upcart niet overschrijven.
  • De styling van Upcart verstoort je thema ook niet.
  • De winkelwagen blijft consistent op verschillende apparaten en thema’s.
Je kunt Shadow DOM zien als een “beschermende bubbel” rond je winkelwagen die ervoor zorgt dat deze eruitziet en werkt zoals bedoeld.

​
Hoe dit gebeurt

Shopify-thema’s en thema’s van derden bevatten vaak globale CSS en JavaScript die onbedoeld kunnen beïnvloeden hoe Upcart eruitziet of zich gedraagt. De instelling Render Cart in Shadow DOM helpt deze conflicten te voorkomen door de cart drawer van Upcart te isoleren in een eigen beschermde omgeving. Wanneer Shadow DOM is ingeschakeld, blijven het ontwerp en de indeling van je winkelwagen consistent, ongeacht thema-updates of aangepaste codewijzigingen. Als je thema of een app van derden echter directe toegang tot winkelwagenelementen nodig heeft, kan deze isolatie soms integratieproblemen opleveren.

​
Technische overwegingen

Als jij of een developer elementen binnen Upcart met JavaScript wilt aanpassen, is het belangrijk om de juiste documentverwijzingen te gebruiken:
  • Gebruik upcartDocumentOrShadowRoot wanneer je elementen binnen Upcart wilt benaderen.
  • Gebruik document wanneer je elementen buiten Upcart wilt benaderen (bijvoorbeeld de header of footer van je Shopify-thema).
Ook al is de Shadow DOM geïsoleerd, Upcart biedt nog steeds manieren om te communiceren met je thema en andere apps via de Public API en hulpfuncties.

​
Probleemoplossing en beperkingen

In de meeste gevallen lost het inschakelen van Shadow DOM CSS- en indelingsconflicten automatisch op.
Toch kunnen er altijd scenario’s zijn waarin je nog steeds problemen ervaart:
  • Prijs-apps: Als een andere app prijzen of het checkout-gedrag binnen de winkelwagen rechtstreeks moet aanpassen, kan Shadow DOM dat lastig maken, omdat het de interne structuur van Upcart verbergt voor externe scripts.
  • JavaScript op themaniveau: Aangepaste scripts die document.querySelector() gebruiken, vinden mogelijk geen winkelwagenelementen terwijl Shadow DOM is ingeschakeld.
Als je het gedrag van je winkel voor deze integraties wilt testen, kun je de instelling tijdelijk uitschakelen: open de cart editor, ga naar Settings → Cart settings, klap Advanced Settings uit en schakel Render cart in shadow DOM uit.