Skip to main content

​
O que o Shadow DOM faz

Quando a configuração Render Cart in Shadow DOM está ativada, o Upcart cria um espaço independente que mantém seus estilos e scripts separados do restante da sua loja. Isso significa que:
  • O CSS global do seu tema não pode sobrescrever o design do Upcart.
  • O estilo do Upcart também não interfere no seu tema.
  • O carrinho permanece consistente em diferentes dispositivos e temas.
Você pode pensar no Shadow DOM como uma “bolha protetora” em torno do seu carrinho, que ajuda a fazê-lo parecer e funcionar da maneira esperada.

​
Como isso acontece

O Shopify e temas de terceiros frequentemente vêm com CSS e JavaScript globais que podem afetar involuntariamente a aparência ou o comportamento do Upcart. A configuração Render Cart in Shadow DOM ajuda a evitar esses conflitos isolando o cart drawer do Upcart dentro de seu próprio ambiente protegido. Quando habilitado, o Shadow DOM mantém o design e o layout do seu carrinho consistentes, independentemente de atualizações do tema ou alterações de código personalizado. No entanto, se o seu tema ou um app de terceiros precisar de acesso direto aos elementos do carrinho, esse isolamento pode às vezes criar desafios de integração.

​
Considerações técnicas

Se você ou um desenvolvedor precisar modificar elementos dentro do Upcart usando JavaScript, é importante usar as referências de documento corretas:
  • Use upcartDocumentOrShadowRoot ao selecionar elementos dentro do Upcart.
  • Use document ao selecionar elementos fora do Upcart (por exemplo, o cabeçalho ou rodapé do seu tema do Shopify).
Mesmo com o Shadow DOM isolado, o Upcart ainda oferece maneiras de interagir com seu tema e outros apps por meio de sua API pública e funções auxiliares.

​
Solução de problemas e limitações

Na maioria dos casos, habilitar o Shadow DOM corrigirá conflitos de CSS e de layout automaticamente.
No entanto, sempre pode haver alguns cenários em que você ainda encontre problemas:
  • Apps de preços: Se outro app precisar modificar diretamente preços ou o comportamento do checkout dentro do carrinho, o Shadow DOM pode dificultar isso, já que ele oculta a estrutura interna do Upcart de scripts externos.
  • JavaScript no nível do tema: Scripts personalizados que usam document.querySelector() podem não encontrar os elementos do carrinho enquanto o Shadow DOM estiver habilitado.
Se você precisar testar o comportamento da sua loja para essas integrações, pode desabilitá-lo temporariamente: abra o editor de carrinho, vá em Settings → Cart settings, expanda Advanced Settings e desmarque Render cart in shadow DOM.