Si estás experimentando un problema en el que faltan las flechas del carrusel en el módulo de upsell de Upcart, generalmente se debe a un problema de compatibilidad con el tema de tu tienda.Para resolverlo, puedes agregar las flechas manualmente aplicando una personalización mediante HTML personalizado en la configuración del editor de Upcart.Para acceder a los campos de código personalizado en Upcart:Cart Editor > Settings, y luego las pestañas Custom HTML y Custom CSS. Settings es una fila de pestañas: todo lo que no cabe se encuentra detrás de More settings.
Para esta solución, abre el menú desplegable de HTML y selecciona “Scripts (before load)”, luego pega el siguiente código en esa sección:
<script> window.upcartSubscribeCartOpened(() => { setTimeout(() => { // The cart may render inside a shadow root, where document.querySelector // cannot reach it. Search the shadow root when there is one. const host = document.getElementById('upCart'); const scope = host?.shadowRoot ?? document; const buttonLeft = scope.querySelector('.control-arrow.control-prev'); if (buttonLeft) buttonLeft.innerText = "<"; const buttonRight = scope.querySelector('.control-arrow.control-next'); if (buttonRight) buttonRight.innerText = ">"; }, 300); });</script>
No uses un document.querySelector a secas aquí. Upcart se renderiza dentro de un shadow root en la mayoría de las tiendas (es el valor predeterminado en las instalaciones más recientes), y document.querySelector no puede ver dentro de uno: el script no encontraría nada y, sin las comprobaciones if, lanzaría un error con null. La línea host?.shadowRoot ?? document de arriba funciona en ambos casos.
Nota sobre versiones antiguas: Los callbacks de window.upcartOnCartOpened siguen funcionando, pero están obsoletos y registran advertencias en la consola. Usa upcartSubscribeCartOpened para todos los scripts nuevos.
Así es como debería verse tu configuración de HTML personalizado en Upcart:
A menudo usamos pseudoelementos de CSS (::before) contenidos dentro de los botones para mostrar las flechas del carrusel. Sin embargo, algunos temas de tienda bloquean el renderizado de los pseudoelementos, lo que hace que las flechas del carrusel desaparezcan del cajón del carrito.Esto crea un problema en el que las flechas del carrusel de upsell aparecen correctamente en la vista previa del editor, pero no en la tienda en vivo.
¿Esta página le ayudó?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
