coastdigitalgroup/coastai-skills

Sistema de UI de Carrinho de Compras

Propósito

O Sistema de UI de Carrinho de Compras fornece um framework visual e estrutural acessível e de alta conversão para carrinhos de compras de e-commerce direto ao consumidor (DTC) e multicanal. Operando como a ponte transacional essencial entre a descoberta de produtos (PDP) e a finalização da compra, o carrinho de compras deve lidar elegantemente com atualizações de pedidos, incentivos promocionais, cross-sells e indicadores de progresso de frete em tempo real.

Uma abordagem de design sistemática resolve pontos de atrito padrão do carrinho — como mudanças inesperadas de layout (CLS) quando os itens são atualizados, resumos de itens ilegíveis, controles interativos ocultos em dispositivos móveis, selecionadores de quantidade inacessíveis e a falta de um caminho psicológico claro para o checkout. Este sistema garante estilo consistente, microinterações suaves, resiliência de layout e adesão estrita às regras de acessibilidade WCAG AA.

Casos de Uso

• Portais de E-commerce e Direct-to-Consumer (DTC): Plataformas de varejo de alto volume que utilizam mini-carrinhos persistentes e revisões de checkout dedicadas.
• Pedidos de Catálogo B2B e Atacado: Mesas de pedidos em massa com listas tabulares, seletores de múltiplos SKUs e ferramentas de adição rápida.
• Mecanismos de Reserva de Serviços e Experiências: Organização de ingressos de vários dias, reservas, complementos de aluguel ou passes para eventos.
• Agregadores de Software, SaaS e Bens Digitais: Agregação de licenças, complementos de serviço e níveis de assinatura antes do pagamento final.

Quando NÃO Usar

• Checkouts de Item Único ou Um Clique: Para plataformas que ignoram o carrinho diretamente para o checkout (ex: Apple Pay no PDP), use checkout-flow-optimization e product-detail-layout-system.
• Navegação Primária de Produtos: Para exibir cartões de itens ou resultados de lista, use card-ui-system e filter-and-sort-system.
• Comparação de Produtos Lado a Lado: Para comparar planos ou recursos de produtos distintos, use comparison-matrix-system ou pricing-table-ui-system.
• Pedidos em Massa via CSV: Para painéis de entrada administrativa tabular altamente especializados, use data-table-ui-system.

Entradas

1. Tokens de Design de E-commerce: Escala tipográfica global, paleta de cores da marca (CTA primário, vermelho de aviso, verde de sucesso), escala de espaçamento fluida e elevações de sombra de superfície.
2. Metadados de SKU do Produto: Regras de proporção de imagem, restrições de título, strings de variação (ex: "Cor: Ônix / Tam: G"), preço unitário e estados de venda/desconto.
3. Configurações de Lógica e Fulfillment: Limiares de frete grátis, regras de cupom de desconto, estimativas de frete e limites de quantidade.
4. Dados de Catálogo de Cross-Sell: Recomendações mapeadas pelos itens atuais do carrinho para preencher módulos de compra por impulso.
5. Limites de Viewport Móvel: Dimensões do dispositivo, diretrizes de alvo de toque e restrições de área segura do ambiente.

Saídas

1. Gaveta Deslizante de Mini-Carrinho (Painel Lateral Deslizante): Blueprint de grade em nível de componente para visão geral rápida do carrinho e checkout de caminho rápido mobile-first.
2. Página de Carrinho Dedicada (Grade de Página Inteira): Layout espacial de 2 colunas (Lista Principal do Carrinho + barra lateral de Resumo do Pedido) para revisões profundas.
3. Arquitetura de Linha de Item do Carrinho: Especificações detalhadas para espaçamento, layouts, controles de quantidade interativos e elementos de exclusão dentro de uma única linha.
4. Barra de Progresso de Frete Grátis e Promocional: Layout espacial mostrando feedback em tempo real e limites de mensagens dinâmicas.
5. Roteamento de Acessibilidade e Especificação para Leitores de Tela: Diretrizes detalhadas para armadilhas de foco, ordem de tabulação do teclado, tabindex móvel, anúncios aria-live e regras de alvo de toque.

---

Fluxo de Trabalho

