Schema de Configuração

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

O schema é definido no arquivo schema.centralcart (formato JSON) no editor
As opções aparecem na tela de “Personalizar template” no painel da CentralCart
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"]
}

Campo	Descrição
`name`	Nome do template
`author`	Autor do template
`version`	Versão do template
`settings`	Array de seções com campos de configuração
`widgets`	Array 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 `key`	Variável no template
`primary-color`	`config.primary_color`
`headline`	`config.headline`
`show-sales`	`config.show_sales`
`hero-image`	`config.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.

​Como funciona

​Estrutura do schema

​Acessando valores no template

​Tipos de campo

​color-picker

​text

​textarea

​select

​url

​number

​image

​array

​packages

​wysiwyg

​Exemplo completo de schema

Como funciona

Estrutura do schema

Acessando valores no template

Tipos de campo

color-picker

text

textarea

select

url

number

image

array

packages

wysiwyg

Exemplo completo de schema