Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Banners de categorias na página inicial

Neste tutorial, você aprenderá a inserir até 3 banners com imagem de fundo e texto na página inicial da sua loja. É possível editá-los na seção "Layout > Personalizar layout", no painel de administração.

1. Adicione o seguinte código em settings.txt:

Inicio | Banners de categorías
    meta
        icon = tags
        advanced = true
    description
        description = Los banners se mostrarán de izquierda a derecha en computadoras y de arriba hacia abajo en celulares
    title
        title = CATEGORÍA 1
    checkbox
        name = banner_01_show
        description = Mostrar banner
    title
        title = Imagen de fondo
    image
        original = banner_01.jpg
        title = Cargar imagen (JPG, GIF, PNG)
        width = 600
        height = 600
    i18n_input
        name = banner_01_title
        description = Título
    i18n_input
        name = banner_01_description
        description = Descripción
    i18n_input
        name = banner_01_button
        description = Texto del botón
    i18n_input
        name = banner_01_url
        description = Link
    dropdown
        name = banner_01_align
        description = Alineación del texto
        values
            left = Izquierda
            center = Centrado
            right = Derecha
    dropdown
        name = banner_01_color
        description = Color del texto
        values
            light = Blanco
            dark = Negro
    title
        title = CATEGORÍA 2
    checkbox
        name = banner_02_show
        description = Mostrar banner
    title
        title = Imagen de fondo
    image
        original = banner_02.jpg
        title = Cargar imagen (JPG, GIF, PNG)
        width = 600
        height = 600
    i18n_input
        name = banner_02_title
        description = Título
    i18n_input
        name = banner_02_description
        description = Descripción
    i18n_input
        name = banner_02_button
        description = Texto del botón
    i18n_input
        name = banner_02_url
        description = Link
    dropdown
        name = banner_02_align
        description = Alineación del texto
        values
            left = Izquierda
            center = Centrado
            right = Derecha
    dropdown
        name = banner_02_color
        description = Color del texto
        values
            light = Blanco
            dark = Negro
    title
        title = CATEGORÍA 3
    checkbox
        name = banner_03_show
        description = Mostrar banner
    title
        title = Imagen de fondo
    image
        original = banner_03.jpg
        title = Cargar imagen (JPG, GIF, PNG)
        width = 600
        height = 600
    i18n_input
        name = banner_03_title
        description = Título
    i18n_input
        name = banner_03_description
        description = Descripción
    i18n_input
        name = banner_03_button
        description = Texto del botón
    i18n_input
        name = banner_03_url
        description = Link
    dropdown
        name = banner_03_align
        description = Alineación del texto
        values
            left = Izquierda
            center = Centrado
            right = Derecha
    dropdown
        name = banner_03_color
        description = Color del texto
        values
            light = Blanco
            dark = Negro

2. Adicione os valores padrão em defaults.txt:

banner_01_align = center
banner_01_color = light
banner_02_align = center
banner_02_color = light
banner_03_align = center
banner_03_color = light

3. Dentro da pasta snipplets, crie o arquivo home-banners.tpl com o seguinte código (dependendo do layout ou layout personalizado que estiver utilizando). Para o caso em que o BS3 é usado, deve-se adicionar o seguinte:

<div class="container banner-wrapper">
    <div class="row">
        {% set num_banners = 0 %}
        {% for banner in ['banner_01', 'banner_02', 'banner_03'] %}
            {% set banner_show = attribute(settings,"#{banner}_show") %}
            {% set banner_title = attribute(settings,"#{banner}_title") %}
            {% set banner_button_text = attribute(settings,"#{banner}_button") %}
            {% set has_banner =  banner_show and (banner_title or banner_description or "#{banner}.jpg" | has_custom_image) %}
            {% if has_banner %}
                {% set num_banners = num_banners + 1 %}
            {% endif %}
        {% endfor %}


        {% for banner in ['banner_01', 'banner_02', 'banner_03'] %}
            {% set banner_show = attribute(settings,"#{banner}_show") %}
            {% set banner_title = attribute(settings,"#{banner}_title") %}
            {% set banner_description = attribute(settings,"#{banner}_description") %}
            {% set banner_button_text = attribute(settings,"#{banner}_button") %}
            {% set banner_url = attribute(settings,"#{banner}_url") %}
            {% set banner_align = attribute(settings,"#{banner}_align") %}
            {% set banner_color = attribute(settings,"#{banner}_color") %}
            {% set has_banner =  banner_show and (banner_title or banner_description or "#{banner}.jpg" | has_custom_image) %}
            {% set has_banner_text =  banner_title or banner_description or banner_button_text %}
            {% if has_banner %}
                <div class="col-sm-{% if num_banners == 1 %}6 col-sm-offset-3{% elseif num_banners == 2 %}6{% elseif num_banners == 3 %}4{% endif %}">
                    <div class="banner-with-text {% if banner_align == 'center' %} text-center{% elseif banner_align == 'right' %} text-right{% else %}{% endif %}">
                        {% if banner_url %}
                            <a class="banner-with-text-link" href="{{ banner_url }}"{% if banner_title %} alt="{{ banner_title }}" title="{{ banner_title }}"{% endif %}>
                        {% endif %}
                        <div class="image-container{% if has_banner_text %} overlay{% endif %}{% if banner_color == 'dark' %} light{% endif %}"{% if "#{banner}.jpg" | has_custom_image %} style="background-image:url({{ "#{banner}.jpg" | static_url }});"{% endif %}>
                        </div>
                        <div class="text-container{% if banner_color == 'dark' %} dark{% endif %}">
                            {% if banner_title %}
                                <div class="banner-with-text-title">{{ banner_title }}</div>
                            {% endif %}
                            {% if banner_description %}
                                <div class="banner-with-text-paragraph m-bottom p-bottom p-none-xs">{{ banner_description }}</div>
                            {% endif %}
                            {% if banner_url and banner_button_text %}
                                <div class="btn btn-primary btn-small">{{ banner_button_text }}</div>
                            {% endif %}
                        </div>
                        {% if banner_url %}
                            </a>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

