Personalizando >

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: Configurando preferências no tema na Webstore

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": []
    }

Preferência de tipo COR

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

Preferência de tipo Opções

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

Preferência de tipo Opções

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

Preferência de tipo Opções

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

Preferência de tipo Opções