Pisca

Projeto de loja online para uma casa de reparação de telemóveis e informática que também vende equipamentos recondicionados e acessórios. O pedido era curto: menu no topo, carrossel, filtros à esquerda, simples, em amarelo e branco. Ficou com o desenho de uma loja de eletrónica: grelha rigorosa, cantos quase retos, linhas finas e o amarelo usado com intenção, na barra das categorias, nos botões de compra e nos destaques, sempre com texto escuro por cima, para se ler bem. O cabeçalho tem três faixas: uma fina e escura com o diagnóstico gratuito e o telefone, a principal com o logótipo, a pesquisa e o carrinho, e a barra das categorias, com as marcas de cada uma num submenu. A pesquisa procura por nome, marca, categoria e características e sugere produtos, com fotografia e preço, enquanto se escreve.

A página inicial é uma montra: carrossel ao lado de dois destaques fixos, as vantagens da casa, um mosaico de categorias com fotografia, filas de produtos que deslizam (em destaque, novidades, recondicionados e as categorias escolhidas), a faixa das reparações, sem preços porque são sob orçamento, as marcas e as lojas com o horário. A listagem tem os filtros à esquerda (categoria, marca, preço, estado e disponibilidade), ordenação e paginação; cada escolha fica no endereço, por isso dá para partilhar uma pesquisa e o botão de voltar desfaz o último filtro. A ficha de produto tem galeria, preço, disponibilidade, as características em tabela e uma caixa que explica como funciona a encomenda. O carrinho guarda-se no browser e não há pagamento online: a pessoa deixa o nome e o telemóvel, escolhe levantar na loja ou envio, e a loja confirma depois por telefone ou WhatsApp. No telemóvel, as categorias abrem numa gaveta e os filtros num painel por cima da página.

Por trás há um backoffice pensado para ser usado ao balcão e no telemóvel, com as secções numa barra em baixo. Gere os produtos (fotografias, preço, stock, características, destaque, ativar e desativar), as categorias, com a fotografia do mosaico e a fila na página inicial, as marcas, os diapositivos do carrossel e os destaques ao lado dele, e as encomendas, que seguem o percurso nova, confirmada, paga e enviada ou levantada, com nota interna e botões para ligar ou abrir o WhatsApp do cliente. No site a sério os dados estão numa base de dados Postgres, os preços e o stock são confirmados no servidor quando a encomenda é feita, e o painel abre com palavra-passe cifrada (bcrypt), sessão em cookie e limite de tentativas de entrada.

A demonstração aqui ao lado é uma cópia estática, sem base de dados, com marca e clientes fictícios e um catálogo de exemplo: os preços e o stock são inventados e as fotografias são de banco de imagens. A pesquisa e os filtros funcionam no browser, a encomenda é simulada e não é enviada, e o backoffice abre sem palavra-passe, com dados de exemplo. O que se muda no backoffice (esconder um produto, trocar a ordem do carrossel) reflete-se na loja enquanto o separador estiver aberto.