QuickShop

Neste tutorial veremos como adicionar um pop-up com o formulário do produto, que pode ser visto no item da lista de produtos em desktops.

HTML

1. A primeira coisa que vamos fazer é criar a pasta product dentro da pasta snipplets e, em seguida, adicionar o snipplet product-quickshop.tpl com o seguinte código:

{% embed "snipplets/modal.tpl" with{modal_id: 'quickshop-' ~ product.id ~ '', modal_position: 'bottom', modal_transition: 'slide', modal_header: true, modal_footer: true, modal_width: 'centered'  } %}
    {% block modal_head %}
        <span itemprop="name">
            {{ product.name }}
        </span>
    {% endblock %}
    {% block modal_body %}
        <div id="quick{{ product.id }}" class="js-product-container js-quickshop-container" data-variants="{{ product.variants_object | json_encode }}" itemscope itemtype="http://schema.org/Product">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-7 px-0 px-sm-3">
                        <div style="padding-bottom: {{ product.featured_image.dimensions['height'] / product.featured_image.dimensions['width'] * 100}}%;">
                            <img alt="{{ product.featured_image.alt }}" title="{{ product.featured_image.alt }}" src="{{ 'images/empty-placeholder.png' | static_url }}" data-src="{{ product.featured_variant_image | product_image_url('huge')}}" class="lazyload img-absolute img-absolute-centered product-slider-image" />
                            {% include 'snipplets/labels.tpl' with {'product_detail': true} %}
                        </div>
                    </div>
                    <div class="col">
                        {% include 'snipplets/product/product-form.tpl' with {quickshop: true} %}


                        {% if product.description != '' %}
                            <h5 class="mb-3">{{ "Descripción" | translate }}</h5>
                            {{ product.description | plain | truncateWords(100) }} ...
                            <a class="btn btn-link float-left mt-2" href="{{ product.url }}" title="{{ product.name }}">{{ "Ver <strong>{1}</strong> en detalle" | translate(product.name) }}</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}
    {% block modal_foot %}
        <a class="btn btn-link float-right" href="#" class="js-modal-close float-right">{{ 'Cerrar' | translate }}</a>
    {% endblock %}
{% endembed %}

Este snipplet contém duas colunas, uma para a imagem e outra para o formulário do produto. Deve ser mencionado que estamos chamando dois snipplets que são próprios do tema Base:

  • labels.tpl é um snipplet para exibir etiquetas com desconto, frete grátis e quando não há estoque. No tema Base, ele está dentro da pasta snipplets.
    Se seu design não é baseado em Base, recomendamos que você crie este tpl e adicione o HTML das etiquetas dentro.
  • product-form.tpl . Como o nome indica, é um snipplet para o formulário do produto (preço, variantes, taxas, quantidades, botão de adicionar ao carrinho e descrição). No tema Base, está dentro da pasta snipplets/product.
    Se no seu caso você não tiver esse tpl, substitua a chamada  no product-quickshop.tpl com o HTML do formulário de produto do seu layout, mas lembre-se de adaptar as etapas que seguem neste tutorial no seu código (se elas se aplicarem) .

2. Adicionamos o link para ver o modal ou o pop-up e a chamada para o snipplet product-quickshop.tpl dentro do arquivo item.tpl da pasta snipplets/grid, dependendo de como seu código está atualizado, essa alteração pode ter que ser aplicada no snipplet single_product .tpl.

Para o link que abre o modal, precisamos do seguinte código, que está localizado dentro do contexto da imagem:

{% if settings.quick_shop %}
    <a href="#" class="js-modal-open item-quickshop btn btn-primary d-sm-block" data-toggle="#quickshop-{{ product.id }}" >
        {{ 'Vista rápida' | translate }}
    </a>
{% endif %}

Em seguida, abaixo de tudo, adicionamos a chamada para o modal, se seu layout utiliza um plugin como Masonry, recomendamos que o modal seja encontrado depois de fechar o div do item do produto.

