Cópia do starter ecomplus/store
tematizada para papelaria e material de escritório, atendendo empresa e
consumidor final.
Este nicho ainda não existe no site institucional. Não há marca em
src/config/brands.tsnem página em/segmentos/. O posicionamento foi proposto, não portado. Nome, logo e domínio são placeholders.
Papelaria de escritório não é compra de descoberta. O mesmo comprador pede quase a mesma lista todo mês, e a navegação por vitrine é atrito puro para ele — são doze cliques para repetir um pedido que ele já sabe de cor.
As duas são B2B, e por isso o risco de ficarem parecidas é real — foi exatamente o que aconteceu entre Bitola e Circuito. O que as separa é o eixo do problema:
| Bitola | Pauta | |
|---|---|---|
| Pergunta do cliente | que peça serve? | como repito o pedido? |
| Resolve | especificação | repetição |
| Elemento central | busca no header | caixa de texto na home |
| Card | ficha técnica | código + quantidade |
| Peça | O que muda |
|---|---|
sections/PedidoRapidoSection.astro |
Cola a lista de códigos e pronto — troca a navegação inteira por um textarea. |
components/ProductCard.vue |
Código selecionável de um clique (select-all), que alimenta o pedido rápido. |
components/ProductCard.vue |
Seletor de quantidade no card, não na ficha. |
components/ProductCard.vue |
Linha de preço por volume. |
assets/style.css |
.ui-grifo — marca-texto real, com box-decoration-break: clone. |
Aceita CODIGO, QTD, CODIGO;QTD, CODIGO QTD e CODIGO sozinho. A
quantidade é sempre o último número da linha — código de papelaria costuma
ter dígito no meio (PAP-A4-75G), e pegar o primeiro transformaria "A4" em
quantidade 4.
.ui-grifo desenha um traço que para em 0.62em, para sentar na base da
letra e deixar a ascendente livre — grifo real não cobre a palavra inteira. O
box-decoration-break: clone é o que faz o traço acompanhar a quebra de linha;
sem ele um grifo de duas linhas vira um retângulo atravessando o parágrafo.
Se o amarelo virar fundo de bloco, a marca perde a referência ao marca-texto.
| O quê | Onde | Como ligar |
|---|---|---|
| "a partir de 12 un. o preço cai" | ProductCard.vue |
Preço por quantidade (kit/atacado) cadastrado |
| Resultado do pedido rápido | PedidoRapidoSection.astro |
Ver abaixo |
O pedido rápido não adiciona ao carrinho. O parser é real e roda no cliente, mas o que ele faz ao final é montar uma busca. Duas razões: numa demo em build estático o carrinho não fecha, e resolver código → produto exigiria um GET por linha na API (numa loja de verdade, um endpoint de lote).
Ligar de verdade = trocar o window.location do final por uma chamada a
/api/products?sku=… e um addToCart por item resolvido.
A própria seção diz isso ao visitante. Manter.
/p/pedido-rapidoe/p/preco-por-volumenão existem. As duas são linkadas no pitch bar. Criar as extra-pages antes de publicar — mesmo defeito que a Raia teve na primeira rodada.
npm i
npm run dev # http://localhost:3000
BUILD_OUTPUT=static npx cloudcommerce build --codebase ssr/s/<termo>não funciona no build estático — usar/s?q=<termo>.- Input dentro de
<a>navega ao clicar — por isso o seletor de quantidade e o código comselect-allficam fora doALink, e a moldura do card passou para a div que envolve os dois. - Ícone que não casa some em silêncio no UnoCSS. Na dúvida, forma
prefixada:
i-lucide-<nome>. cloudcommerce buildregenera ofirebase.json— buildar primeiro, escrever a config depois.