Lojas virtuais

Arquitetura

Uma arquitetura deliberadamente leve e “sem banco”: em vez de CMS e SQL, armazenamento em arquivos e uma integração com o Google Sheets funcionando como painel de conteúdo.

• A fonte de dados é a API do Google Sheets: uma planilha, uma aba por categoria. Um script PHP de sincronização puxa os dados pela API e salva em JSON — o responsável pelo conteúdo mantém o mix em uma planilha familiar e o site atualiza com um clique.
• Localização das imagens: durante a sincronização, as fotos externas dos produtos são baixadas para o servidor, convertidas em WebP e renomeadas pelo slug. Idempotente, com fallback em caso de falha.
• Uma camada de overrides: edições manuais feitas no painel (meta tags, ocultar produtos, ordenação) são aplicadas sobre os dados da planilha — a planilha continua sendo a fonte da verdade, mas qualquer campo pode ser sobrescrito localmente.
• Renderização do catálogo no servidor para linkagem interna correta e SEO; o JS no cliente cuida apenas dos filtros e da ordenação.

Principais funcionalidades

Catálogo e produtos: 9 categorias, um único template no servidor para a página de produto e para o catálogo; páginas de produto com galeria, troca de fotos, especificações e blocos “produtos similares” e “desta coleção”; filtragem no cliente por preço (slider duplo), modelo, cor e coleção, além de ordenação.

Carrinho, pedido, pagamento: carrinho no cliente (localStorage), checkout e compra em um clique, pagamento online via Ozon SBP, página de status do pedido com polling do pagamento e notificações de novos pedidos no Telegram por bot.

Avaliações: formulário com upload de até 4 fotos e três camadas de proteção antispam (honeypot + verificação do tempo de preenchimento + captcha aritmético), armazenamento em JSON e moderação pelo painel.

Assinatura de novidades que guarda a base de inscritos e a exibe no painel.

Painel administrativo próprio

Totalmente feito à mão, com autenticação por sessões PHP.

• Dashboard com estatísticas por categoria.
• Sincronização manual com o Google Sheets em um clique, com log dos resultados.
• Visualização e edição dos produtos de cada categoria, incluindo meta tags (title/description) para SEO.
• Adição de produtos manuais sobre os sincronizados e edição do conteúdo da página inicial.
• Moderação de avaliações, lista de inscritos e log de sincronizações.
• Ferramentas de serviço: otimização de imagens em lote e limpeza de lixo do sistema.

Performance (PageSpeed Insights)

O site foi levado a 90–100 pontos de Performance no desktop e no mobile.

• Tamanhos de imagem responsivos: para cada foto de produto a sincronização gera tamanhos derivados (página de produto ~600px, miniatura ~160px) além do original usado na galeria — as imagens de produto ficaram 65–70% mais leves e as miniaturas sob a foto principal caíram de ~65 KB para ~2 KB.
• WebP em tudo — produtos e logotipos (via <picture> com fallback).
• Cumulative Layout Shift eliminado: width/height explícitos em todas as imagens.
• Priorização de carregamento: fetchpriority na imagem principal (LCP), lazy-load no restante, preconnect ao domínio de analytics e defer nos scripts.
• Contraste, títulos e fontes ajustados para o mobile.

SEO

• Schema.org / JSON-LD: Product + Offer (disponibilidade dinâmica e priceValidUntil), BreadcrumbList nas páginas de produto, Organization + WebSite na home.
• URLs canônicas, títulos keyword-first, hierarquia de headings correta, landmarks <main> e marcação semântica.
• sitemap.xml e robots.txt gerados automaticamente.
• Um feed YML para o Yandex.Direct (campanhas de produto, smart banners) que se atualiza sozinho após cada sincronização do catálogo.
• Acessibilidade: rótulos ARIA, contraste conforme WCAG e navegação acessível.

Analytics

Analytics de e-commerce completo no Yandex.Metrica: metas e dataLayer nas ações-chave (adicionar ao carrinho, pedido, compra em um clique, pagamento aprovado, assinatura), proteção contra disparo duplicado de metas, webvisor e clickmap. As compras são rastreadas com proteção contra duplicidade durante o polling do pagamento.

Por que o projeto é interessante

• Dependência zero de infraestrutura pesada: sem CMS, sem SQL, sem framework — e ainda assim uma loja completa, com pagamento, analytics e painel.
• Google Sheets como back-end de conteúdo — uma integração pouco convencional, mas confortável para o cliente.
• Performance como prioridade consciente: a otimização de imagens está embutida no pipeline de dados, não foi acoplada depois.
• Ciclo completo por uma única pessoa: arquitetura, back-end, front-end, integrações, SEO, deploy e manutenção.

Arquitetura

Uma estrutura de arquivos estática, sem SGBD e sem template engine: cada produto é uma pasta própria com seu index.php e suas imagens, os preços ficam em variáveis dentro de um único arquivo PHP compartilhado, as categorias (misturadores, sistemas de chuveiro, peças, acessórios) formam um catálogo de pastas aninhadas e os blocos comuns (cabeçalho, menu, rodapé) entram por includes. Uma abordagem propositalmente rústica, mas transparente e confiável para um mix de produtos estático.

Catálogo e produtos

Página do produto: galeria com zoom, escolha de cor alternando entre variantes, contador de quantidade que recalcula o preço na hora e breadcrumbs com marcação Schema.org. O carrinho é no cliente (localStorage), com cupons de desconto e frete grátis acima de um valor mínimo.

Pedidos e pagamento

Os pedidos ficam em uma estrutura de arquivos: cada um ganha uma pasta com seu status, os dados do cliente e uma página de pedido gerada. Pagamento online por cartão e via SBP pelo adquirente Tinkoff (sessão de pagamento pela API, redirecionamento para o checkout, troca automática de status ao confirmar o pagamento); como alternativa, por dados bancários (QR + PDF) ou dinheiro. O cliente recebe um código de rastreio e uma página de acompanhamento do status.

Painel administrativo

O mais simples possível: um único log de todos os pedidos, em que cada linha traz links de ação — “pago / concluído / fechado”. O gerente trata os pedidos direto pelo log: confirma o pagamento, muda o status, encerra. Exatamente a quantidade de funções que o fluxo exige, sem SGBD e sem interface pesada.

Avaliações

Importação de avaliações de marketplaces (Ozon, Wildberries): um parser lê páginas salvas, seleciona as avaliações com nota alta, limpa e remove duplicatas e as reúne em uma lista única que carrega mais conforme a rolagem. Os links levam de volta aos anúncios originais nos marketplaces.

Notificações

Ao finalizar o pedido, o cliente recebe um e-mail e um SMS com o número do pedido e o código de rastreio.

SEO

Title/description únicos em cada página, URLs legíveis seguindo a estrutura do catálogo, breadcrumbs com dados estruturados, sitemap.xml, robots.txt e favicon — um mínimo técnico básico, mas pensado.

Por que o projeto é interessante

Uma construção inicial “do zero, a partir do mockup, sem CMS nem frameworks”, feita à mão em cerca de uma semana (ainda antes da era das ferramentas de IA) — e mesmo assim uma loja funcional, com pagamento online real e processamento de pedidos. O mesmo cliente depois fez o rebranding para Wergrauf, já sobre uma arquitetura data-driven madura: os dois projetos juntos mostram a evolução da abordagem.