Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Banners de serviços

Os Banners de Serviços, como o nome diz, são banners configuráveis pelo Administrador Nuvem que permitem mostrar promoções ligadas aos meios de pagamento, de envio e etc, de uma forma mais visual e atrativa.

São configuráveis porque é possível habiitar ou não. Se caso estiver habilitado os textos poderão ser modificados de acordo com o que o logista deseja comunicar.

Os Banners de Serviços aparecem dessa maneira:

Esse exemplo é do template Habitus

1. Adicione o snipplet banner-services.tpl dentro da pasta de snipplets. O código completo do snipplet está abaixo.

(caso você prefira faça download do código dos temas Nuvem Shop).

 <div class="row-fluid">
     <div class="container" id="banner-services">
        {% set num_banners_services = 0 %}
        {% for banner in ['banner_services_01', 'banner_services_02', 'banner_services_03'] %}
            {% set banner_services_title = attribute(settings,"#{banner}_title") %}
            {% set banner_services_description = attribute(settings,"#{banner}_description") %}
            {% set has_banner_services =  banner_services_title or banner_services_description %}
            {% if has_banner_services %}
                {% set num_banners_services = num_banners_services + 1 %}
            {% endif %}
        {% endfor %}

        {% for banner in ['banner_services_01', 'banner_services_02', 'banner_services_03'] %}
            {% set banner_services_title = attribute(settings,"#{banner}_title") %}
            {% set banner_services_description = attribute(settings,"#{banner}_description") %}
            {% set has_banner_services =  banner_services_title or banner_services_description %}
            {% if has_banner_services %}
                 <div class="span{% if num_banners_services == 1 %}12{% elseif num_banners_services == 2 %}6{% elseif num_banners_services == 3 %}4{% endif %} text-center">
                     <div class="banner-service-item">
                         <div class="span3 text-right service-icon">
                             <i class="fa {%if loop.first %}fa-truck{% endif %}{%if loop.index == 2 %}fa-credit-card{% elseif loop.index == 3 %}fa-lock{% endif %}"> </i>
                         </div>
                         <div class="span9 text-left service-text">
                             <h4>{{ banner_services_title }}</h4>
                             <p>{{ banner_services_description }}</p>
                         </div>
                     </div>
                 </div>
              
            {% endif %}
        {% endfor %}
     </div>
 </div>

2. No arquivo layouts/layout.tpl, adicione o snipplet antes do footer e certifique-se de que as fontes do ”Font Awesome” estejam sendo incuídas na página.

2.1. Verifique se existe uma chamada do FontAwesome, se não existir, inclua o código abaixo dentro da tag <head>

{{ '//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css' | css_tag }}

2.2. Adicione o snipplet antes do footer

<div class="banner-services-footer">
    {% if settings.banner_services %}
         {% include 'snipplets/banner-services.tpl' %}
    {% endif %}
</div>

3. No arquivo templates/home.tpl adicione o bloco do snipplet entre o slider e a lista de produtos.A classe banner-services-footer pode ser nevessária ou não, dependendo do layout que você estiver usando. 

{% if settings.banner_services_home %} 
     {% include 'snipplets/banner-services.tpl' %}
{% endif %} 

OU

<div class="banner-services-footer">
    {% if settings.banner_services %}
         {% include 'snipplets/banner-services.tpl' %}
    {% endif %}
</div>

4. Adicione o snipplet no arquivo templates/category.tpl entre o snipplet de "Ordenação de produtos" e a lista de produtos. A classe banner-services-category pode ser necessária ou não dependendo do layout que você estiver usando.

<div class="banner-services-category">
    {% if settings.banner_services_category %} 
        {% include 'snipplets/banner-services.tpl' %}
    {% endif %} 
</div>

5. Adicione o bloco de código CSS abaixo no arquivo static/css/style.css.

/*banner-services styles*/
#banner-services .span4 {
width: 33.3%;
}
#banner-services{
    padding: 20px 0px;
    margin-bottom: 20px;
    margin-top: 20px;
}
#banner-services .span4, .span6, .span12{
    margin: 0px;
}

#banner-services i{
    font-size: 42px;
}
#banner-services .service-text h4{
    text-transform: uppercase;
    font-size: 16px;
}
#banner-services .span4 .banner-service-item, .span6 .banner-service-item, .span12 .banner-service-item{
    width: 390px;
    height: 40px;
    margin: auto;
}
.banner-services-footer #banner-services{
    width: 100%;
    margin-bottom: 0px;
}
/*End Banner Services*/

5.1 O seu layout é responsivo, adicione o bloco de código abaixo em static/css/style.css para o layout funcionar bem em múltiplos devices

@media (max-width: 979px) and (min-width: 768px) {
    /*banner services*/
    #banner-services{
        width: 100%;
    }
    #banner-services .span4 .banner-service-item, .span6 .banner-service-item, .span12 .banner-service-item{
        width: 240px;
    }
    #banner-services .span4 .banner-service-item h4, .span6 .banner-service-item h4, .span12 .banner-service-item h4{
        font-size: 16px;
    }
    #banner-services .span4:not(:last-child) {
    border-right:0px!important;
    }
    /*End Banner Services*/
}

