Settings.txt

O arquivo settings.txt da Nuvemshop utiliza uma linguagem de configuração proprietária específica da plataforma. Não é uma linguagem de programação padrão, mas sim um formato de configuração estruturado criado pela Nuvemshop para definir as opções do painel administrativo dos temas com características de estrutura hierárquica.

Estrutura básica:

Título da Sección
    meta
        icon = nombre-del-icono
        advanced = false
    color
        name = nombre_de_la_variable
        description = Descripción para el usuario

A Nuvemshop oferece diversos tipos de campos para configuração no settings.txt:

As propriedades básicas dos campos para que funcionem são name e description, onde:

Exemplo:

color
    name = background_color
    description = Color de fondo

Recuperando o valor no Twig:

Para facilitar o entendimento, vamos analisar a estrutura e organização do arquivo comparando com o painel da Nuvemshop.

Estrutura inicial

O primeiro ponto importante para iniciar a customização do arquivo settings é encontrar o local mais intuitivo para adicionar as novas customizações. Por padrão, a Nuvemshop já faz a organização por página e componentes mais amplos como Cabeçalho e Rodapé.

Na primeira sessão podemos encontrar campos do tipo COLOR. O tipo color        tem um padrão de "pick color" para facilitar a escolha hexadecimal para o lojista.        
       

Configuração META

Nessa primeira etapa já podemos ver alguns padrões como o meta, onde devemos informar logo após a sessão principal. Seguindo a hierarquia, todo conteúdo abaixo que tenha mais um "tab", a Nuvemshop irá interpretar que pertence à sessão principal acima.

A subseção META geralmente tem duas configurações:

Exemplo de configuração META:

meta
    icon = paint-brush
    advanced = false

Configuração de Cores

Seguindo, logo após o meta iniciam as configurações que o lojista irá customizar. Neste exemplo seguimos com três tipos de CORES: Cor de Fundo, Cor dos Textos e Cor de Destaque, todas seguindo o mesmo padrão:

color                    # TIPO INDICANDO QUE É UMA COR
    name = background_color    # CHAVE QUE SERÁ UTILIZADA NO TWIG/TPL
    description = Color de fondo # LABEL DO CAMPO PARA O LOJISTA

Depois das cores encontramos uma nova subseção. O SUBTITLE tem apenas um valor, que segue sendo subtitle = valor. Esse valor é exibido como um subtítulo no painel, neste caso sendo usado para um informativo.

Exemplo:

subtitle
    subtitle = <div class='js-color-description'>Aplica a textos de descuento, envío gratis y cuotas sin interés.</div>

Seguindo para próxima subseção encontramos o COLLAPSE. Este é um recurso interessante para grandes customizações, pois com o COLLAPSE é possível organizar as informações e customizações, agrupando as configurações para facilitar.

Exemplo:

collapse
    title = Botón principal

Ao utilizar o collapse, todo conteúdo abaixo dele ficará agrupado em uma nova sidebar, que irá abrir ao ser clicada, e possui apenas um valor: o title.

               

Seguindo as sessões principais, entramos no TIPO DE LETRA. Nesta seção encontramos mais alguns tipos como TITLE, FONT, RANGE_NUMBER e FORM_GROUP.

TITLE

O tipo TITLE, assim como SUBTITLE, tem apenas o próprio title como atributo:

title
    title = Títulos

FONT

O tipo FONT tem o name e description como nos demais, e também tem o VALUES. Para facilitar o entendimento, vamos comparar o VALUES como se fosse os options de um SELECT HTML, onde temos o VALUE (valor) seguido do label após o sinal de igual (=).

Exemplo:

font
    name = font_headings
    title = Fuentes para títulos
    description = Fuente
    values
        "Almarai", sans-serif = Almarai
        "Archivo", sans-serif = Archivo
        "Archivo Black", sans-serif = Archivo Black

Equivalente em HTML:

<label>Fonte</label>
<select name="font_headings">
    <option value='"Almarai", sans-serif'>Almarai</option>
    <option value='"Archivo", sans-serif'>Archivo</option>
    <option value='"Archivo Black", sans-serif'>Archivo Black</option>
</select>

RANGE_NUMBER

Em seguida vem o RANGE_NUMBER, onde é formada a barra entre um valor mínimo e máximo, do tipo number (numérico). Como os demais, tem name e description seguido pelos valores min e max.

range_number
    name = headings_size
    description = Tamaño
    min = 28
    max = 48

