Cesta Modelos HTML

Use modelos HTML de carrinho prontos para lojas virtuais

Um modelo HTML de carrinho cuida do trabalho que as pessoas costumam subestimar: definir quais elementos existem e como estão aninhados. As linhas de produtos, os campos de quantidade e os links de remoção já estão presentes na marcação. O resumo do pedido e o botão de checkout também têm seus próprios espaços, permitindo que o lojista comece adicionando os produtos reais.

Como as linhas de produtos se repetem

A maior parte de um carrinho é uma pequena unidade repetida várias vezes. Um comprador com um único item e outro com dez itens veem a mesma estrutura de linha; portanto, essa linha individual importa muito mais do que uma demonstração com dois produtos de exemplo sugere. O preço e a quantidade ficam dentro dela, enquanto o total pertence ao pedido completo e fica fora da lista repetida.

Uma linha bem estruturada geralmente mantém estes itens agrupados:

1. um contêiner de produto com a imagem, o título e a variação escolhida;
2. um campo de quantidade cujos controles de atualização e remoção pertençam exatamente àquele item;
3. locais separados para o preço unitário e o subtotal da linha, com espaço para um preço anterior.

Blocos fora da lista de itens

Abaixo ou ao lado das linhas ficam as áreas que descrevem o pedido como um todo. Em um modelo sólido, cada uma delas é uma seção própria na marcação, fácil de localizar ao editar o arquivo posteriormente.

Procure por estes blocos fora da lista de repetição:

1. um resumo do pedido que reúne o subtotal, eventuais linhas de desconto ou frete e o total final;
2. uma área de checkout configurada como formulário ou bloco de ação próprio, oferecendo ao pedido uma saída clara para o pagamento;
3. uma seção de carrinho vazio que substitui as linhas por uma mensagem curta e um link de volta ao catálogo.

Uma pequena área de aviso para mensagens sobre itens fora de estoque também é muito útil, já que adicionar uma posteriormente exige espremer uma nova marcação entre blocos existentes.

Quais partes já estão codificadas

O Nicepage oferece suporte a sites de e-commerce com saída em HTML, e o carrinho faz parte dessa funcionalidade de loja. A documentação oficial Carrinho de Compras para E-Commerce explica como o recurso de carrinho de compras do Nicepage funciona e como ele se integra a um projeto de e-commerce.

Antes de comparar demonstrações, liste o que sua loja precisa exibir no carrinho. Se os clientes escolhem variações e aplicam descontos, cada uma dessas opções precisa de uma área pronta na marcação. Um modelo sem esses elementos geralmente exige a reestruturação de cada item de linha após a conexão do catálogo. Uma demonstração pode não se parecer em nada com sua marca e, ainda assim, ser a base correta, desde que sua estrutura corresponda aos dados do seu pedido. O checkout é uma etapa separada, portanto o carrinho só precisa terminar com um bloco que transfira o pedido perfeitamente.