Tutorial: mostrar mais produtos

No tutorial de hoje, será possível configurar a organização dos produtos da página inicial através do scroll infinito. O scroll pode ser definido de forma simples como “o movimento da tela” para cima e para baixo. Scroll infinito, significaria, portanto, poder descer a tela de forma infinita enquanto houvesse conteúdo a ser mostrado. Para organizar este detalhe em uma loja é necessário seguir os passos abaixo:

1. Em layout.tpl, você deve copiar o seguinte javascript:

{% if settings.infinite_scrolling and (template == 'category' or template == 'search') %}

   <script type="text/javascript">

       $(function() {

           new LS.infiniteScroll({

               afterSetup: function() {

                   $('.crumbPaginationContainer').hide();

               },

               afterLoaded: function() {

                   $('.fancybox').fancybox(fancybox_options);

               },

               finishData: function() {

                   $('#loadMoreBtn').remove();

               },

               productGridClass: 'product-table',

               productsPerPage: 16

           });

       });

   </script>

{% endif %}

2. Em product.tpl, você deve copiar o código a seguir para mostrar o botão de scroll infinito ou a paginação padrão.

{% if settings.infinite_scrolling and not pages.is_last %}

     <a id="loadMoreBtn" class="button secondary"><i class="fa fa-circle-o-notch fa-spin loadingSpin"></i>{{ 'Mostrar más productos' | t }}</a>

{% endif %}

<div class="crumbPaginationContainer bottom">

      <div class='pagination'>

         {% snipplet "pagination.tpl" %}

    </div>

</div>

3. Adicione as opções de configuração em settings.txt.

checkbox

name = infinite_scrolling

description = ¿Permitir que en el listado de productos tus clientes carguen nuevos productos cuando llegan al final de la página?    (Permitir que a lista de produtos de seus clientes carregue novos produtos quando chegar ao final da página?)

4.  Adicione as traduções em translations.txt.

es "Mostrar más productos"

pt "Mostrar mais produtos"

en "Show more products"

5. Adicione estilo ao botão (isso varia de tema para tema). Um exemplo para Luxury:

#loadMoreBtn {

   line-height: 50px;

   width:45%;

   margin: 40px auto;

}

.loadingSpin { display: none;

   float: left;

   font-size: 1.1em;

   transform-origin: 42% 47% 0;

   -webkit-transform-origin: 42% 47% 0;

   -ms-transform-origin: 42% 47% 0;

   position: relative;

   left: 43%;

   top: 31%;

   }

E se você ainda não é parceiro Nuvem, mas gostaria de atender seus (E NOSSOS) clientes com uma solução de e-commercecadastre-se agora e conheça todos os benefícios.


O que você achou desse conteúdo?


Dannie Karam

Com mais de 10 anos de experiência em gerenciamento de projetos digitais, Danniela é comunicadora, escritora e líder do time de Branding da Nuvem Shop. Gosta de música, viagem, pessoas e culturas. E sempre fala demais, especialmente quando escreve de si em terceira pessoa.


    tutorial-mostrar-mais-produtos