Usando o PDV
Abertura da tela
A rota/pdv carrega, no servidor, os produtos, categorias, cores e clientes do tenant. A interface utiliza SWR (usePosData) para manter esses dados reativos no client sem recarregar a página.
Grade de produtos
A grade exibe até 24 produtos por página. Cada card apresenta:- Imagem do produto.
- Nome.
- Menor preço promocional ou a indicação “Sob consulta”.
- Total de unidades em estoque (soma das variações).
- Quantidade de cores/variações.
- Selos de promoção e “Estoque baixo”.
Filtros e ordenação
- Busca: por nome do produto, SKU, cor ou nome da variante.
- Categoria: filtro por categoria ativa.
- Cor: filtro por cor da variante.
- Ordenação: destaque, preço crescente/decrescente, nome A–Z/Z–A e maior estoque.
Selecionando uma variação
Ao clicar em um card, abre o seletor de variação (PosVariantPicker). Ele exibe:
- Imagem da variação selecionada.
- Preço unitário, com desconto de promoção quando houver.
- Quantidade em estoque da variação.
- Grid com as demais variações, mostrando imagem, label e preço.
- Tabela de preços por quantidade, quando o produto possui markup tiers.
- Controle de quantidade, respeitando o mínimo definido pelos tiers.
Importante: A quantidade inicial respeita o mínimo da tabela de markup (getMinQty). Se o produto usa markup tiers, o preço unitário pode mudar conforme a quantidade.
Carrinho
- Adicionar o mesmo produto/variação unifica as quantidades.
- No painel lateral é possível:
- Aumentar ou diminuir a quantidade.
- Adicionar observações de customização por item.
- Remover um item.
- Limpar toda a sessão.
Dica: A sessão é salva nolocalStoragecom a chavepos-session-v1e restaurada automaticamente quando o usuário recarrega a página.