{% if settings.quick_shop %}
    {% snipplet 'product/product-quickshop.tpl' %}
{% endif %}

3.  No snipplet installments.tpl, que no Base está dentro da pasta snipplets/payments, localize o seguinte condicional (ocorrem duas vezes):

{% if product_detail and installments_info %}

E substitua-o por:

{% if product_detail and installments_info and not quickshop %}

Se o seu layoutnão é baseado no tema Base, a alteração acima não se aplica e você pode precisar chamar o snipplet que mostra as taxas no detalhe do produto, geralmente chamado installments_in_product.tpl

4. Mais uma vez, este passo aplica-se apenas ao código baseado no tema Base. Nós localizamos o snipplet product-form.tpl dentro da pasta snipplets/product

Dentro dele incluímos a chamada para page-header.tpl com o condicional {% if not quickshop%} sendo assim:

{% if not quickshop %}
    <div itemprop="name">
        {% embed "snipplets/page-header.tpl" %}
            {% block page_header_text %}{{ product.name }}{% endblock page_header_text %}
        {% endembed %}
    </div>
{% endif %}

Dentro do product-form.tpl, inclua o preço, o texto para promoções e a chamada para snipplet installments.tpl, em um div sob o condicional {% if quickshop%}. Parece assim:

{% if quickshop %}

<div class="mb-4">

{% endif %}
…
{% if quickshop %}

</div>

{% endif %}

Localizamos a chamada para o snipplet installments.tpl que se parece com isso:

{% include "snipplets/payments/installments.tpl" with {'product_detail' : true} %}

E nós o substituimos com o seguinte (para aplicar o condicional "if quickshop"):

