10 exemplos gratuitos de interface de usuário de carrinho de compras CSS e JavaScript para comércio eletrônico

Os carrinhos de comércio eletrônico precisam ser utilizáveis ​​e acessíveis para todos os visitantes. Seu objetivo é aumentar as conversões e manter as pessoas engajadas durante o checkout, e a melhor maneira de fazer isso é com um design limpo que incentive a atividade do usuário.

Existem muitos carrinhos de compras gratuitos de código aberto que você pode redefinir para qualquer finalidade. E tomamos a liberdade de coletar nossos favoritos nesta coleção.

Carrinho Plano

Não há como negar a popularidade do design plano. Funciona para todos os tipos de sites e ajuda os designers a se concentrarem mais na usabilidade do que na estética.

É por isso que esse carrinho plano é um excelente recurso para quem cria uma página de checkout de comércio eletrônico. As cores são fáceis de atualizar e os recursos da interface funcionam da mesma forma, independentemente do estilo de layout.

Eu não acho que o design plano seja a solução para todos os projetos, mas no cenário certo essa caneta pode funcionar bem como um modelo inicial.

Veja o Pen Flat Cart [codepen comp] por Will Paige

IU sem tabela

Muitas páginas de checkout usam tabelas para organizar os dados, mas este exemplo de Alex Rodrigues usa DIV .

É totalmente responsivo, portanto, o layout deve ficar ótimo, independentemente do dispositivo que você estiver usando. Cada linha contém dados suficientes para reestilizar corretamente e manter tudo organizado, mesmo em telas super pequenas. E o código CSS usa o Compass para economizar tempo junto com o Google Fonts gratuito para um pouco de estilo.

Veja o carrinho de compras sem mesa responsivo à caneta por alex rodrigues

Delicioso carrinho de compras

Não consigo imaginar isso funcionando em um site real, mas como um experimento de UI/UX é bem legal. O auto-intitulado Delicious Shopping Cart funciona como uma padaria/doceria online com fotos de diferentes sobremesas.

Você pode mover o cursor para a esquerda/direita para avançar pelo carrossel ou deslizar em um dispositivo móvel. Cada item tem ícones de mais/menos para adicionar itens ou removê-los do seu pedido, além de um ícone 'X' para removê-lo totalmente do seu carrinho.

A coisa toda é construída em Sass, Slim e jQuery, então é um projeto de frontend e tanto! Se você deseja dissecar algum código excelente, vale a pena salvar este exemplo.

Veja o carrinho de compras Pen Delicious de Didier

Design responsivo

Aqui está outra interface simples e responsiva de carrinho de compras construída em Sass e sem mesa.

Eu gosto desse checkout responsivo um pouco mais do que os outros porque os pontos de interrupção parecem mais naturais. Mesmo em telas menores, os itens do carrinho não parecem apertados ou deslocados.

Todos os botões “remover” funcionam por meio de JavaScript e os campos de entrada numérica atualizam automaticamente os preços. Isso é ótimo para uma página de carrinho de front-end onde o comprador pode querer aumentar as quantidades antes de pagar e ver uma estimativa dos custos totais.

Veja o carrinho de compras responsivo à caneta de Justin Klemm

cesta de compras jQuery

Esta caneta funciona mais como um wireframe do que uma página de checkout completa, mas é perfeita como ponto de partida. O desenvolvedor Khurram Alvi criou este carrinho de compras responsivo com HTML/CSS básico e um pouco de jQuery.

É totalmente responsivo e as entradas de quantidade funcionam como você esperaria. Uma coisa legal é a simplicidade do design deste carrinho. Ele não impõe cores, fontes ou texturas no layout. Qualquer pessoa que queira construir um novo carrinho do zero pode começar aqui porque é fácil de construir e reestruturar.

Veja a cesta de compras jQuery responsiva à caneta por Khurram Alvi

Carrinho de Desafio

De vez em quando, novos desafios do CodePen aparecem pedindo aos desenvolvedores que criem interfaces diferentes, como páginas de inscrição ou janelas modais. Esta caneta de Ziga Miklic veio de um desafio para UIs de carrinho de compras e é uma obra-prima de desenvolvimento de frontend.

Ao adicionar/remover itens do carrinho, você notará que os preços são atualizados automaticamente com uma pequena animação deslizante. Você também pode clicar em qualquer imagem do produto para removê-lo do carrinho com facilidade. Esses pequenos recursos adicionam muito à interface e facilitam a clonagem.

Até mesmo a função de checkout tem seu próprio recurso animado, embora não esteja conectado a nada no back-end.

Veja o carrinho de compras da caneta [ CodePen Challange ] por Ziga Miklic

IU do carrinho deslizante

Widgets com guias permitem adicionar conteúdo em uma única página e dar aos usuários o poder sobre esse conteúdo. Neste carrinho deslizante, você pode alternar entre o próprio carrinho e uma lista de itens “favoritos” salvos.

Nenhum dos recursos de checkout realmente funciona, então você não pode adicionar/remover itens ao carrinho como favorito. Mas os itens da interface estão no lugar, então um pouco de mágica JavaScript resolveria isso. Ainda assim, estou impressionado com a aparência deste carrinho e a interface de guia única, mas utilizável.

Veja o carrinho de compras da caneta (responsivo) por Alex

Loja e carrinho dinâmicos

Misturar a loja e o carrinho de compras em uma interface é um trabalho difícil, mas Olivia Cheng fez isso nesta caneta.

Ele usa miniaturas largas em uma grade configurada com um botão “adicionar ao carrinho” ao passar o mouse. Clique aqui para adicionar o item acima com preços de atualização automática. Um recurso exclusivo é a quantidade adicionada na parte superior da miniatura do item. Isso pode ficar confuso em um carrinho real, mas se os números fossem um pouco menores, essa seria uma ótima maneira de economizar espaço.

Veja o carrinho de compras e a loja com caneta deslizante de Olivia Cheng

Limpar carrinho de compras

O desenvolvedor Bart Veneman criou este carrinho de compras limpo como um modelo de interface simples. Ele calcula automaticamente o preço total e inclui até impostos perto do botão de checkout.

Todos esses recursos dinâmicos funcionam através de JavaScript e surpreendentemente esta caneta usa Zepto sobre jQuery. Isso é ótimo para desenvolvedores que preferem a biblioteca Zepto, mas na verdade qualquer um pode pegar esse código e retrabalhá-lo para se adequar a qualquer modelo.

Veja o carrinho de compras da caneta por Bart Veneman

Carrinho Simples com Vue.js

A codificação de front-end com Vue.js torna a modelagem muito mais simples. E esta caneta é um exemplo de um carrinho dinâmico praticamente construído sobre uma base JavaScript.

O carrinho é atualizado automaticamente a cada clique para que você possa adicionar/remover itens e ver os resultados instantaneamente. O botão superior direito abre seu carrinho atual em uma janela modal usando o componente modal do Bootstrap.

Se você gosta da sintaxe Vue.js, então este modelo é um ótimo lugar para começar a construir um carrinho de compras. É fácil de personalizar e deve funcionar bem em todos os navegadores.

Veja o carrinho de compras Pen VueJS 2 Simples de Cristian Matos

Carrinho de domínio

Aqui está um dos meus designs de carrinho de compras favoritos, modelado após um registrador de domínio. O codificador Jesse Bilsten foi detalhado com esta interface, incluindo uma seção de pagamento e uma área de T&C necessária.

Você deve clicar no botão "Concordo" antes de concluir o processo de checkout. É um recurso menor, mas valioso para alguns sites de comércio eletrônico, e eu realmente gosto do layout de duas colunas. E esse design é totalmente responsivo para que você possa cloná-lo para uso em praticamente qualquer sistema de comércio eletrônico.

Veja o carrinho de compras responsivo à caneta – Brand v01 por Jesse Bilsten