Definindo preferências do tema

Preferências

Ao criar um tema, eventualmente você irá precisar deixar algumas configurações ajustáveis pelo usuário.
Como cores ou algumas informações.

Para isso, é possível criar no arquivo config.json uma estrutura de preferências para o usuário poder configurar posteriormente no painel da loja.

Exemplo:

Para isso, dentro do seu arquivo config.json que fica dentro da pasta layout/config você irá alterar o Json da seguinte forma:

"grupoPreferencias": [
{
    "grupo": "Topo",
    "variaveis": [
    {
       "id": "color-fundo-1",
       "tipo": "color",
       "titulo": "Cor de fundo",
       "padrao": "#FFFFFF",
       "un": null,
       "min": 0,
       "max": 0,
       "opcoes": []
    }
]

No exemplo do json acima, temos um campo de tipo cor que ficará dentro da aba Topo nas preferências do tema.
Essa preferência poderá ser usada como variável tanto no CSS, HTML e JS do tema.

Usando as preferência no tema

Claro, após definir a preferência, você vai precisar usá-la no tema, certo?
Veja abaixo como utilizar a preferência criada.

CSS
.className { color: -color-fundo-1; }

Veja que o ID da preferência no json é "color-fundo-1" e no CSS foi inserida com um traço antes "-color-fundo-1".

Javascript
alert('{color-fundo-1}');

Veja que o ID da preferência no json é "color-fundo-1" e no JS foi inserida no padrão {id}.

HTML
<!--##color-fundo-1##-->

Veja que o ID da preferência no json é "color-fundo-1" e no HTML foi inserida no padrão <--##id##-->.

Tipo de preferências

Você poderá contar com alguns tipos de preferências para obter informações no painel da loja e replicar no tema.

Cor
    {
       "id": "color-fundo-1",
       "tipo": "color",
       "titulo": "Cor de fundo",
       "padrao": "#FFFFFF",
       "un": null,
       "min": 0,
       "max": 0,
       "opcoes": []
    }

Opções
    {
       "id": "tipo-fonte-1",
       "tipo": "option",
       "titulo": "Fonte",
       "padrao": "Arial",
       "un": null,
       "min": 0,
       "max": 0,
       "opcoes": ["Arial", "Verdana"]
    }

Número
    {
       "id": "font-size-1",
       "tipo": "number",
       "titulo": "Tamanho da fonte",
       "padrao": "14",
       "un": "px",
       "min": 12,
       "max": 18,
       "opcoes": []
    }

Texto
    {
       "id": "placeholder-busca-1",
       "tipo": "text",
       "titulo": "Campo busca",
       "padrao": "O que está buscando?",
       "un": null,
       "min": 0,
       "max": 30,
       "opcoes": []
    }

Texto longo
    {
       "id": "longtext-1",
       "tipo": "longtext",
       "titulo": "Quem somos",
       "padrao": "",
       "un": null,
       "min": 0,
       "max": 255,
       "opcoes": []
    }