1. Definir a Mecânica Espacial: Gaveta de Mini-Carrinho vs. Página de Carrinho Dedicada

Um design otimizado deve suportar ambos os formatos visuais de alto impacto, dependendo do tamanho da tela e do contexto:

• A Gaveta de Mini-Carrinho (Desktop e Móvel): Desliza da borda direita, cobrindo os 400px–460px direitos da tela no desktop e 100% da tela no móvel. Ela sobrepõe a viewport principal atrás de um fundo semitransparente (background: rgba(0,0,0,0.5)). Use um layout elástico dividindo a gaveta em três áreas fixas:
  • Cabeçalho (Altura fixa): Título do carrinho (com contagem), botão fechar (✕) e rastreador de progresso de frete grátis.
  • Itens de Linha Roláveis (Flex grow/rolagem automática): A lista de itens adicionados (overflow-y: auto;).
  • Rodapé (Altura fixa, ancorado): Subtotal, aviso de imposto/frete, mensagem promocional e CTA de checkout proeminente.
• A Página de Carrinho Dedicada (Desktop >1024px): Usa um layout de grade assimétrica de 2 colunas:
  • Coluna Esquerda (Ocupa 60–65%): Contém uma visão limpa, alinhada à esquerda, semelhante a uma tabela, dos itens do carrinho, incluindo ações de remoção em massa e estados vazios.
  • Coluna Direita (Ocupa 35–40%): Abriga o cartão de Resumo do Pedido fixo (position: sticky; top: var(--header-height);), contendo cálculos de subtotal, frete estimado, entrada de código de cupom, crachás de pagamento dinâmicos e o botão principal de Checkout.

2. Projetar a Arquitetura da Linha de Item do Carrinho

Cada linha no carrinho representa uma hierarquia em miniatura. Padronize o fluxo de layout dentro de um contêiner de 100% de largura usando CSS Flexbox ou Grid:

+-------------------------------------------------------------+
| [Miniatura]  [Título do Item]                    [Excluir X]|
| (64x64px)    Tam: M / Cor: Azul                            |
|                                                             |
|              [-] [ 1 ] [+]                     [Preço]      |
|              (Entrada de Quantidade)          R$ 120,00     |
+-------------------------------------------------------------+

• Miniatura do Produto: Âncora usando um contêiner de proporção fixa compacto (64x64px até 96x96px no máximo) com border-radius: var(--radius-s) e object-fit: cover;. Certifique-se de que o texto alternativo esteja presente, mas seja descritivo (ex: alt="Jaqueta de Lã em Azul Marinho").
• Pilha de Metadados: Layout vertical padrão contendo:
  • Título: Negrito, neutro-escuro, vinculado ao PDP.
  • Atributos de variação: Cinza suave, tamanho de fonte menor (ex: 12px/0.75rem).
  • Preço unitário: Sutil se for um único item, mas enfatizado se a quantidade > 1.
• O Seletor de Quantidade Acessível: Certifique-se de que os botões sejam maiores que o texto típico. Envolva a entrada de valor em bordas visuais planas.
  • Botão Decrementar (-), Caixa de Entrada de Quantidade (texto ou número), Botão Incrementar (+).
  • Certifique-se de que o botão decrementar se converta em um ícone de lixeira visível se a quantidade for 1, indicando que clicar nele removerá o item do carrinho.
• Preço da Linha: Alinhe à direita inferior da linha. Se o item tiver desconto, renderize o preço original riscado em cinza claro diretamente adjacente ao preço de venda ativo (renderizado em vermelho de alto contraste ou negrito da marca).
• O Botão Excluir: Colocado no canto superior direito da linha. Utilize um aria-label="Remover [Nome do Item] do carrinho" explícito para evitar que leitores de tela anunciem apenas "botão" ou "X".

3. Construir o Mecanismo de Progresso de Frete Grátis e Promocional

Incentive Valores Médios de Pedido (AOV) mais altos, fornecendo aos usuários feedback instantâneo sobre as metas de fulfillment:

• Barra de Progresso Visual: Use um contêiner horizontal (height: 8px) com pontas arredondadas, estilizado em cinza claro, que é preenchido da esquerda para a direita usando uma cor de destaque brilhante (ex: verde, azul) à medida que o subtotal do usuário se aproxima da meta.
• Microcópia Dinâmica: Escreva mensagens claras e orientadas para a ação acima ou abaixo da barra:
  • Abaixo do limite: "Você está a R$ 15,00 do Frete Grátis! [Adicione mais]"
  • Acima do limite: "🎉 Parabéns! Você desbloqueou o Frete Grátis!"
• Localização do Layout: Posicione o mecanismo de progresso no topo da gaveta do mini-carrinho e da página principal do carrinho, para que permaneça visível acima da dobra.

4. Otimizar o CTA de Checkout e o Rodapé do Resumo do Pedido

A âncora de checkout é o ponto focal da experiência do carrinho de compras. Certifique-se de que ela se apresente como um bloco sólido e confiável:

• Lista de Cálculos: Renderize subtotal, descontos aplicados (texto verde com crachá de código promocional, ex: SUMMER20 [x]), frete estimado (ou "Calculado no checkout") e total estimado final usando layouts de lista de chave-valor com líderes de ponto claros ou grades alinhadas.
• Botão de Checkout Primário: Alto contraste, largura total (100%), com tipografia em negrito. Deve exibir indicadores de carregamento claros quando clicado (ex: convertendo o texto do rótulo "Checkout Seguro" em um spinner) para evitar cliques duplicados.
• Crachás de Pagamento Suportados: Crachás de ícones de pagamento em escala de cinza suave ou cor padrão (Visa, Mastercard, Amex, PayPal, Apple Pay, Klarna) diretamente abaixo do botão de checkout para estabelecer confiança.

5. Criar Adaptação de Layout Fluido Responsiva

Os carrinhos de compras são muito usados em dispositivos móveis. Projete os pontos de interrupção com extrema precisão:

• Sobreposição Móvel do Mini-Carrinho: Na largura da viewport <768px, force o mini-carrinho a ocupar 100vw. Coloque o gatilho de fechar explicitamente em um alvo grande e fácil de tocar no canto superior esquerdo ou superior direito.
• Empilhamento de Itens da Página do Carrinho: Em viewports móveis, a linha horizontal é recolhida:
  • Miniatura do produto e título ficam lado a lado.
  • O Seletor de Quantidade e o Preço são recolhidos abaixo do título, com a quantidade alinhada à esquerda e o preço alinhado à direita no mesmo eixo horizontal.
• Gaveta de Checkout Móvel Fixa: Em páginas de carrinho móveis, implemente um rodapé inferior fixo que ancora o subtotal e o CTA de checkout com segurança acima dos elementos da UI do navegador, utilizando padding-bottom: env(safe-area-inset-bottom);.

6. Estabelecer Roteamentos de Foco do Teclado e Gatilhos ARIA Live

Um carrinho inacessível impede que usuários de leitores de tela e apenas teclado finalizem as compras.

• Armadilha de Foco do Mini-Carrinho: Quando a gaveta do mini-carrinho é aberta:
  1. Acione o foco imediatamente para o primeiro elemento interativo (geralmente o botão Fechar ou o título do primeiro item).
  2. Implemente uma armadilha de foco, impedindo que os usuários usem a tecla Tab para elementos ocultos atrás do fundo.
  3. Capture a tecla escape (Esc) para fechar a gaveta. Retorne o foco de forma limpa ao botão de gatilho que originalmente abriu o carrinho (ex: Ícone do Carrinho no Cabeçalho).
• Anúncios Dinâmicos (aria-live): Alternar a quantidade, excluir um item ou aplicar um cupom deve comunicar instantaneamente as atualizações por meio de um elemento invisível aria-live="polite". Os leitores de tela devem anunciar: "Quantidade da Jaqueta Ônix atualizada para dois. Subtotal atualizado para duzentos e quarenta reais."
• Anéis de Foco: Evite contornos de navegador padrão; implemente um indicador de foco personalizado, de alto contraste e sem recorte ao redor de todos os controles interativos no carrinho.

---

Regras de Decisão

Gatilhos de Página de Carrinho Dedicada vs. Gaveta de Mini-Carrinho

