Resumen

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.

HTML

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:

Configuración de Custom HTML de Upcart con el script de las flechas del carrusel en Scripts Before Load

CSS

Si sigues teniendo problemas con la posición de las flechas del carrusel, prueba aplicar la siguiente solución de CSS:

.carousel.carousel-slider .control-next {  
  right: -34px !important;  
}

Explicación

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.

⌘I

Primeros pasos

Módulos del carrito

Configuración del carrito

Botón de carrito fijo

Multicart

Personalizaciones

Analíticas

Integraciones y compatibilidad

Facturación y cuenta

Solución de problemas

Solucionar las flechas de carrusel faltantes en el módulo de upsell de Upcart V1.0

Resumen

HTML

CSS

Explicación

​Resumen

​HTML

​CSS

​Explicación

Resumen

HTML

CSS

Explicación