Skip to main content

​
Qué hace el Shadow DOM

Cuando el ajuste Render Cart in Shadow DOM está activado, Upcart crea un espacio autónomo que mantiene sus estilos y scripts separados del resto de tu tienda. Esto significa que:
  • El CSS global de tu tema no puede anular el diseño de Upcart.
  • El estilo de Upcart tampoco interferirá con tu tema.
  • El carrito se mantiene consistente en diferentes dispositivos y temas.
Puedes pensar en el Shadow DOM como una “burbuja protectora” alrededor de tu carrito que le ayuda a verse y funcionar como debe.

​
Cómo sucede esto

Los temas de Shopify y de terceros suelen incluir CSS y JavaScript globales que pueden afectar involuntariamente el aspecto o el comportamiento de Upcart. El ajuste Render Cart in Shadow DOM ayuda a prevenir estos conflictos aislando el cajón del carrito de Upcart dentro de su propio entorno protegido. Cuando está habilitado, el Shadow DOM mantiene el diseño y la disposición de tu carrito consistentes, independientemente de las actualizaciones del tema o los cambios de código personalizado. Sin embargo, si tu tema o una app de terceros necesita acceso directo a los elementos del carrito, este aislamiento a veces puede crear desafíos de integración.

​
Consideraciones técnicas

Si tú o un desarrollador necesitan modificar elementos dentro de Upcart usando JavaScript, es importante usar las referencias de documento correctas:
  • Usa upcartDocumentOrShadowRoot cuando apuntes a elementos dentro de Upcart.
  • Usa document cuando apuntes a elementos fuera de Upcart (por ejemplo, el encabezado o pie de página de tu tema de Shopify).
Aunque el Shadow DOM está aislado, Upcart todavía ofrece formas de interactuar con tu tema y otras apps a través de su Public API y funciones auxiliares.

​
Solución de problemas y limitaciones

En la mayoría de los casos, habilitar el Shadow DOM corregirá automáticamente los conflictos de CSS y de diseño.
Sin embargo, siempre puede haber algunos escenarios en los que aún experimentes problemas:
  • Apps de precios: Si otra app necesita modificar directamente los precios o el comportamiento del checkout dentro del carrito, el Shadow DOM puede dificultarlo, ya que oculta la estructura interna de Upcart a los scripts externos.
  • JavaScript a nivel del tema: Los scripts personalizados que usan document.querySelector() pueden no encontrar los elementos del carrito mientras el Shadow DOM está habilitado.
Si necesitas probar el comportamiento de tu tienda con estas integraciones, siempre puedes deshabilitar temporalmente el Shadow DOM en Upcart → Settings → Advanced Settings.