Páginas e Rotas - CentralCart

O sistema de templates da CentralCart espera que determinados arquivos HTML existam na pasta pages/ do template. Cada rota da loja é mapeada para uma página específica, e algumas recebem variáveis adicionais além das variáveis globais.

Como funciona

Quando um visitante acessa uma URL na loja, o sistema:

Identifica qual tipo de página corresponde àquela rota
Carrega os dados específicos daquela página
Renderiza o arquivo pages/{tipo}.html com as variáveis globais + variáveis da página

Se a página não existir, o sistema renderiza pages/404.html.

Páginas disponíveis

pages/index.html

Rota: / Página inicial da loja. Não recebe variáveis adicionais além das globais. Use a tag load para carregar pacotes, widgets e outros dados dinâmicos.

<% layout 'layouts/main' %>

<section class="hero">
  <h1><%= config.headline %></h1>
  <p><%= config.sub_headline %></p>
</section>

<% load packages limit: 12 %>

<div class="products">
  <% for package in packages.data %>
    <a href="/package/<%= package.slug %>">
      <img src="<%= package.image %>" alt="<%= package.name %>" />
      <h3><%= package.name %></h3>
      <span><%= package.pricing.price | format_price %></span>
    </a>
  <% endfor %>
</div>

pages/category.html

Rota: /category/:slug Página de uma categoria específica. Variáveis adicionais:

Variável	Tipo	Descrição
`category`	object	Dados da categoria
`category.id`	number	ID da categoria
`category.name`	string	Nome da categoria
`category.slug`	string	Slug da categoria
`category.image`	string	URL da imagem (pode ser `null`)
`category.banner`	string	URL do banner (pode ser `null`)
`category.parent_id`	number	ID da categoria pai (`null` quando a categoria não é subcategoria)
`category.sub_categories`	array	Subcategorias visíveis. O primeiro item é a própria categoria (ver abaixo)
`category.packages_count`	number	Quantidade de pacotes ativos na categoria, sem considerar estoque

category.sub_categories traz a própria categoria como primeiro item. Para listar só as subcategorias, filtre pelo id: <% assign subs = category.sub_categories | where_exp: "sub", "sub.id != category.id" %>. Subcategorias marcadas como escondidas não entram na lista.

<% layout 'layouts/main' %>

<h1><%= category.name %></h1>

<% if category.sub_categories.size > 0 %>
  <nav class="subcategories">
    <% for sub in category.sub_categories %>
      <a href="/category/<%= sub.slug %>"><%= sub.name %></a>
    <% endfor %>
  </nav>
<% endif %>

<% load packages category_id: category.id %>

<div class="products">
  <% for package in packages.data %>
    <a href="/package/<%= package.slug %>">
      <h3><%= package.name %></h3>
      <span><%= package.pricing.price | format_price %></span>
    </a>
  <% endfor %>
</div>

Se a categoria não existir, o sistema retorna 404 automaticamente.

Paginação, busca e ordenação

Categorias grandes devem ser montadas em páginas: carregue a primeira no servidor e busque as seguintes com page, pela tag ou pela rota /search. O limit vai até 250 por página. A query string da página chega no template em query, então a mesma página atende uma busca dentro da categoria (/category/acao?q=ghost&order_by=price:asc):

<% load packages category_id: category.id, limit: 24, q: query.q, order_by: query.order_by %>

<p>Página <%= packages.meta.current_page %> de <%= packages.meta.last_page %></p>

Para buscar na categoria e nas subcategorias de uma vez, passe os ids separados por vírgula em category_id. Cada pacote traz o seu category_id, o que permite separar o resultado por subcategoria:

<% assign ids = category.sub_categories | map: "id" | join: "," %>
<% load packages category_id: ids, q: query.q, limit: 60 %>

Pacotes de categorias escondidas não aparecem nessas listagens, nem acessando a categoria pelo link direto.

pages/package.html

Rota: /package/:slug Página de detalhes de um pacote (produto). Variáveis adicionais:

Variável	Tipo	Descrição
`package`	object	Dados completos do pacote
`package.id`	number	ID do pacote
`package.name`	string	Nome do pacote
`package.slug`	string	Slug
`package.description`	string	Descrição (HTML)
`package.image`	string	URL da imagem principal (pode ser `null`)
`package.icon`	string	Ícone do pacote (pode ser `null`)
`package.type`	string	Tipo do pacote (`SINGLE`, `MULTIPLE`, etc.)
`package.enabled`	boolean	Se o pacote está ativo
`package.is_variation_parent`	boolean	Se é pai de variações
`package.variations`	array	Variações do pacote
`package.fields`	array	Campos/variáveis customizadas do pacote
`package.pricing`	object	Informações de preço
`package.pricing.price`	number	Preço atual
`package.pricing.compare_at`	number	Preço original (para desconto, pode ser `null`)
`package.pricing.percent_discount`	number	Percentual de desconto (pode ser `null`)
`package.stock`	object	Informações de estoque
`package.stock.quantity`	number	Quantidade em estoque (`null` = ilimitado)
`package.stock.available`	boolean	Se há estoque disponível
`package.stock.min_amount`	number	Quantidade mínima por compra
`package.is_auto_delivery`	boolean	Se a entrega é automática
`package.sales`	number	Número de vendas

