Skip to main content
O schema define as opções de personalização do template. Ele permite que os usuários alterem cores, textos, imagens e outras configurações diretamente pelo painel, sem precisar editar o código.
No momento, para habilitar o arquivo de schema no seu template é necessário entrar em contato com o suporte da CentralCart.

​
Como funciona

  1. O schema é definido no arquivo schema.centralcart (formato JSON) no editor
  2. As opções aparecem na tela de “Personalizar template” no painel da CentralCart
  3. Os valores definidos pelo usuário ficam disponíveis nos templates via a variável config

​
Estrutura do schema

{
  "name": "Nome do Template",
  "author": "Seu Nome",
  "version": "1.0.0",
  "settings": [
    {
      "title": "Nome da Seção",
      "fields": [
        {
          "key": "nome-do-campo",
          "label": "Label exibida no painel",
          "description": "Descrição do campo",
          "type": "tipo-do-campo",
          "default": "valor padrão"
        }
      ]
    }
  ],
  "widgets": ["PRODUCT_HIGHLIGHT", "MONTH_GOAL", "TOP_DONATORS"]
}
CampoDescrição
nameNome do template
authorAutor do template
versionVersão do template
settingsArray de seções com campos de configuração
widgetsArray de widgets suportados pelo template

​
Acessando valores no template

Os valores do schema são acessados pela variável global config. O campo key do schema define o nome da propriedade, com hífens convertidos em underscores.
Schema keyVariável no template
primary-colorconfig.primary_color
headlineconfig.headline
show-salesconfig.show_sales
hero-imageconfig.hero_image
<h1><%= config.headline %></h1>

<style>
  :root {
    --primary: hsl(<%= config.primary_color | hex_to_hsl %>);
  }
</style>

​
Tipos de campo

​
color-picker

Seletor de cor. Armazena o valor em formato hexadecimal. 
{
  "key": "primary-color",
  "label": "Cor primária",
  "description": "A cor principal da loja.",
  "type": "color-picker",
  "default": "#615afa"
}

<style>
  :root {
    --primary: hsl(<%= config.primary_color | hex_to_hsl %>);
  }
</style>

​
text

Campo de texto simples (uma linha). 
{
  "key": "headline",
  "label": "Headline",
  "description": "Texto do topo da página.",
  "type": "text",
  "default": "Bem-vindo à nossa loja!"
}

​
textarea

Campo de texto multilinha. 
{
  "key": "sub-headline",
  "label": "Sub-headline",
  "description": "Complemento do headline.",
  "type": "textarea",
  "default": "A melhor loja de produtos digitais."
}

​
select

Campo de seleção com opções predefinidas. 
{
  "key": "show-sales",
  "label": "Mostrar vendas",
  "description": "Exibe a quantidade de vendas no produto.",
  "type": "select",
  "default": false,
  "options": [true, false]
}

​
url

Campo de URL com validação. 
{
  "key": "top-announce-link",
  "label": "Link do anúncio",
  "description": "Link do anúncio da loja.",
  "type": "url",
  "default": ""
}

​
number

Campo numérico. 
{
  "key": "products-per-page",
  "label": "Produtos por página",
  "description": "Quantidade de produtos exibidos por página.",
  "type": "number",
  "default": 12
}

​
image

Campo para upload de imagem. O valor armazenado é a URL da imagem no CDN. 
{
  "key": "hero-image",
  "label": "Imagem inicial",
  "description": "Imagem de apresentação da loja.",
  "type": "image",
  "default": null
}

<% if config.hero_image %>
  <img src="<%= config.hero_image %>" alt="Banner" />
<% endif %>

​
array

Campo que permite múltiplos itens com estrutura definida. Ideal para FAQs, depoimentos, cards, etc. 
{
  "key": "faq",
  "label": "FAQ",
  "description": "Perguntas frequentes.",
  "type": "array",
  "items": {
    "type": "object",
    "properties": {
      "question": {
        "type": "textarea",
        "label": "Pergunta"
      },
      "answer": {
        "type": "textarea",
        "label": "Resposta"
      }
    }
  },
  "default": [
    {
      "question": "Como posso fazer um pedido?",
      "answer": "Selecione os produtos e siga para o checkout."
    },
    {
      "question": "Qual o prazo de entrega?",
      "answer": "A entrega é imediata após a confirmação do pagamento."
    }
  ]
}

<% if config.faq.size > 0 %>
  <div class="faq">
    <% for item in config.faq %>
      <details>
        <summary><%= item.question %></summary>
        <p><%= item.answer %></p>
      </details>
    <% endfor %>
  </div>
<% endif %>

​
packages

Campo de seleção de pacotes (produtos) da loja. Permite ao usuário selecionar pacotes para destaque. 
{
  "key": "featured-packages",
  "label": "Pacotes em destaque",
  "description": "Selecione os pacotes para destaque na página inicial.",
  "type": "packages",
  "max_items": 6,
  "default": []
}

​
wysiwyg

Editor de texto rico (WYSIWYG). Armazena conteúdo HTML. 
{
  "key": "about-content",
  "label": "Conteúdo sobre nós",
  "description": "Texto da seção sobre nós.",
  "type": "wysiwyg",
  "default": "<p>Escreva sobre sua loja aqui.</p>"
}

​
Exemplo completo de schema

{
  "name": "Meu Template",
  "author": "Minha Loja",
  "version": "1.0.0",
  "settings": [
    {
      "title": "Tema",
      "fields": [
        {
          "key": "primary-color",
          "label": "Cor primária",
          "description": "A cor principal da loja.",
          "type": "color-picker",
          "default": "#615afa"
        },
        {
          "key": "secondary-color",
          "label": "Cor secundária",
          "description": "A cor secundária da loja.",
          "type": "color-picker",
          "default": "#7a42f1"
        },
        {
          "key": "headline",
          "label": "Headline",
          "description": "Texto do topo da página.",
          "type": "text",
          "default": "Bem-vindo à nossa loja!"
        },
        {
          "key": "hero-image",
          "label": "Imagem inicial",
          "description": "Imagem de apresentação.",
          "type": "image",
          "default": null
        },
        {
          "key": "show-sales",
          "label": "Mostrar vendas",
          "description": "Exibe vendas no produto.",
          "type": "select",
          "default": false,
          "options": [true, false]
        },
        {
          "key": "faq",
          "label": "FAQ",
          "description": "Perguntas frequentes.",
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "question": {
                "type": "textarea",
                "label": "Pergunta"
              },
              "answer": {
                "type": "textarea",
                "label": "Resposta"
              }
            }
          },
          "default": []
        }
      ]
    }
  ],
  "widgets": ["PRODUCT_HIGHLIGHT", "MONTH_GOAL", "TOP_DONATORS"]
}
Se você tiver qualquer dúvida, entre em contato com a nossa equipe de suporte em nosso WhatsApp e Discord.