Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Banners configurables de servicios

Los banners de servicios, como su nombre lo indica, son banners configurables por el dueño de la tienda que le permiten mostrar promociones vinculadas con medios de pagos y envíos de una manera mucho más visual y atractiva.

Son configurables porque es posible mostrarlos o no, y en caso de mostrarlos, se pueden modificar los textos de acuerdo a lo que desee comunicar el dueño de la tienda.

Los banners de servicios lucen de esta manera:

Banners de servicios en Tienda Nube

1. Agregar el snipplet banner-services.tpl dentro de la carpeta de snipplets.

 <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. En layout.tpl, llamar al snipplet antes del footer y corroborar que exista el plugin ”Font Awesome”.

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

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

3. En home.tpl agregar el llamado al snipplet debajo del slider o por encima de los productos. La clase banner-services-footer puede ser necesaria o no dependiendo de la plantilla que se esté utilizando. 

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

4. Agregar el snipplet en category.tpl sobre los productos y por debajo del snipplet de “Sort by”. La clase banner-services-category puede ser necesaria o no dependiendo de la plantilla que se esté usando.

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

5. Agregar el CSS que empieza con el comentario /*banner-services styles*/ en el archivo del CSS (no es el SASS).

/*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*/

Media queries

¿Necesitas que el diseño se adapte correctamente a tamaños de smartphones y tablets? Puedes aplicar los siguientes estilos (puede sufrir modificaciones dependiendo de la plantilla base que estés utilizando):

@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. Agrega las configuraciones necesarias en settings.txt. Esto es lo que permitirá que el dueño de la tienda elija si quiere mostrar o no los banners y también modificar los textos dentro de los mismos:

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. Agrega las traducciones a 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. Agrega las configuraciones por default a 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

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.