---------------------------------------------------------------------
 
@media (max-width: 767px) {
 /* banner services*/
    #banner-services .span4, .span6, .span12 {
        width: 100%;
    }
    #banner-services .banner-service-item .service-text{
        float:left;
        width: auto;
    }
    #banner-services .banner-service-item .service-icon{
        width:50px;
        float:left;
        margin-right: 10px;
    }
    #banner-services .span4 .banner-service-item, .span6 .banner-service-item, .span12 .banner-service-item {
        width: 310px;
        margin: 25px auto;
        height: 45px;
    }
    #banner-services .span4:not(:last-child) {
        border-right:0px!important;
    }
    #banner-services .span4 .banner-service-item h4, .span6 .banner-service-item h4, .span12 .banner-service-item h4{
        font-size: 15px;
    }
    #banner-services i {
        font-size: 38px;
    }
    /*End Banner Services*/
}

------------------------------------------------------------------------------

@media (max-width: 500px) {
    #banner-services .span4 .banner-service-item h4, .span6 .banner-service-item h4, .span12 .banner-service-item h4{
        font-size: 15px;
    }
    #banner-services i {
        font-size: 38px;
    }
  }

6. Adicione as configurações necessárias no arquivo config/settings.txt. Isto vai permitir que o logista habilite ou não os banners, assim como permite que os textos sejam modificados. Utilize o código abaixo:

Banner de Servicios
	checkbox
		name = banner_services
		description = Mostrar el banner de servicios en toda la tienda (se verá arriba del footer)
	checkbox
		name = banner_services_home
		description = Mostrar el banner de servicios solo en la home (se verá debajo del slider)
	checkbox
		name = banner_services_category
		description = Mostrar el banner de servicios en la lista de productos (se verá arriba de los productos)
	i18n_input
		name = banner_services_01_title
		description = Título del banner para envíos
	i18n_input
		name = banner_services_01_description
		description = Descripción del banner para envíos
	i18n_input
		name = banner_services_02_title
		description = Título del banner para tarjetas de crédito
	i18n_input
		name = banner_services_02_description
		description = Descripción del banner para tarjetas de crédito
	i18n_input
		name = banner_services_03_title
		description = Título del banner para seguridad
	i18n_input
		name = banner_services_03_description
		description = Descripción del banner para seguridad

7. Adicione as seguintes traduções ao arquivo config/translations.txt:

es "Banner de Servicios"
pt "Banner de Serviços"
en "Services Banner"

es "Mostrar el banner de servicios en toda la tienda (se verá arriba del footer)"
pt "Mostrar o banner de serviços em toda loja (aparecerá acima do rodapé)"
en "Enable services banner thought the entire site (it will appear over the footer"

es "Mostrar el banner de servicios solo en la home (se verá debajo del slider)"
pt "Mostrar o banner de serviços somente na home (aparecerá abaixo do slider)"
en "Enable services only in the home page (it will appear under the slider)"

es "Mostrar el banner de servicios en la lista de productos (se verá arriba de los productos)"
pt "Mostrar o banner de serviços na lista de produtos (aparecerá acima do produtos)"
en "Enable services banner in the product category page (it will appear over the products)"

es "Título del banner para envíos"
pt "Título do banner para frete"
en "Shipping banner title"

es "Descripción del banner para envíos"
pt "Descrição do banner de frete"
en "Shipping banner description"

es "Título del banner para tarjetas de crédito"
pt "Título do banner para cartões de crédito"
en "Credit card banner title"

es "Descripción del banner para tarjetas de crédito"
pt "Descrição do banner para cartões de crédito"
en "Credit card banner description"

es "Título del banner para seguridad"
pt "Título do banner para segurança"
en "Secure site banner title"

es "Descripción del banner para seguridad"
pt "Descrição do banner para segurança"
en "Security banner description"

8. Adicione as seguintes configurações padrão ao arquivio config/defaults.txt:

banner_services = 0
banner_services_01_title_es = Envíos gratis
banner_services_01_title_pt = Envios grátis
banner_services_01_title_en = Free Shipping
banner_services_01_description_es = Para compras de más de $100
banner_services_01_description_pt = Para compras acima de R$100,00
banner_services_01_description_en = For purchases that exceeds $100

banner_services_02_title_es = Hasta 12 cuotas sin interés
banner_services_02_title_pt = Até 12 vezes sem juros
banner_services_02_title_en = No extra fee in 12 installments
banner_services_02_description_es = Con todas las tarjetas de crédito
banner_services_02_description_pt = Com todos os cartões de crédito
banner_services_02_description_en = With all credit cards

banner_services_03_title_es = Sitio seguro
banner_services_03_title_pt = Site seguro
banner_services_03_title_en = Safe Site
banner_services_03_description_es = Protegemos tus datos
banner_services_03_description_pt = Protegemos seus dados
banner_services_03_description_en = We protect your data