4. Insira o snipplet criado em home.tpl

{#  **** Categories banners ****  #}
{% include 'snipplets/home-banners.tpl' %}

5. Adicione os estilos CSS (dependendo do layout ou layout personalizado que está sendo utilizado). O seguinte código deve ser inserido:

Dentro de styles.scss.tpl:

{# /* Banners */ #}


.banner-with-text {
    position: relative;
    margin: 20px 0;
    padding-top: 100%;
    overflow: hidden;
    .banner-with-text-link {
        display: block;
        width: 100%;
        height: 100%;
    }
    .image-container {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-transition: all 0.8s ease;
      -ms-transition: all 0.8s ease;
      -moz-transition: all 0.8s ease;
      -o-transition: all 0.8s ease;
      transition: all 0.8s ease;
    }
    &:hover .image-container,
    &:focus .image-container {
      -webkit-transform: scale(1.03);
      -ms-transform: scale(1.03);
      -moz-transform: scale(1.03);
      -o-transform: scale(1.03);
      transform: scale(1.03);
    }
    .text-container {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 9;
      width: 100%;
      padding: 30px 20px; 
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      .banner-with-text-title {
        margin-bottom: 15px;
        font-size: 34px;
        font-weight: 700;
        line-height: 36px;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
      }
      .banner-with-text-paragraph {
        display: -webkit-box;
        margin-bottom: 15px;
        overflow: hidden;
        text-shadow: 1px 1px 3px rgba(0,0,0,.4);
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
    .image-container.overlay:after {
      position: absolute;
      top: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.3;
      content: '';
      -webkit-transition: all 0.8s ease;
      -ms-transition: all 0.8s ease;
      -moz-transition: all 0.8s ease;
      -o-transition: all 0.8s ease;
      transition: all 0.8s ease;
    }
    &:hover .image-container:after {
      opacity: 0.5;
    }
}

Dentro de custom.scss.tpl (As variáveis SAAS podem variar de acordo com o layout):

{# /* Banners */ #}


.banner-with-text {
    .text-container {
        color: white;
        .banner-with-text-title {
            font-family: $heading-font;
        }
    }
    .text-container.dark {
        color: black;
        .banner-with-text-title {
            text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.2);
        }
        .banner-with-text-paragraph {
            text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.4);
        }
    }
    .image-container.light:after {
        background: white;
    }
}

6. Adicione as traduções em translations.txt:

es "Inicio | Banners de categorías"
pt "Início | Banners de categorias"
en "Home | Categories banners"


es "Los banners se mostrarán de izquierda a derecha en computadoras y de arriba hacia abajo en celulares"
pt "Os banners serão exibidos da esquerda para a direita em computadores, e de cima para baixo em celulares."
en "Banners will be displayed from left to right on desktop and from top to bottom on mobile"


es "CATEGORÍA 1"
pt "CATEGORIA 1"
en "CATEGORY 1"


es "CATEGORÍA 2"
pt "CATEGORIA 2"
en "CATEGORY 2"


es "CATEGORÍA 3"
pt "CATEGORIA 3"
en "CATEGORY 3"


es "Mostrar banner"
pt "Mostrar banner"
en "Show banner"


es "Imagen de fondo"
pt "Imagem de fundo"
en "Background image"


es "Cargar imagen (JPG, GIF, PNG)"
pt "Carregar imagem (JPG, GIF, PNG)"
en "Upload image (JPG, GIF, PNG)"


es "Título"
pt "Título"
en "Title"


es "Descripción"
pt "Descrição"
en "Description"


es "Texto del botón"
pt "Texto do botão"
en "Button text"


es "Link"
pt "Link"
en "Link"


es "Alineación del texto"
pt "Alinhamento do texto"
en "Text align"


es "Izquierda"
pt "Esquerda"
en "Left"


es "Centrado"
pt "Centralizado"
en "Center"


es "Derecha"
pt "Direita"
en "Right"


es "Color del texto"
pt "Cor do texto"
en "Text color"


es "Blanco"
pt "Branco"
en "White"


es "Negro"
pt "Preto"
en "Black"