ShopNex
A ready-to-use, self-hostable commerce platform: admin, hosted checkout, Storefront API, webhooks and an app marketplace. No developers required to run a shop.
翻译准备中
尚未检测到更新。GitHub 发布版本后会显示在这里。
个人 GitHub 账号下公开仓库的所有者可以登录并验证所有权,自行管理介绍,无需管理员批准。
登录并生成验证文件,在 30 分钟内将其提交到此仓库的默认分支。其他分支或分叉仓库中的文件无效。然后在下方检查文件,即可无需管理员批准直接管理项目。请保留文件以维持管理权限。
如需登录,将前往登录页面。登录后请回到此处,再次点击所选的验证按钮。
在项目文件夹中运行 /nomorevibe verify,即可验证所有权并自行管理介绍。
一分钟完成验证E-commerce da loja Novo Elemento (catalogo, carrinho, checkout WhatsApp e Mercado Pago)
翻译准备中
正在加载完整 README。
查看完整 README ↗Site pronto em HTML/CSS/JavaScript puro — não precisa instalar nada, basta abrir os arquivos .html no navegador ou publicar a pasta em qualquer serviço de hospedagem.
Dê duplo clique em index.html (ou clique com o botão direito → Abrir com → seu navegador).
Arquivo: js/store-data.js
whatsappNumber) — troque pelo número real antes de publicar"" para ocultar o ícone)Arquivo: js/products-data.js
featured: true para o produto aparecer na seção de destaques da homecolors — mesmo quando só vem numa cor, precisa de pelo menos 1 item nessa lista. Se tiver mais de uma cor, o botão "Selecionar cor" aparece sozinho na página da peça.code (o "Cód." que a cliente usa) — aparece na página da peça e troca junto quando o cliente muda de cor.notes (opcional, lista de textos) vira uma caixa de observações na página da peça — bom pra "veste do X ao Y", avisos de material etc.stock em cada cor (número de peças em loja) — se for 5 ou menos, mostra um aviso em vermelho "Apenas N peça(s)!" na página da peça. Deixe sem o campo pra não mostrar aviso nenhum.Pasta: assets/produtos/
.jpg ou .png)images (pode ter várias fotos — elas viram a galeria da página do produto). A primeira foto da primeira cor é a que aparece na vitrine do catálogo.As 15 peças no site têm fotos, preço e descrição reais da cliente — a lista completa com preço/código/estoque de cada uma está em js/products-data.js (é mais fácil de manter atualizada lá do que duplicar aqui). Só a Calça Legging Fuso Prada ainda está incompleta: a cor Marrom não tem fotos (só a Preta) — pendente do lado da cliente.
Peças mais recentes (2026-08-17): Vestido Lili (R$387,90, cód. 1979), Vestido Ravena (R$387,90, cód. 1980), Vestido Vintage (R$387,90, cód. 1981) e Vestido Serena (R$299,00, cód. 1984) — as 3 primeiras fazem parte da mesma "cápsula" noturna (peça única cada, veja a descrição de cada uma). Novas peças, trocas de preço ou de estoque: editar direto em js/products-data.js.
Novidade: cada cor agora pode ter seu próprio sizes (tamanhos disponíveis) — usado na Calça Legging Fuso Prada, onde a cor Preta vem em P/M/G mas a Marrom só em M. Antes disso, todas as cores de uma peça compartilhavam os mesmos tamanhos.
index.html) mostra só a foto de capa de cada peça. Clicar em qualquer peça abre produto.html?id=....produto.html) mostra a galeria completa (com miniaturas clicáveis), seletor de cor (quando há mais de uma, com troca suave da foto), seletor de tamanho, botão "Adicionar ao carrinho" e botão "Consulte disponibilidade" que abre o WhatsApp já com o nome da peça, cor e tamanho escolhidos na mensagem.Já aplicado a partir dos arquivos que você enviou (logos_novo_elemento_separadas.zip). Cada versão foi tratada (fundo removido/recortado) e distribuída assim:
| Arquivo | Onde é usado |
|---|---|
assets/logo.png | Logo da navbar (topo do site, todas as páginas) |
assets/logo-badge.png | Monograma pequeno ao lado do nome da loja, no rodapé |
assets/logo-seal.png | Selo circular na página "Fale Conosco" |
assets/favicon.png | Ícone da aba do navegador |
assets/logo-mark.png | Monograma extra (sem uso fixo ainda — disponível para stickers, embalagens, etc.) |
Os arquivos originais enviados ficam guardados em assets/logo-source/, caso precise gerar outra versão (ex: para embalagens, redes sociais). Para trocar qualquer logo do site, basta substituir o arquivo correspondente na tabela acima mantendo o mesmo nome.
index.html — vitrine (destaques + catálogo completo com filtro por categoria)produto.html — página individual da peça (galeria, cor, tamanho, carrinho, WhatsApp)sobre.html — "Fale Conosco", com botão de WhatsApp e informações da lojacarrinho.html — carrinho de compras, com finalização de pedido via WhatsAppO carrinho é salvo no navegador do visitante (não precisa de banco de dados). Duas formas de finalizar:
api/create-preference.js) — gera um link de pagamento (Checkout Pro) com cartão, Pix e boleto. Ativo e testado (ver seção abaixo) — o botão já processa pagamentos reais.Qualquer serviço de hospedagem de arquivos estáticos funciona (ex: Hostinger, Vercel, Netlify, GitHub Pages). Basta enviar todos os arquivos e pastas mantendo a mesma estrutura.
Site no ar no domínio definitivo: https://onovoelemento.com.br (migração concluída em 2026-08-18 — domínio .com.br registrado e apontado na Vercel). O link antigo (https://onovo-elemento-loja.vercel.app) continua funcionando também, aponta pro mesmo projeto/deploy.
masculino.html (catálogo próprio). Peça masculina = produto com gender: "masc" em js/products-data.js; sem esse campo é feminina. O seletor Feminino | Masculino e a troca com degradê dourado ficam em js/transition.js (+ js/swap-boot.js).masculino.html): 3 painéis, cada um alterna 4 fotos em crossfade (.hero-masc__slide, ciclo de 18s, painéis defasados). Mistura fotos novas (assets/produtos/banner-masc-nova-*.jpg, 900×1200) e antigas (camiseta-essential-*/camiseta-signature-*, geradas por IA, que não são mais usadas no catálogo). Pra trocar uma foto, troque o src do <img>; no celular só o painel do meio aparece.STORE.pixDiscountPercent (js/store-data.js). Muda o percentual nos preços "no Pix", no carrinho, no WhatsApp e no servidor (a function lê o mesmo arquivo). A faixa do topo (<div class="promo-bar"> nos 6 HTMLs) é texto fixo: se mudar o %, ajuste também a faixa.api/create-preference.js recebe só {id, quantity, color, size}, lê o preço no catálogo (js/products-data.js, incluído no bundle por vercel.json) e aplica o desconto — o navegador não decide o valor. O checkout fica restrito ao Pix.account_money) não pode ser excluído, então quem tem saldo pode usá-lo no checkout do Pix; e o default_payment_method_id não pode ser combinado com a lista de exclusão.Checkout via Mercado Pago (Checkout Pro), com o botão "Finalizar pedido no WhatsApp" mantido como alternativa.
api/create-preference.js — function serverless (roda na Vercel) que recebe os itens do carrinho e cria a preferência de pagamento no Mercado Pago, devolvendo o link do checkout.js/cart-page.js (payWithMercadoPago) — no carrinho, monta os itens e chama a function acima; redireciona o cliente para o pagamento.obrigado.html — página de confirmação para onde o cliente volta após pagar; limpa o carrinho automaticamente.carrinho.html?status=failure|pending — mensagens de status quando o pagamento falha ou fica pendente.Status (desde 2026-08-17): MP_ACCESS_TOKEN de produção configurado como variável de ambiente sensível no projeto Vercel (Settings → Environment Variables — nunca em arquivo do site) e testado: a function cria preferências reais e devolve um link de checkout válido do Mercado Pago.
⚠️ O site já processa pagamentos reais em ambos os domínios (onovoelemento.com.br e onovo-elemento-loja.vercel.app, que apontam pro mesmo projeto/deploy na Vercel).
⚠️ O Access Token é secreto — nunca deve ir para js/store-data.js ou qualquer outro arquivo servido ao navegador, só para a configuração de ambiente do servidor.