Banners configurables de servicios Last Modified on 31/08/2015 11:48 am ART 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: 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 class="span9 text-left service-text"> <h4>{{ banner_services_title </h4> <p>{{ banner_services_description </p> {% endif % {% endfor % 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 % 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 % 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-serviceitem,.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.bannerservice-item,.span12.banner-service-item{ width: 240px; #banner-services.span4.banner-service-item h4,.span6.bannerservice-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.bannerservice-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.bannerservice-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.bannerservice-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) name = banner_services_01_title description = Título del banner para envíos name = banner_services_01_description description = Descripción del banner para envíos
crédito crédito name = banner_services_02_title description = Título del banner para tarjetas de name = banner_services_02_description description = Descripción del banner para tarjetas de name = banner_services_03_title description = Título del banner para seguridad 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