Skip to main content

​
Hvad Shadow DOM gør

Når indstillingen Render Cart in Shadow DOM er slået til, opretter Upcart et selvstændigt rum, der holder dets styles og scripts adskilt fra resten af din butik. Det betyder:
  • Dit temas globale CSS kan ikke tilsidesætte Upcarts design.
  • Upcarts styling forstyrrer heller ikke dit tema.
  • Kurven forbliver ensartet på tværs af forskellige enheder og temaer.
Du kan tænke på Shadow DOM som en “beskyttende boble” omkring din kurv, der hjælper den med at se ud og fungere, som den er tiltænkt.

​
Hvordan dette sker

Shopify- og tredjepartstemaer kommer ofte med global CSS og JavaScript, der utilsigtet kan påvirke, hvordan Upcart ser ud eller opfører sig. Indstillingen Render Cart in Shadow DOM hjælper med at forhindre disse konflikter ved at isolere Upcarts kurvskuffe i sit eget beskyttede miljø. Når den er aktiveret, holder Shadow DOM dit kurvdesign og -layout ensartet, uanset temaopdateringer eller ændringer i brugerdefineret kode. Men hvis dit tema eller en tredjepartsapp har brug for direkte adgang til kurvelementer, kan denne isolation nogle gange skabe integrationsudfordringer.

​
Tekniske overvejelser

Hvis du eller en udvikler har brug for at ændre elementer inde i Upcart med JavaScript, er det vigtigt at bruge de rigtige dokumentreferencer:
  • Brug upcartDocumentOrShadowRoot, når du målretter elementer inde i Upcart.
  • Brug document, når du målretter elementer uden for Upcart (for eksempel dit Shopify-temas header eller footer).
Selvom Shadow DOM er isoleret, tilbyder Upcart stadig måder at interagere med dit tema og andre apps på gennem sit Public API og hjælpefunktioner.

​
Fejlfinding og begrænsninger

I de fleste tilfælde vil aktivering af Shadow DOM automatisk løse CSS- og layoutkonflikter.
Der kan dog altid være scenarier, hvor du stadig oplever problemer:
  • Prisapps: Hvis en anden app har brug for direkte at ændre priser eller checkout-adfærd inde i kurven, kan Shadow DOM gøre det vanskeligt, da det skjuler Upcarts interne struktur for eksterne scripts.
  • JavaScript på temaniveau: Brugerdefinerede scripts, der bruger document.querySelector(), finder muligvis ikke kurvelementer, mens Shadow DOM er aktiveret.
Hvis du har brug for at teste din butiks adfærd for disse integrationer, kan du midlertidigt deaktivere det: åbn cart editoren, gå til Settings → Cart settings, udvid Advanced Settings, og fjern markeringen i Render cart in shadow DOM.