Settings.txt

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 }}" );
}