<% layout 'layouts/main' %>

<div class="product-page">
  <div class="gallery">
    <img src="<%= package.image %>" alt="<%= package.name %>" />
  </div>

  <div class="info">
    <h1><%= package.name %></h1>

    <% if package.pricing.compare_at %>
      <span class="original-price"><%= package.pricing.compare_at | format_price %></span>
      <span class="discount"><%= package.pricing.percent_discount %>%</span>
    <% endif %>
    <span class="price"><%= package.pricing.price | format_price %></span>

    <div class="description">
      <%= package.description %>
    </div>

    <% if package.stock.available == false %>
      <p>Estoque esgotado</p>
    <% endif %>

    <% if package.fields.size > 0 %>
      <div class="fields">
        <% for field in package.fields %>
          <label><%= field.name %></label>
        <% endfor %>
      </div>
    <% endif %>
  </div>
</div>

Se o pacote não existir, o sistema retorna 404 automaticamente.

pages/search.html

Rota: /search Página de resultados de busca. Os parâmetros da query string são passados automaticamente para a busca, com os mesmos nomes da tag load packages. O limit vai até 250 por página: para listas maiores, busque as páginas seguintes com page. Variáveis adicionais:

Variável	Tipo	Descrição
`packages`	object	Resultado da busca (paginado)
`packages.data`	array	Lista de pacotes encontrados
`packages.meta`	object	Metadados da paginação

<% layout 'layouts/main' %>

<h1>Resultados para "<%= query.q %>"</h1>

<% if packages.data.size > 0 %>
  <div class="results">
    <% for package in packages.data %>
      <a href="/package/<%= package.slug %>">
        <img src="<%= package.image %>" alt="<%= package.name %>" />
        <h3><%= package.name %></h3>
        <span><%= package.pricing.price | format_price %></span>
      </a>
    <% endfor %>
  </div>
<% else %>
  <p>Nenhum produto encontrado.</p>
<% endif %>

pages/checkout.html

Rota: /checkout Página de finalização da compra. Variáveis adicionais:

Variável	Tipo	Descrição
`discord`	object	Dados de integração Discord
`discord.enabled`	boolean	Se a integração Discord está ativa
`discord.optional`	boolean	Se a conexão Discord é opcional

<% layout 'layouts/main' %>

<div class="checkout">
  <h1>Finalizar Compra</h1>

  <% if discord.enabled %>
    <div class="discord-auth">
      <p>
        <% if discord.optional %>
          Conecte seu Discord (opcional):
        <% else %>
          Conecte seu Discord para continuar:
        <% endif %>
      </p>
    </div>
  <% endif %>

  <!-- O script centralcart_script gerencia o fluxo de checkout -->
</div>

Rota: /login Página de login do cliente. O fluxo de autenticação é gerenciado pelo script da CentralCart.

<% layout 'layouts/main' %>

<div class="login-page">
  <h1>Entrar na sua conta</h1>
  <!-- O formulário de login é gerenciado pelo centralcart_script -->
</div>

pages/order.html

Rota: /order/:id Página de detalhes de um pedido após a compra. Variáveis adicionais:

Variável	Tipo	Descrição
`order`	object	Dados completos do pedido
`order.internal_id`	string	ID do pedido
`order.status`	string	Status (`PENDING`, `APPROVED`, `CANCELLED`, etc.)
`order.price`	number	Valor total
`order.price_display`	string	Valor formatado
`order.gateway`	string	Gateway utilizado
`order.client_name`	string	Nome do cliente
`order.client_email`	string	E-mail do cliente
`order.packages`	array	Pacotes do pedido
`order.deliveries`	array	Entregas realizadas
`order.variables`	array	Variáveis preenchidas no checkout
`order.notes`	array	Anotações do pedido
`order.created_at`	string	Data de criação
`chat_delivery`	object	Dados de entrega via chat (se aplicável)

<% layout 'layouts/main' %>

<div class="order-page">
  <h1>Pedido #<%= order.internal_id %></h1>
  <span class="status"><%= order.status %></span>
  <span class="total"><%= order.price | format_price %></span>

  <h2>Pacotes</h2>
  <% for package in order.packages %>
    <div class="package">
      <span><%= package.name %></span>
      <span>Qtd: <%= package.quantity %></span>
    </div>
  <% endfor %>

  <% if order.deliveries.size > 0 %>
    <h2>Entregas</h2>
    <% for delivery in order.deliveries %>
      <div class="delivery">
        <%= delivery.content %>
      </div>
    <% endfor %>
  <% endif %>

  <p>Data: <%= order.created_at | date: "%d/%m/%Y %H:%M" %></p>
