Skip to main content

​
Cosa fa lo Shadow DOM

Quando l’impostazione Render Cart in Shadow DOM è attiva, Upcart crea uno spazio autonomo che mantiene i suoi stili e script separati dal resto del tuo negozio. Questo significa che:
  • Il CSS globale del tuo tema non può sovrascrivere il design di Upcart.
  • Anche gli stili di Upcart non interferiranno con il tuo tema.
  • Il carrello rimane coerente su dispositivi e temi diversi.
Puoi immaginare lo Shadow DOM come una “bolla protettiva” attorno al tuo carrello che lo aiuta ad apparire e funzionare come previsto.

​
Come succede

Shopify e i temi di terze parti spesso includono CSS e JavaScript globali che possono influire involontariamente sull’aspetto o sul comportamento di Upcart. L’impostazione Render Cart in Shadow DOM aiuta a prevenire questi conflitti isolando il cart drawer di Upcart all’interno di un ambiente protetto dedicato. Quando è abilitata, lo Shadow DOM mantiene coerenti il design e il layout del tuo carrello, indipendentemente da aggiornamenti del tema o modifiche al codice personalizzato. Tuttavia, se il tuo tema o un’app di terze parti ha bisogno di accesso diretto agli elementi del carrello, questo isolamento può talvolta creare difficoltà di integrazione.

​
Considerazioni tecniche

Se tu o uno sviluppatore dovete modificare elementi all’interno di Upcart usando JavaScript, è importante usare i riferimenti al documento corretti:
  • Usa upcartDocumentOrShadowRoot quando selezioni elementi all’interno di Upcart.
  • Usa document quando selezioni elementi all’esterno di Upcart (ad esempio, l’header o il footer del tuo tema Shopify).
Anche se lo Shadow DOM è isolato, Upcart offre comunque modi per interagire con il tuo tema e altre app tramite la sua API pubblica e le funzioni helper.

​
Risoluzione dei problemi e limitazioni

Nella maggior parte dei casi, abilitare lo Shadow DOM risolverà automaticamente i conflitti di CSS e layout.
Tuttavia, possono sempre esserci scenari in cui potresti ancora riscontrare problemi:
  • App di pricing: se un’altra app deve modificare direttamente i prezzi o il comportamento del checkout all’interno del carrello, lo Shadow DOM può renderlo difficile poiché nasconde la struttura interna di Upcart agli script esterni.
  • JavaScript a livello di tema: gli script personalizzati che usano document.querySelector() potrebbero non trovare gli elementi del carrello mentre lo Shadow DOM è abilitato.
Se devi testare il comportamento del tuo negozio per queste integrazioni, puoi disabilitarlo temporaneamente: apri il cart editor, vai su Settings → Cart settings, espandi Advanced Settings e deseleziona Render cart in shadow DOM.