Tutorial: mostrar mais produtos

Por: Dannie Karam
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.

Faça como +60mil lojas e
crie a sua Nuvemshop

Testar 30 dias grátis
Crie a sua loja na Nuvemshop

Sabemos que migrar sua loja não é uma decisão simples.

Descubra os benefícios e facilidades que a Nuvemshop oferece exclusivamente para migrações.

Saiba mais sobre a migração