Gerando CSS e JS dinamicamente utilizando a customização de temas

A função Asset além de disponibilizar o caminho absoluto para os arquivos do tema tem como principal objetivo tornar o OpenCode ainda mais flexível. Através da utilização desta função é possível criar arquivos .CSS e .JS dinâmicos, facilitando a manutenção e enriquecendo ainda mais a customização dos temas desenvolvidos.

Ao final do artigo, disponibilizamos um vídeo demonstrando todo o processo de customização do tema.

Como assim dinâmicos ?
Essa função permite que o objeto settings criado utilizando a customização de temas seja acessado utilizando a sintaxe do Twig. A utilização do objeto settings permite que valores como cor, tamanho, posição e etc... sejam definidos dinamicamente, permitindo que alterações globais sejam realizadas de maneira tão fácil como alterar uma linha de código.

Para que o processo de criação dinâmica atinja seu potencial, é necessário criar os arquivos de configuração (configs/settings.html e configs/settings.json), desta maneira as configurações realizadas na customização de temas podem ser acessadas através dos arquivos .css .js fornecendo uma imensa gama de possibilidades na personalização do seu layout. No artigo de customização mencionado acima você irá entender melhor o funcionamento destes arquivos, nos passos abaixo demonstraremos de maneira resumida como criá-los:

#1 - Criando os arquivos de configuração

Caso você já possua os arquivos criados e configurados você pode pular esta etapa e ir diretamente para a criação do arquivo dinâmico.

Crie os dois arquivos a seguir dentro da pasta /configs que está na raiz do seu tema.

Arquivo 1 - [settings.html] 

O arquivo deve possuir a tag <fieldset></fieldset> e dentro desta tag devem ser incluídos os campos de personalização desejados, o arquivo segue os preceitos de um <form> comum; ex:

<label for="background_body">Background Body</label>
<div class="input-group colorPicker colorpicker-element">
  <span class="input-group-addon"><i style="background: rgb(204, 0, 0);"></i></span>
  <input type="text" name="background_body" id="background_body" class="form-control" />
</div>
<label for="background_banner">Background Banner</label> <div class="input-group colorPicker colorpicker-element"> <span class="input-group-addon"><i style="background: rgb(204, 0, 0);"></i></span> <input type="text" name="background_banner" id="background_banner" class="form-control" /> </div>

Arquivo 2 - [settings.json] 

Para adicionar um novo modelo você deve declarar as variáveis e seus valores da seguinte maneira.

{
 "current":{},
 "modelo1":{
   "background_body": "#ff0",
   "background_banner": "#000"
 },
 "modelo2":{
   "background_body": "#0fe",
   "background_banner": "#00f"
 }
}

O modelo current pode ou não ser preenchido, as variáveis de cada modelo deverão possuir o mesmo nome do atributo name criado no arquivo (settings.html), as variáveis podem ter seus valores pré definidos ou não.

Após a criação dos arquivos, um novo botão (customizar) irá aparecer nas opções do tema de sua loja virtual.

#2 - Criando um arquivo dinâmico

Os passos são bem simples, primeiramente você deve criar o arquivo normalmente e após a criação adicionar extensão .html ao final do mesmo (configuracoes.css.html), por ex:



Após a alteração da extensão já é possível utilizar as variáveis dentro do arquivo, ex:

body { 
  background-color: {{ settings.background_body }}; 
}
.banner-home{ 
  {% if settings.background_banner %}
  background-color: {{ settings.background_banner }};
  {% endif %}
}

#3 - Inserindo os arquivos utilizando a função asset

Esta função irá retornar o caminho para os arquivos do tema e adicionará um hash ao final do arquivo evitando o armazenamento de cache.

Confira abaixo como chamar o arquivo css criado nos passos acima.

<link href="{{ asset('css/configuracoes.css', {dynamic: true} ) }}" rel="stylesheet"/>

Tudo pronto, agora que realizamos a chamada dos arquivos é possível realizar alterações dinâmicas utilizando o painel administrativo.

Confira o processo no vídeo: