Dentro do arquivo settings.txt definimos variáveis que podem ser configuradas pelo dono da loja no administrador Nuvem Shop, dentro de Opções de Layout.
A estruturação do arquivo se dá da seguinte forma:
- Título
- Nome da variável
- Descrição
- Tipo de campo:
- i18n_input
- dropdown
- color
- image
- checkbox
- gallery
- font
- patterns
Título
O título define o. Ex.: Fontes, Banners, Cores etc.
Todo o texto definido dentro de Título, Descrição e em outros campos pode ser escrito na língua que preferir, e ela será considerada como a principal do seu template. Para saber como traduzir essas informações para outras línguas veja a seção translations.txt.
No exemplo a seguir, as variáveis variavel_1 e variavel_2 pertencem à seção Este é o meu título
Este é o meu título
i18n_input
name = variable_1
description = Esta es la description = Esta é a descrição da minha primeira variável
i18n_input
name = variable_2
description = Esta é a descrição da minha segunda variável
Name
O campo name é na verdade o nome da variável que será usado dentro dos arquivos de template para visualizar a informação inserida pelo usuário.
No exemplo
Textos da loja
i18n_input
name = store_description
description = Esta é a descrição da minha loja
i18n_input
name = store_copyright
description = Esta é o copyright que vai no rodapé da loja
A variável descricao_loja será recuperada no no template usando-se o seguinte código:
{{ settings.store_description }}
Os nomes das variáveis devem estar escritos apenas em letras minúsculas, e sem acetuação. Utilize _ no lugar do espaço para separar as palavras.
Description
O campo description define o texto que irá aparecer ao lado do campo no Administrador Nuvem Shop.
Tipo de campo
O Tipo de Campo define qual tipo de variável você deseja que o usuário escolha ou insira. Eles podem ser:
i18n_input
Usado quando precisamos receber um texto digitado pelo usuário. Exemplo:
Textos da loja
i18n_input
name = descricao_loja
description = Texto de descrição da loja
Dropdown
Usado quando desejamos que o usuário escolha uma opção a partir de uma lista. Exemplo:
Home
dropdown
name = home_display
description = O que mostrar na Home?
values
slider = Slide Show de imagens
products = Slide Show de produtos
none = Somente produtos em Destaque
Conforme visto no exemplo, abaixo de values colocamos as opções de seleção do campo. O primeiro valor, como slider, é o valor do campo e Slide Show de imagens é a descrição desse valor, visualizada no administrador. Deve estar separados pelo símbolo = Uso:
{% if settings.home_display == "slider" %}
#Código do slideshow de imagens
{% elseif settings.home_display == "products"%}
#Código do slideshow de produtos
{% else %}
#Código quando a resposta foi 'none'
{% endif %}
Color
Permite a escolha de uma cor a partir de uma escala de cor Exemplo:
Cores
color
name = background
description = Cor de fundo da loja
Uso:
body
{
background-color: {{ settings.background }};
}
Image
Permite que o dono da loja insira uma imagem própria dentro do layout, substituíndo a usada como padrão no template.
body
{
background-color: {{ settings.background }};
}
Uso:
Banners
image
original = banner-sidebar.jpg
description = Escolha um banner para a barra lateral
Como podemos ver, image substitui uma imagem específica presente na pasta static (definida em original) por outra adicionada pelo dono da loja. Caso necessite saber se a imagem é a original utilize a seguinte operação:
{% if "banner-sidebar.jpg" | has_custom_image %}
# A imagem foi modificada pelo dono da loja
{% else %}
# A imagem é a original
{% endif %}
Checkbox
Campo que só possui dois valores possíveis: verdadeiro ou falso.
checkbox name = infinite_scrolling description = Você deseja carregar automaticamente os produtos a medida em que o seu cliente desce a barra de rolagem?
Uso:
{% if settings.infinite_scrolling %}
#código para ativar o scroll infinito
{% endif; %}
Gallery
Com o campo gallery, podemos criar uma lista de imagens e links para formar uma galeria de imagens, como por exemplo em um banner rotativo.
gallery
name = slider
description = Selecione as imagens do slider (tamanho recomendado: 720px)
gallery_image = Selecione uma imagem
gallery_link = Link da imagem (opcional)
gallery_width = 720
Uso:
{% for slide in settings.slider %}
{% set slide_img = slide.image | static_url %}
{% if slide.link is empty %}
<!-- A imagem não possui link -->
<img src="{{ slide_img }}" data-thumb="{{ slide_img }}" alt="" />
{% else %}
<!-- A imagem possui link -->
<a href="{{ slide.link }}"><img src="{{ slide_img }}" data-thumb="{{ slide_img }}" alt="" /></a>
{% endif %}
{% endfor %}
Nota: para conseguir o caminho completo da imagem no servidor, foi utlizado o método static_url.
Font
Funcionamento semelhante ao dropdown, mas direciona a uma lista de famílias de fontes.
Escolha as fontes da sua loja
font
name = main_font
description = Família principal
values
Georgia,"Times New Roman",serif = Georgia
Arial,sans-serif = Arial
Helvetica,Arial,sans-serif = Helvetica
"Times New Roman",Times,serif = Times New Roman
Verdana,Geneva,sans-serif = Verdana
Tahoma,Geneva,sans-serif = Tahoma
"Palatino Linotype","Book Antiqua",Palatino,serif = Palatino Linotype
Impact,Charcoal,sans-serif = Impact
"Open Sans",sans-serif = Open Sans
Uso:
body {
font-family: {{ settings.main_font | raw }};
}
Nota: o método raw é usado para permitir o uso de aspas(" ") no valor.
Patterns
Direcionada à seleção de uma textura para ser usada no site. Você deve colocar os arquivos das texturas dentro da pasta static. No exemplo a seguir, colocamos as mesmas em uma pasta própria dentro de static para auxiliar a organização da mesma.
Texturas do site
patterns
name = background_pattern
description = Escolha uma textura para o fundo
patterns
textura-man = texturas/textura-man.png
textura-man2 = texturas/textura-man2.png
textura-man3 = texturas/textura-man3.png
textura-man4 = texturas/textura-man4.png
textura-man5 = texturas/textura-man5.png
textura-man6 = texturas/textura-man6.png
textura-man7 = texturas/textura-man7.png
textura-man8 = texturas/textura-man8.png
textura-man9 = texturas/textura-man9.png
textura-man10 = texturas/textura-man10.png
textura-man11 = texturas/textura-man11.png
textura-man12 = texturas/textura-man12.png
textura-man13 = texturas/textura-man13.png
textura-man14 = texturas/textura-man14.png
textura-woman = texturas/textura-woman.png
No administrador, a configuração acima virará:
Uso:
body {
background-image: url( "{{ ("texturas/" ~ settings.background_pattern ~ ".png") | static_url }}" );
}