Carrinho

O carrinho é transversal ao catálogo. O trigger com badge de contagem deve estar sempre visível quando o usuário está navegando em contextos de compra. A seção de totais e o CTA de checkout são fixos no rodapé do painel.

Carrinho — painel lateral com itens, totais e CTA de checkout

O carrinho abre como drawer à direita sobre o catálogo. Header com a contagem, itens com stepper e remover, e a seção de totais + 'Criar requisição' (split) fixos no rodapé do painel.

Boas Práticas

O Carrinho reúne itens do catálogo antes de virar uma requisição/pedido — compra em lote, com quantidades e destino de compra.

Quando usar

Reunir itens do catálogo antes de gerar uma requisição/pedido — compra em lote.

Ajustar quantidades e o destino de compra antes de efetivar.

Quando a compra é multi-item e/ou multi-fornecedor.

Quando não usar

Para um único item com fluxo direto — "Solicitar" na própria linha pode bastar.

Como lista de desejos persistente — use Favoritos/Listas.

Para item fora do catálogo — use o fluxo de item avulso no documento.

Fazer e evitar

Fazer

Fixar a seção de totais e o CTA no rodapé do painel

Atualizar totais em tempo real ao alterar quantidades

Exibir toast com opção "Desfazer" ao remover um item

Usar badge no trigger para indicar quantidade de itens

Mapear o Empty State do carrinho vazio (com CTA para explorar o catálogo)

Dar estado de loading ao CTA "Finalizar pedido" durante o processamento

Evite

Abrir modal de confirmação para alterar quantidade — use controle inline

Ocultar o total final antes do checkout

Rolar o painel para cima ao adicionar um novo item

Exibir CTA de finalizar desabilitado sem explicar o motivo

Anatomia

O carrinho tem quatro zonas funcionais — trigger, painel, item e seção de totais.

Adicionar um item (a partir do catálogo) dá um retorno imediato: uma micro-interação confirma que entrou no carrinho e a contagem no trigger sobe — sem forçar abrir o painel. Toda ação precisa de um retorno visível; a pessoa segue comprando com a certeza de que deu certo.

Trigger

Ícone de carrinho na navegação com badge de quantidade de itens.

Componentes

Ícone de carrinho
Badge com contagem de itens

Regras

Badge visível sempre que há itens no carrinho
Badge zera ao finalizar o pedido ou limpar o carrinho

Painel do carrinho

Drawer lateral com itens adicionados, totais e CTA de checkout.

Componentes

Header com título e botão fechar
Lista de itens
Seção de totais
CTA de finalizar pedido

Regras

Abre como drawer à direita — não bloqueia o conteúdo principal
Lista de itens rolável quando há muitos produtos
Seção de totais fixada no rodapé do painel (sempre visível)
CTA de finalizar pedido sempre visível no rodapé

Item do carrinho

Linha de produto — imagem, nome, quantidade, preço e ação de remover.

Componentes

Thumbnail do produto (quando disponível)
Nome e código do produto
Controle de quantidade (- / valor / +)
Preço total do item
Botão remover

Regras

Controle de quantidade inline — não abrir modal para alterar quantidade
Atualização de totais em tempo real ao alterar quantidade
Botão de remover com ícone de lixeira, sem confirmação (reversível via toast)

Seção de totais

Subtotal, descontos e total final — fixada no rodapé do painel.

Criar requisição

Componentes

Subtotal
Desconto (quando aplicável)
Total final em destaque
CTA primária "Finalizar pedido"

Regras

Fixada no rodapé do painel — sempre visível independente do scroll
Total final em destaque visual (tamanho e peso maior)
CTA "Finalizar pedido" sempre ativa quando há itens no carrinho

Estados

Cinco estados do carrinho a serem mapeados no handoff.

Vazio

Painel aberto sem itens — exibe Empty State com CTA para explorar catálogo

Com itens

Lista de itens + totais + CTA de finalizar

Atualizando quantidade

Loading inline no item ao alterar quantidade

Removendo item

Animação de saída do item + toast com "Desfazer"

Finalizando pedido

CTA com loading, campos desabilitados durante o processamento

Ícones do contexto

ÍconeTokenSignificado

esta ação

Veja tambémGenius Chat