{# Product installments #}

{% if quickshop %}
    {% include "snipplets/payments/installments.tpl" with {'product_detail' : true, 'quickshop': true}  %}
{% else %}
    {% include "snipplets/payments/installments.tpl" with {'product_detail' : true} %}
{% endif %}

Após o formulário do produto, não mostraremos a calculadora de envio, pois esse pop-up é uma visualização rápida e não um formulário completo. Para evitar mostrar a parte dos fretes, colocamos a condicional que a inclui:

{% if settings.shipping_calculator_product_page and not product.free_shipping %}

E nós adicionamos o condicional “not quickshop”

{% if settings.shipping_calculator_product_page and not product.free_shipping and not quickshop %}

Por fim, incluímos a descrição do produto com o mesmo condicional, sendo assim:

{% if not quickshop %}

    {# Product payments details #}

    {% include 'snipplets/payments/payments.tpl' %}

    {# Product share #}

    {% include 'snipplets/social/social-share.tpl' %}

    {# Product description #}

    {% if product.description is not empty %}
        <div class="product-description user-content">
            <h5 class="my-3">{{ "Descripción" | translate }}</h5>
            {{ product.description }}
        </div>
    {% endif %}

{% endif %}

5. Agora temos que mudar o snipplet que mostra as variantes do produto. No caso do Base, é chamado product-variants.tpl e está na pasta snipplets/product. Se o seu layoutnão tem este arquivo, as variantes podem estar no snipplet variants.tpl ou diretamente no template product.tpl

Para o código do Base, simplesmente colocamos o div com a classe js-product-variants e adicionamos o seguinte condicional:

{% if quickshop %} js-product-quickshop-variants{% endif %} 

Se o seu código não se assemelhar ao do Base, recomendamos que, após localizar o código da variante, faça o seguinte:

Inclua o for que itera as variantes com um div, veja como:

<div class="js-product-variants {% if quickshop %} js-product-quickshop-variants{% endif %} form-row">
{% for variation in product.variations %}
….
</div>

Depois, na seleção de cada variante, inclua a classe js-variation-option e exclua o JavaScript in-line semelhante a este:

onchange="LS.changeVariant…”

6. Agora precisamos criar o snipplet para o componente modal ou pop-up dentro da pasta snipplets. Este tpl é chamado modal.tpl e o código é:

{# /*============================================================================
  #Modal
==============================================================================*/

#Properties
    // ID
    // Position - Top, Right, Bottom, Left
    // Transition - Slide and Fade
    // Width - Full and Box
    // modal_form_action - For modals that has a form


#Head
    // Block - modal_head
#Body
    // Block - modal_body
#Footer
    // Block - modal_footer


#}


{% set modal_overlay = modal_overlay | default(true) %}


<div id="{{ modal_id }}" class="js-modal modal modal-{{ modal_class }} modal-{{modal_position}} transition-{{modal_transition}} modal-{{modal_width}} transition-soft" style="display: none;">
    {% if modal_form_action %}
    <form action="{{ modal_form_action }}" method="post" class="{{ modal_form_class }}">
    {% endif %}
    <div class="js-modal-close modal-header">
        <span class="modal-close">
            {% include "snipplets/svg/times.tpl" with {svg_custom_class: "icon-inline svg-icon-text"} %}
        </span>
        {% block modal_head %}{% endblock %}
    </div>
    <div class="modal-body">
        {% block modal_body %}{% endblock %}
    </div>
    {% if modal_footer %}
        <div class="modal-footer d-md-block">
            {% block modal_foot %}{% endblock %}
        </div>
    {% endif %}
    {% if modal_form_action %}
    </form>
    {% endif %}
</div>

7. Finalmente, para a parte HTML, precisamos adicionar uma pasta SVG dentro da pasta snipplets. Aqui vamos adicionar o SVG para o ícone para fechar o popup com o nome times.tpl

times.tpl

<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>

CSS

Requisito:

Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).

1. Adicionamos o seguinte SASS de cores em style-colors.scss.tpl (ou na stylesheet do seu layout que possui as cores e fontes da loja). Lembre-se de que as variáveis de cores e fontes podem variar em relação ao seu layout:

@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
  }
    #{$property}: $value;
}


/* // Modals */


.modal{
  color: $main-foreground;
  background-color:$main-background;
}


/* // Links */


.btn-link{
  color: $primary-color;
  fill: $primary-color;
  text-transform: uppercase;
  border-bottom: 1px solid;
  font-weight: bold;
  cursor: pointer;
  &:hover,
  &:focus{
    color: rgba($primary-color, .5);
    fill: rgba($primary-color, .5);
  }
}

2. Adicione os estilos no arquivo static/style-critical.tpl

Se em seu layout você usar um stylesheet para o CSS crítico, precisaremos do seguinte código dentro dele, do contrário, você pode unificar o CSS dos passos 2 e 3 em um único arquivo.

.item-quickshop{
  position: absolute;
  bottom: -10%;
}

3. Adicione os estilos no arquivo static/style-async.tpl

Se em seu layout você usar um stylesheet CSS assíncrono, precisaremos do seguinte código dentro dela, do contrário, você pode unificar o CSS dos passos 2 e 3 em um único arquivo.

@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
  }
    #{$property}: $value;
}


/* // Modals */


.modal {
  position: fixed;
  top: 0;
  display: block;
  width: 80%;
  height: 100%;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transition: all .2s cubic-bezier(.16,.68,.43,.99);
  z-index: 20000;
  &-header{
    width: calc(100% + 20px);
    margin: -10px 0 10px -10px;
    padding: 10px 15px;
    font-size: 20px;
  }
  &-footer{
    padding: 10px;
    clear: both;
  }
  &-full {
    width: 100%;
  }
  &-docked-sm{
    width: 100%;
  }
  &-docked-small{
    width: 80%;
  }
  &-top{
    top: -100%;
    left: 0;
  }
  &-bottom{
    top: 100%;
    left: 0;
  }
  &-left{
    left: -100%;
  }
  &-right{
    right: -100%;
  }
  &-centered{
    height: 100%;
    width: 100%;
  }
  &-top.modal-show,
  &-bottom.modal-show {
    top: 0;
  }
  &-left.modal-show {
    left: 0;
  }
  &-right.modal-show {
    right: 0;
  }
  &-close { 
    display: inline-block;
    padding: 1px 5px 5px 0;
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;
  }
  .tab-group{
    margin:  0 -10px 20px -10px;
  }
}


.modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000047;
  z-index: 10000;
}


{# /* // Grid item */ #}


.item-quickshop{
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 1;
  @include prefix(transition, all 0.2s ease, webkit ms moz o);
}


.item-image:hover .item-quickshop{
  bottom: 50%;
}

/* // Min width 768px */


@media (min-width: 768px) { 


/* //// Components */


 /* Modals */


  .modal{
    &-centered{
      height: 80%;
      width: 80%;
      left: 10%;
      margin: 5% auto;
    }
    &-docked-sm{
      width: 500px;
    }
    &-docked-small{
      width: 350px;
    }
  }
}

JS

1. JavaScript precisam ser adicionados no arquivo store.js.tpl (ou onde você tem suas funções JS). O código que precisamos é o seguinte:

O JS para os modais funcionarem:

{#/*============================================================================
      #Modals
    ==============================================================================*/ #}


    var $modal_close = $('.js-modal-close');
    var $modal_open = $('.js-modal-open');
    
    $modal_open.click(function (e) {
        e.preventDefault(); 
        var $modal_id = $(this).data('toggle');
        $(".js-modal-overlay").fadeToggle();
        if ($($modal_id).hasClass("modal-show")) {
            $($modal_id).removeClass("modal-show").delay(200).hide(0);
        } else {
            $($modal_id).detach().insertAfter(".js-modal-overlay").show(0).addClass("modal-show");
        }             
    });


    $modal_close.click(function (e) {
        e.preventDefault();  
        $(this).closest(".js-modal").removeClass("modal-show").delay(200).hide(0); 
        $(".js-modal-overlay").fadeOut(300);     
    });


    $(".js-modal-overlay").click(function (e) {
        e.preventDefault();  
        $(".js-modal.modal-show").removeClass("modal-show").delay(200).hide(0);   
        $(this).fadeOut(300);   
    });

O JS para atualizar o produto ao alterar variantes:

$(document).on("change", ".js-variation-option", function(e) {
    var $parent = $(this).closest(".js-product-variants");
    var quick_id = $(this).closest(".js-quickshop-container").attr("id");
    if($parent.hasClass("js-product-quickshop-variants")){
        LS.changeVariant(changeVariant, '#' + quick_id);
    } else {
        LS.changeVariant(changeVariant, '#single-product');
    }
});

2. Localizamos a função LS.addToCartEnhanced, que é usada ao adicionar um produto ao carrinho ajax e dentro da seguinte função:

Dentro do callback callback_add_to_cart, adicionamos o seguinte:

// Hide modal if it is quickshop
$(".js-modal.modal-show").removeClass("modal-show").delay(200).hide(0); 
$(".js-modal-overlay").fadeOut(300);   

Si no tenés el callback crealo con este código:

var callback_add_to_cart = function(){


}

3. Se seu layout não for baseado no tema Base, você não precisará desta etapa. Caso contrário, no arquivo external.js.tpl dentro da pasta static/js, adicione o JS dos modais do Bootstrap:

/*!
 * Bootstrap v3.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under the MIT license
 */

if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(t){"use strict";var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||1==e[0]&&9==e[1]&&e[2]<1||e[0]>3)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4")}(jQuery),+function(t){"use strict";function e(e,o){return this.each(function(){var s=t(this),n=s.data("bs.modal"),a=t.extend({},i.DEFAULTS,s.data(),"object"==typeof e&&e);n||s.data("bs.modal",n=new i(this,a)),"string"==typeof e?n[e](o):a.show&&n.show(o)})}var i=function(e,i){this.options=i,this.$body=t(document.body),this.$element=t(e),this.$dialog=this.$element.find(".modal-dialog"),this.$backdrop=null,this.isShown=null,this.originalBodyPad=null,this.scrollbarWidth=0,this.ignoreBackdropClick=!1,this.fixedContent=".navbar-fixed-top, .navbar-fixed-bottom",this.options.remote&&this.$element.find(".modal-content").load(this.options.remote,t.proxy(function(){this.$element.trigger("loaded.bs.modal")},this))};i.VERSION="3.4.1",i.TRANSITION_DURATION=300,i.BACKDROP_TRANSITION_DURATION=150,i.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},i.prototype.toggle=function(t){return this.isShown?this.hide():this.show(t)},i.prototype.show=function(e){var o=this,s=t.Event("show.bs.modal",{relatedTarget:e});this.$element.trigger(s),this.isShown||s.isDefaultPrevented()||(this.isShown=!0,this.checkScrollbar(),this.setScrollbar(),this.$body.addClass("modal-open"),this.escape(),this.resize(),this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',t.proxy(this.hide,this)),this.$dialog.on("mousedown.dismiss.bs.modal",function(){o.$element.one("mouseup.dismiss.bs.modal",function(e){t(e.target).is(o.$element)&&(o.ignoreBackdropClick=!0)})}),this.backdrop(function(){var s=t.support.transition&&o.$element.hasClass("fade");o.$element.parent().length||o.$element.appendTo(o.$body),o.$element.show().scrollTop(0),o.adjustDialog(),s&&o.$element[0].offsetWidth,o.$element.addClass("in"),o.enforceFocus();var n=t.Event("shown.bs.modal",{relatedTarget:e});s?o.$dialog.one("bsTransitionEnd",function(){o.$element.trigger("focus").trigger(n)}).emulateTransitionEnd(i.TRANSITION_DURATION):o.$element.trigger("focus").trigger(n)}))},i.prototype.hide=function(e){e&&e.preventDefault(),e=t.Event("hide.bs.modal"),this.$element.trigger(e),this.isShown&&!e.isDefaultPrevented()&&(this.isShown=!1,this.escape(),this.resize(),t(document).off("focusin.bs.modal"),this.$element.removeClass("in").off("click.dismiss.bs.modal").off("mouseup.dismiss.bs.modal"),this.$dialog.off("mousedown.dismiss.bs.modal"),t.support.transition&&this.$element.hasClass("fade")?this.$element.one("bsTransitionEnd",t.proxy(this.hideModal,this)).emulateTransitionEnd(i.TRANSITION_DURATION):this.hideModal())},i.prototype.enforceFocus=function(){t(document).off("focusin.bs.modal").on("focusin.bs.modal",t.proxy(function(t){document===t.target||this.$element[0]===t.target||this.$element.has(t.target).length||this.$element.trigger("focus")},this))},i.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keydown.dismiss.bs.modal",t.proxy(function(t){27==t.which&&this.hide()},this)):this.isShown||this.$element.off("keydown.dismiss.bs.modal")},i.prototype.resize=function(){this.isShown?t(window).on("resize.bs.modal",t.proxy(this.handleUpdate,this)):t(window).off("resize.bs.modal")},i.prototype.hideModal=function(){var t=this;this.$element.hide(),this.backdrop(function(){t.$body.removeClass("modal-open"),t.resetAdjustments(),t.resetScrollbar(),t.$element.trigger("hidden.bs.modal")})},i.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},i.prototype.backdrop=function(e){var o=this,s=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var n=t.support.transition&&s;if(this.$backdrop=t(document.createElement("div")).addClass("modal-backdrop "+s).appendTo(this.$body),this.$element.on("click.dismiss.bs.modal",t.proxy(function(t){return this.ignoreBackdropClick?void(this.ignoreBackdropClick=!1):void(t.target===t.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus():this.hide()))},this)),n&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!e)return;n?this.$backdrop.one("bsTransitionEnd",e).emulateTransitionEnd(i.BACKDROP_TRANSITION_DURATION):e()}else if(!this.isShown&&this.$backdrop){this.$backdrop.removeClass("in");var a=function(){o.removeBackdrop(),e&&e()};t.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one("bsTransitionEnd",a).emulateTransitionEnd(i.BACKDROP_TRANSITION_DURATION):a()}else e&&e()},i.prototype.handleUpdate=function(){this.adjustDialog()},i.prototype.adjustDialog=function(){var t=this.$element[0].scrollHeight>document.documentElement.clientHeight;this.$element.css({paddingLeft:!this.bodyIsOverflowing&&t?this.scrollbarWidth:"",paddingRight:this.bodyIsOverflowing&&!t?this.scrollbarWidth:""})},i.prototype.resetAdjustments=function(){this.$element.css({paddingLeft:"",paddingRight:""})},i.prototype.checkScrollbar=function(){var t=window.innerWidth;if(!t){var e=document.documentElement.getBoundingClientRect();t=e.right-Math.abs(e.left)}this.bodyIsOverflowing=document.body.clientWidth<t,this.scrollbarWidth=this.measureScrollbar()},i.prototype.setScrollbar=function(){var e=parseInt(this.$body.css("padding-right")||0,10);this.originalBodyPad=document.body.style.paddingRight||"";var i=this.scrollbarWidth;this.bodyIsOverflowing&&(this.$body.css("padding-right",e+i),t(this.fixedContent).each(function(e,o){var s=o.style.paddingRight,n=t(o).css("padding-right");t(o).data("padding-right",s).css("padding-right",parseFloat(n)+i+"px")}))},i.prototype.resetScrollbar=function(){this.$body.css("padding-right",this.originalBodyPad),t(this.fixedContent).each(function(e,i){var o=t(i).data("padding-right");t(i).removeData("padding-right"),i.style.paddingRight=o?o:""})},i.prototype.measureScrollbar=function(){var t=document.createElement("div");t.className="modal-scrollbar-measure",this.$body.append(t);var e=t.offsetWidth-t.clientWidth;return this.$body[0].removeChild(t),e};var o=t.fn.modal;t.fn.modal=e,t.fn.modal.Constructor=i,t.fn.modal.noConflict=function(){return t.fn.modal=o,this},t(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(i){var o=t(this),s=o.attr("href"),n=o.attr("data-target")||s&&s.replace(/.*(?=#[^\s]+$)/,""),a=t(document).find(n),r=a.data("bs.modal")?"toggle":t.extend({remote:!/#/.test(s)&&s},a.data(),o.data());o.is("a")&&i.preventDefault(),a.one("show.bs.modal",function(t){t.isDefaultPrevented()||a.one("hidden.bs.modal",function(){o.is(":visible")&&o.trigger("focus")})}),e.call(a,r,this)})}(jQuery);

Configurações

No arquivo config/settings.txt, adicionaremos um checkbox para ativar e desativar a funcionalidade. Vamos colocá-lo na seção Lista de produtos.

    title
        title = Pop-up de compra rápida
    checkbox
        name = quick_shop
        description = Permitir que tus clientes puedan agregar productos a su carrito rápidamente desde una ventana emergente en el listado de productos

Traduções

Nesta etapa, adicionamos os textos para as traduções no arquivo  config/translations.txt

es "Vista rápida"
pt "Espiar"
en "Quickshop"
es_mx "Vista rápida"

es "Ver <strong>{1}</strong> en detalle"
pt "Ver <strong>{1}</strong> em detalhes"
en "See <strong>{1}</strong> in detail"
es_mx "Ver <strong>{1}</strong> en detalle"

es "Pop-up de compra rápida"
pt "Visualização rápida"
es_mx "Pop-up de compra rápida"

es "Permitir que tus clientes puedan agregar productos a su carrito rápidamente desde el listado de productos"
pt "Permitir que seus clientes possam agregar produtos ao seu carrinho rapidamente na lista de produtos"
es_mx "Permitir que tus clientes puedan agregar productos a su carrito rápidamente desde el listado de productos"

Ativação

Por fim, para ativar esses banners, você pode fazer isso no Adminstrador Nuvem, na seção Personalizar meu layout atual na Lista de produtos: