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.

Ganhe tempo e receba conteúdos da Nuvemshop no seu e-mail Ganhe tempo

Receba semanalmente uma curadoria dos melhores conteúdos sobre Marketing, Vendas, Gestão e E-commerce diretamente no seu e-mail.

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

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

Nossa resposta ao Coronavírus

Conheça a iniciativa #TamoJunto. Todas as ações que estamos criando aqui na Nuvemshop para te ajudar neste momento.

Conhecer a #TamoJunto