Na sessão CABEÇALHO temos alguns novos tipos como CHECKBOX e DROPDOWN.

CHECKBOX

O tipo CHECKBOX é mais simples comparado ao DROPDOWN. Seguimos com os mesmos campos name e description apenas.

checkbox
    name = header_colors
    description = Usar estos colores para el encabezado

DROPDOWN

Já o DROPDOWN, assim como o FONTS, é um seletor de opções, também sendo um SELECT HTML, tendo name, description e o values, que seguimos a mesma regra do fonts, onde temos value = label.

dropdown
    name = logo_size
    description = Tamaño del logo
    values
        small = Chico
        medium = Mediano
        big = Grande

Entrando no COLLAPSE do CABEÇALHO EM CELULARES temos o tipo IMAGE e I18N_INPUT.

IMAGE

Podemos ver dois componentes do tipo IMAGE: um apenas com name e description (configuração básica para funcionar) e no segundo temos mais duas configurações, WIDTH e HEIGHT. Quando informado, no painel é inserida uma tag de "sugestões" do tamanho, auxiliando o lojista no formato ideal.

Configuração básica:

image
    original = logo-transparent.jpg
    title = Logo alternativo (opcional)

Com dimensões sugeridas:

image
    original = menu_banner_mobile.jpg
    title = Cargar imagen (JPG, GIF, PNG)
    width = 820
    height = 175

I18N_INPUT

No tipo I18N_INPUT temos o tradicional input do tipo TEXT, porém ele leva em consideração os idiomas configurados na loja. Neste caso temos BR e AR, então são inseridos dois inputs para o lojista informar o valor para cada idioma.

i18n_input
	name = menu_banner_mobile_url
    description = Link

Na seção principal da Página inicial temos uma mudança significativa. Na barra lateral temos uma opção mais dinâmica, onde é possível arrastar e soltar para ordenar a posição dos componentes, assim como opção de ATIVAR/DESATIVAR cada um deles.

Configuração para ordenação dinâmica

Para que isso funcione, temos que seguir alguns padrões. Dentro de META, além do icon e advanced temos o default. Esse valor é a chave do TIPO SECTION_ORDER que encontramos no final da seção principal. Essa sessão é responsável por informar os collapses que formam o drop-and-drop, e cada collapse também tem o valor BACKTO que também indica o home_order_position.

Página de inicio
    meta
        icon = home
        advanced = true
        default = home_order_position
    collapse
        title = Carrusel de imágenes
        backto = home_order_position
    ...
    collapse
        title = Información de envíos, pagos y compra
        backto = home_order_position
    ...
    section_order
        name = home_order_position
        start_index = 1
        sections
            slider = Carrusel de imágenes
            main_categories = Categorías principales
            products = Productos destacados
            ...

Além dessa importante mudança, já podemos ver o tipo GALLERY, muito utilizado nas customizações. Este tipo é uma coleção de imagens. Assim como o IMAGE, temos a opção de colocar GALLERY_WIDTH e GALLERY_HEIGHT além de gallery_more_info, onde ao ser informado é adicionado mais opções de informação por imagem.

gallery
    name = banner_mobile
    gallery_image = Agregar imagen
    gallery_link = [Opcional] Página web a la que quieres que te lleve la imagen al hacer click
    gallery_width = 820
    gallery_height = 1000
    gallery_more_info = true

Para finalizarmos a explicação dos tipos, temos alguns outros como TEXT, TEXTAREA, CSS_CODE e MENU.

TEXT

Onde o text gera um INPUT HTML simples. Neste caso temos a opção de informar também o placeholder.

text
    name = cart_minimum_value
    description = ¿Cuál es el monto mínimo que tus clientes deben gastar?
    placeholder = Ej.: 3000

TEXTAREA e CSS_CODE

Onde o textarea e css_code geram um TEXTAREA HTML. A diferença entre eles é que o css_code traz uma formatação voltada a códigos CSS, já o textarea vem no formato padrão e com capacidade de até 5 mil caracteres.

TEXTAREA:

textarea
    name = about_store
    description = Texto sobre la tienda

CSS_CODE:

css_code
    name = css_code
    description = Acá podes escribir código CSS para que se muestre en tu tienda

MENU

Já o menu, apesar de simples, é muito importante, pois ele lista as opções de menus criados para o lojista, possibilitando deixar flexível qual menu criado pelo lojista será exibido no local desejado.

menu
    name = footer_menu
    description = ¿Qué menú vas a mostrar al final de la página?