Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

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