Evento Gatilho	Padrão de Resposta UX Ideal	Justificativa de Design
Usuário adiciona item do PDP	Abrir Gaveta de Mini-Carrinho deslizando	Confirma a adição ao carrinho com sucesso, atualiza o subtotal instantaneamente, fornece feedback imediato, mas mantém o usuário no PDP para continuar comprando.
Usuário clica no ícone global do carrinho no cabeçalho	Alternar Gaveta de Mini-Carrinho (se contagem de itens > 0) / Navegar para Página de Carrinho (Opcional)	Acesso rápido para editar a lista de itens sem carregar uma nova página. Se o catálogo for altamente complexo (ex: centenas de peças B2B), navegue diretamente para a Página de Carrinho Dedicada.
Carrinho está vazio (0 itens)	Mostrar Estado Vazio Embutido com CTAs	Em vez de uma página em branco ou fechar a gaveta, renderize uma mensagem clara (ex: "Seu carrinho está atualmente vazio") acompanhada por 3–4 links de compras primários direcionados e baseados em categorias.

Seleção de Estilo de Entrada de Quantidade

Estilo de Interface	Aplicação de Caso de Uso	Justificativa de Design
Stepper de Botão [-] [ 1 ] [+]	DTC, Varejo, Vestuário, e-commerce padrão	Interação mais fácil de toque único em dispositivos móveis, evita erros de digitação, incremento simples.
Campo de Entrada de Texto Nativo	Planilhas de pedidos B2B pesados, quantidades de atacado	Permite que o usuário digite grandes números arbitrários (ex: 150) diretamente, em vez de clicar 150 vezes.
Menu Suspenso Padrão (Qtd: 1) v	Itens de alto valor, eletrônicos, assinaturas de limite de quantidade única	Limita as compras a escalas de quantidade predefinidas (ex: máximo 10) e evita solicitações de inventário de alta contagem não tratadas.

---

Restrições

• Acessibilidade (Mínimo WCAG AA):
  • SC 2.4.7 Foco Visível: A gaveta do carrinho deve manter contornos de foco altamente visíveis nos botões fechar, âncoras de título, steppers e entradas.
  • SC 2.5.8 Tamanho do Alvo: Os alvos de toque para os botões de incremento (+) e decremento (-) de quantidade, lixeiras de exclusão e links de remoção de promoção devem ter pelo menos 24x24px no desktop e 44x44px em viewports móveis.
  • SC 1.1.1 Conteúdo Não Textual: Toda imagem deve ter texto alternativo claro. Fundos decorativos dentro de estados vazios devem ser ignorados (role="presentation" ou alt="").
• Prevenção de Mudança Cumulativa de Layout (CLS):
  • Padronize alturas de linhas de itens ou reserve alturas mínimas de estado de esqueleto durante estados de carregamento.
  • Cálculos promocionais dinâmicos não devem empurrar o botão CTA de checkout para fora da tela ou dobrar abruptamente.
• Bloqueio de Rolagem de Sobreposição Dinâmica:
  • Abrir a sobreposição da gaveta do mini-carrinho deve bloquear a rolagem de fundo no elemento body principal (overflow: hidden; aplicado ao <body>). Isso evita rolagem dupla e artefatos de navegação saltitantes.

---

Padrões Comuns de Falha

• O Fechamento Fantasma do Carrinho: Fechar a gaveta ou clicar fora dela redefine completamente o índice de foco, fazendo com que os usuários de teclado voltem ao topo da página subjacente e forçando-os a usar Tab novamente em tudo.
• O Alvo de Exclusão Críptico: Projetar ícones de lixeira ou gatilhos de exclusão "X" como símbolos de texto sem rótulo, fazendo com que os leitores de tela exibam "botão" ou "botão sem rótulo", impedindo que os usuários removam itens do carrinho.
• A Deriva de Atualização Atrasada: Permitir um atraso entre clicar em + e atualizar o preço sem exibir um spinner de carregamento. Se o usuário clicar em + três vezes rapidamente, o preço fica atrasado em relação à ação e leva a totais imprecisos.
• O Teclado Móvel Bloqueado: Centralizar uma entrada de cupom na página de carrinho dedicada em uma pilha de layout que fica completamente bloqueada ou empurrada para fora da tela visível quando o teclado do dispositivo móvel é aberto, impedindo que os usuários apliquem descontos.