Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Botão "Mostrar mais produtos"

A funcionalidade Botão "Mostrar mais produtos" adiciona um botão na lista de produtos, para que o usuário possa ver mais itens sem ter que mudar de página através de uma páginação tradicional.

O seu funcionamento é semelhante ao scroll infinito, entretanto, o carregamento dos novos produtos sempre dependerá da interação do usuário. Isso possibilita que ele possa interagir com outras partes do layout confortavelmente, como as informações que estão no rodapé.

Essa funcionalidade está disponível para as páginas de listagem de categorias.

1. Adicione o seguinte bloco de código Javascript no arquivo layouts/layout.tpl:

{% if settings.infinite_scrolling and (template == 'category' or template == 'search') %}
<script type="text/javascript">// ![CDATA[
$(function() {
            new LS.infiniteScroll({
                afterSetup: function() {
                    $('.crumbPaginationContainer').hide();
                },
                afterLoaded: function() {
                    $('.fancybox').fancybox(fancybox_options);
                },
                finishData: function() {
                    $('#loadMoreBtn').remove();
                },
                productGridClass: 'product-table',
                productsPerPage: 16
            });
        });
// ]]>
{% endif %}

2. Em templates/category.tpl, cole o seguinte código subsittuindo o snipplet de páginação atual.

Para encontrar com mais facilidade, adicione procure pela seguinte linha: {% snipplet "pagination.tpl" %}

{% 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 no arquivo  las opciones de configuración en settings.txt para que pueda ser configurado desde el administrador.

checkbox
      name = infinite_scrolling
      description = Permitir que a lista de produtos carregue novos produtos quando chegar ao final da página?

4. Adicione o seguinte bloco de traduções no arquivo translations.txt.

es "Mostrar más productos"
pt "Mostrar mais produtos"
en "Show more products"

5. Adicione os estilos para o botão. isso vai depender de qual layout personalizado você está usando.

O exemplo abaixo é referente ao template 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%;
    }