</div>

Páginas de pedido possuem o header X-Robots-Tag: noindex, nofollow para evitar indexação por buscadores.

pages/payment.html

Rota: /payment/:id Página de pagamento pendente (ex: aguardando Pix). Variáveis adicionais:

Variável	Tipo	Descrição
`order`	object	Dados do pedido (campos limitados)
`order.internal_id`	string	ID do pedido
`order.price`	number	Valor total
`order.price_display`	string	Valor formatado
`order.status`	string	Status do pedido
`order.gateway`	string	Gateway utilizado
`order.gateway_display`	string	Nome do gateway para exibição
`order.created_at`	string	Data de criação
`order.pix_code`	string	Código Pix copia-e-cola
`order.qr_code`	string	QR Code em base64 (data URL)

<% layout 'layouts/main' %>

<div class="payment-page">
  <h1>Pagamento Pendente</h1>
  <p>Pedido #<%= order.internal_id %></p>
  <p>Valor: <%= order.price | format_price %></p>

  <% if order.pix_code %>
    <div class="pix">
      <img src="<%= order.qr_code %>" alt="QR Code Pix" />
      <input type="text" value="<%= order.pix_code %>" readonly />
      <button onclick="navigator.clipboard.writeText('<%= order.pix_code %>')">
        Copiar código Pix
      </button>
    </div>
  <% endif %>
</div>

pages/post.html

Rota: /post/:slug Página de um post do blog. Variáveis adicionais:

Variável	Tipo	Descrição
`post`	object	Dados do post
`post.title`	string	Título
`post.slug`	string	Slug
`post.content`	string	Conteúdo (HTML)
`post.description`	string	Descrição resumida
`post.created_at`	string	Data de criação

<% layout 'layouts/main' %>

<article class="blog-post">
  <h1><%= post.title %></h1>
  <time><%= post.created_at | date: "%d/%m/%Y" %></time>
  <div class="content">
    <%= post.content %>
  </div>
</article>

pages/account/orders.html

Rota: /account/orders Página de pedidos do cliente (área logada). Requer autenticação. Variáveis adicionais:

Variável	Tipo	Descrição
`orders`	object	Pedidos do cliente (paginado)
`orders.data`	array	Lista de pedidos aprovados
`orders.meta`	object	Metadados da paginação

<% layout 'layouts/main' %>

<h1>Meus Pedidos</h1>

<% if orders.data.size > 0 %>
  <% for order in orders.data %>
    <div class="order-card">
      <span>Pedido #<%= order.internal_id %></span>
      <span><%= order.price | format_price %></span>
      <span><%= order.created_at | date: "%d/%m/%Y" %></span>
      <a href="/order/<%= order.internal_id %>">Ver detalhes</a>
    </div>
  <% endfor %>
<% else %>
  <p>Você ainda não tem pedidos.</p>
<% endif %>

pages/terms.html

Rota: /terms Página de termos de uso da loja. Variáveis adicionais:

Variável	Tipo	Descrição
`terms`	string	Conteúdo HTML dos termos de uso

<% layout 'layouts/main' %>

<div class="terms-page">
  <h1>Termos de Uso</h1>
  <div class="content">
    <%= terms %>
  </div>
</div>

pages/404.html

Página exibida quando uma rota não é encontrada. Não recebe variáveis adicionais.

<% layout 'layouts/main' %>

<div class="not-found">
  <h1>Página não encontrada</h1>
  <p>A página que você procura não existe.</p>
  <a href="/">Voltar para o início</a>
</div>

pages/maintenance.html

Página exibida quando a loja está em modo manutenção. Não recebe variáveis adicionais.

<div class="maintenance">
  <img src="<%= theme.logo %>" alt="<%= store.name %>" />
  <h1>Em manutenção</h1>
  <p>A loja está temporariamente indisponível. Volte em breve!</p>
</div>

Se você tiver qualquer dúvida, entre em contato com a nossa equipe de suporte em nosso WhatsApp e Discord.

​Como funciona

​Páginas disponíveis

​pages/index.html

​pages/category.html

​Paginação, busca e ordenação

​pages/package.html

​pages/search.html

​pages/checkout.html

​pages/login.html

​pages/order.html

​pages/payment.html

​pages/post.html

​pages/account/orders.html

​pages/terms.html

​pages/404.html

​pages/maintenance.html

Como funciona

Páginas disponíveis

pages/index.html

pages/category.html

Paginação, busca e ordenação

pages/package.html

pages/search.html

pages/checkout.html

pages/login.html

pages/order.html

pages/payment.html

pages/post.html

pages/account/orders.html

pages/terms.html

pages/404.html

pages/maintenance.html