¿Qué es un Cart Drawer?

Un cart drawer es un panel que se despliega sobre la página actual y muestra el contenido del carrito sin navegar a una página de carrito independiente. Se abre desde el icono de carrito de la cabecera y, por lo general, también al añadir un artículo. El panel enumera líneas, cantidades e importe total, a menudo junto a indicadores de progreso como un umbral de envío gratuito, e incluye una acción principal que conduce al checkout. Se ha convertido en el patrón de carrito habitual en storefronts orientadas a móvil.

Definición

Un cart drawer es un patrón de presentación, no un sistema de carrito distinto. El estado subyacente del carrito es el mismo tanto si se representa en un panel, en una página de carrito propia o en un minicarrito desplegable. Las variantes se diferencian por el disparador, por si el panel se abre automáticamente tras añadir un artículo y por la cantidad de contenido secundario que soportan, como campo de cupón, recomendaciones o estimación de envío. Los requisitos de accesibilidad son estrictos: el panel es una superficie modal, el foco debe entrar en él, la tecla de escape debe cerrarlo y el fondo no debe desplazarse. El fallo más común es sobrecargarlo de ofertas, porque retrasa el camino al checkout.

Por qué es importante

En una storefront desacoplada el carrito reside detrás de una API de comercio y se direcciona mediante un identificador de la sesión del navegador. El panel se suscribe a un estado de carrito compartido en el cliente, de modo que cualquier componente que lo modifique, sea una tarjeta de producto, un selector de cantidad o un módulo de bundle, provoca una única actualización y un único redibujado. La página que lo rodea puede renderizarse de forma estática y cachearse en el edge, mientras el carrito se carga aparte en tiempo de ejecución: los datos del cliente quedan fuera del documento cacheado. Las actualizaciones optimistas mantienen el panel ágil, y el servidor sigue siendo la referencia para precio, stock y promociones.

Casos de uso

En la ficha de producto el panel se abre tras añadir un artículo y confirma la acción sin abandonar la página, lo que favorece sesiones con varios artículos. En listados permite añadir productos de forma consecutiva. Dentro del panel caben una barra de progreso hacia el umbral de envío, una sugerencia de mejora compacta o un campo de cupón, siempre que el botón de checkout siga siendo el elemento más destacado. En pantallas pequeñas el panel suele ocupar toda la altura de la ventana, con el total y la acción principal fijados en el borde inferior.

Relacionado

Más información: Cart Abandonment · Checkout Optimization.