Como implementar o scroll infinito?

Os templates da Nuvem Shop oferecem scroll infinito por padrão, ou seja, a medida que o usuário rola a página, mais produtos são mostrados automaticamente. Para aplicar esse comportamento, você deve ter em sua conta as seguintes configurações:

O código para criar a lista de produtos deve estar encapsulado dentro de um snipplet próprio, chamado de product_grid.tpl e localizado dentro da pasta snipplets.
Colocar o seguinte código dentro de layout.tpl:

<!-- código para habilitar o scroll infinto -->
{% if settings.infinite_scrolling and (template == 'category' or template == 'search') %}
    <script type="text/javascript">
        $(function() {
            new LS.infiniteScroll({
                afterSetup: function() {
                    //Esconder os elementos de paginação do design
                    $('.crumbPaginationContainer').hide();
                },
                productGridClass: 'product-table'
            });
        });
    </script>
{% endif %}

Como esse código é originado de um template da Nuvem Shop, é preciso realizar algumas mudanças. O construtor de LS.infiniteScroll pode receber os seguintes parâmetros:

• afterSetup: Função chamada logo após a habilitação do scroll infinito. Seu uso clássico é para esconder os componentes de paginação do layout. Valor padrão: function(){}
• productGridClass: Classe CSS que será aplicado no container da lista de produtos. Valor padrão: ''
• productsPerPage: Quantidade de produtos carregados a medida que o usuário rola a página. Valor padrão: 9
• loadingClass: classe CSS do elemento que aparece enquanto mais produtos são carregados. Valor padrão: 'infinite-scroll-loading'
• loadingElement: HTML do elemento que aparece enquanto mais produtos são carregados. Valor padrão: '<div class="infinite-scroll-loading"></div>'
• bufferPx: Quantidade de pixels antes do fim da página a partir de que é disparado o carregamento de novos produtos. Valor padrão: 150

Colocar a formatação de CSS que corresponda ao elemento indicado pelo plugin.
Colocar uma opção dentro de settings.txt que permita desabilitar o comportamento de scroll infinito. Se você deseja mantê-lo por padrão habilitado, modificar o defaults.txt. Em nosso exemplo o nome da opção deveria ser infinite_scrolling.

Não remova do HTML o código de paginação mesmo que você habilite o scroll infinito, pois os buscadores o utilizam para indexar a loja de maneira apropriada. Eliminá-lo impactaria negativamente em todo o SEO da loja.