10 ejemplos gratuitos de interfaz de usuario de carrito de compras de comercio electrónico CSS y JavaScript

Los carros de comercio electrónico deben ser utilizables y accesibles para todos los visitantes. Su objetivo es aumentar las conversiones y mantener a las personas involucradas durante el pago, y la mejor manera de hacerlo es con un diseño limpio que fomente la actividad del usuario.

Hay muchos carritos de compras gratuitos de código abierto que puede cambiar de estilo para cualquier propósito. Y nos hemos tomado la libertad de recopilar nuestros favoritos en esta colección.

carro plano

No se puede negar la popularidad del diseño plano. Funciona para todo tipo de sitios web y ayuda a los diseñadores a centrarse más en la usabilidad que en la estética.

Es por eso que este carro plano es un excelente recurso para cualquiera que construya una página de pago de comercio electrónico. Los colores son fáciles de actualizar y las características de la interfaz funcionan igual independientemente del estilo de diseño.

No creo que el diseño plano sea la solución para todos los proyectos, pero en el escenario adecuado, este bolígrafo puede funcionar bien como plantilla inicial.

Vea el Pen Flat Cart [codepen comp] de Will Paige

Interfaz de usuario sin tablas

Muchas páginas de pago usan tablas para organizar datos, pero este ejemplo de Alex Rodrigues usa DIV en su lugar.

Es totalmente receptivo, por lo que el diseño debería verse bien sin importar qué dispositivo estés usando. Cada fila contiene suficientes datos para cambiar el estilo correctamente y mantener todo organizado, incluso en pantallas muy pequeñas. Y el código CSS usa Compass para ahorrar tiempo junto con Google Fonts gratis para un poco de estilo.

Ver el carro de la compra sin mesa Pen Responsive de alex rodrigues

Delicioso carrito de compras

No puedo imaginar que esto funcione en un sitio real, pero como experimento de UI/UX es genial. El carrito de compras delicioso autotitulado actúa como una panadería/tienda de dulces en línea con fotos de diferentes postres.

Puede mover el cursor hacia la izquierda o hacia la derecha para avanzar por el carrusel o deslizar el dedo en un dispositivo móvil. Cada artículo tiene íconos más/menos para agregar artículos o eliminarlos de su pedido, además de un ícono 'X' para eliminarlo por completo de su carrito.

Todo se basa en Sass, Slim y jQuery, ¡así que es un gran proyecto de interfaz! Si está buscando diseccionar un código excelente, vale la pena guardar este ejemplo.

Ver el carro de la compra Pen Delicious de Didier

Diseño de respuesta

Aquí hay otra interfaz de usuario de carrito de compras receptiva simple construida en Sass y sin tablas.

Me gusta este pago receptivo un poco más que los demás porque los puntos de interrupción se sienten más naturales. Incluso en pantallas más pequeñas, los artículos del carrito no se sienten apretados o fuera de lugar.

Todos los botones de "eliminar" funcionan a través de JavaScript, y los campos de entrada numéricos actualizan automáticamente los precios. Esto es excelente para una página de carrito de compras donde el comprador puede querer aumentar las cantidades antes de pagar y ver una estimación de los costos totales.

Vea el carro de compras sensible a la pluma por Justin Klemm

Cesta de la compra de jQuery

Este bolígrafo actúa más como una estructura alámbrica que como una página de pago completa, pero es perfecto como punto de partida. El desarrollador Khurram Alvi creó este carrito de compras receptivo con HTML/CSS básico y un poco de jQuery.

Es totalmente receptivo y las entradas de cantidad funcionan como cabría esperar. Una cosa buena es la simplicidad del diseño de este carrito. No impone colores, fuentes o texturas en el diseño. Cualquiera que busque construir un carrito nuevo desde cero podría comenzar aquí porque es fácil de construir y reestructurar.

Ver la cesta de la compra jQuery Pen Responsive de Khurram Alvi

Carro de desafío

De vez en cuando aparecen nuevos desafíos de CodePen que piden a los desarrolladores que creen diferentes interfaces, como páginas de registro o ventanas modales. Este bolígrafo de Ziga Miklic surgió de un desafío para las interfaces de usuario del carrito de compras y es una obra maestra del desarrollo de interfaz.

Cuando agregue/elimine artículos del carrito, notará que los precios se actualizan automáticamente con una pequeña animación deslizante. También puede hacer clic en la imagen de cualquier producto para eliminarlo del carrito con facilidad. Estas pequeñas características agregan mucho a la interfaz y hacen que la clonación sea muy sencilla.

Incluso la función de pago tiene su propia función animada, aunque no está conectada a nada en el backend.

Ver el carrito de compras de Pen [ CodePen Challange ] de Ziga Miklic

Interfaz de usuario del carro deslizante

Los widgets con pestañas le permiten agregar contenido en una sola página y otorgar a los usuarios el poder sobre ese contenido. En este carrito deslizante, puede cambiar entre el carrito en sí y una lista de elementos "favoritos" guardados.

Ninguna de las funciones de pago funciona realmente, por lo que no puede agregar o eliminar elementos del carrito como favoritos. Pero los elementos de la interfaz están en su lugar, por lo que un poco de magia de JavaScript solucionaría eso. Aún así, estoy impresionado con lo limpio que se ve este carrito y la interfaz de pestañas única pero utilizable.

Ver el carrito de compras Pen (responsivo) por Alex

Tienda dinámica y carrito

Combinar la tienda y el carrito de compras en una sola interfaz es un trabajo difícil, pero Olivia Cheng lo logró en este bolígrafo.

Utiliza miniaturas anchas en una cuadrícula configurada con un botón "agregar al carrito" al pasar el mouse. Haga clic aquí para agregar el artículo anterior con precios de actualización automática. Una característica única es la cantidad agregada en la parte superior de la miniatura del artículo. Esto puede ser confuso en un carrito real, pero si los números fueran un poco más pequeños, sería una excelente manera de ahorrar espacio.

Vea el carrito de compras deslizante y la tienda de Olivia Cheng

Limpiar carrito de compras

El desarrollador Bart Veneman creó este carrito de compras limpio como una plantilla de interfaz simple. Calcula automáticamente el precio total e incluso incluye impuestos cerca del botón de pago.

Todas estas funciones dinámicas funcionan a través de JavaScript y, sorprendentemente, este lápiz utiliza Zepto en lugar de jQuery. Esto es excelente para los desarrolladores que prefieren la biblioteca de Zepto, pero en realidad cualquiera podría tomar este código y modificarlo para adaptarlo a cualquier plantilla.

Ver el carro de la compra de bolígrafos de Bart Veneman

Carro simple con Vue.js

La codificación frontend con Vue.js simplifica mucho la creación de plantillas. Y este bolígrafo es un ejemplo de un carrito dinámico construido prácticamente sobre una base de JavaScript.

El carrito se actualiza automáticamente con cada clic para que pueda agregar o eliminar elementos y ver los resultados al instante. El botón superior derecho abre su carrito actual en una ventana modal usando el componente modal de Bootstrap.

Si le gusta la sintaxis de Vue.js, esta plantilla es un excelente lugar para comenzar a crear un carrito de compras. Es fácil de personalizar y debería funcionar bien en todos los navegadores.

Ver el carrito de compras Pen VueJS 2 Simple de Cristian Matos

Carro de dominio

Este es uno de mis diseños de carritos de compras favoritos inspirado en un registrador de dominios. El codificador Jesse Bilsten se detalló con esta interfaz, incluida una sección de pago y un área de T&C requerida.

Debe hacer clic en el botón "Acepto" antes de completar el proceso de pago. Es una característica menor pero valiosa para algunos sitios de comercio electrónico, y me gusta mucho el diseño de dos columnas. Y este diseño es totalmente receptivo, por lo que puede clonarlo para usarlo en prácticamente cualquier sistema de comercio electrónico.

Vea el carro de compras sensible a la pluma: marca v01 de Jesse Bilsten