category.tpl

Este arquivo começa com algumas configurações importantes para mostrar a lista de produtos de uma determinada categoria. Por um lado, teremos a verificação da existência de filtros dentro da categoria:

{% set has_filters = insta_colors|length > 0 or other_colors|length > 0 or size_properties_values|length > 0 or variants_properties|length > 0 %}

Então, se a loja tiver carregado produtos. Usamos esse set para mostrar o espaço reservado quando o Adminstrador da loja acaba de criá-la e não criamos nenhum produto. Posso ver como uma categoria ficaria:

{% set show_help = not has_products %}

E finalmente, a etiqueta que determina quantos produtos serão exibidos por página ou sempre que clicarmos em "mostrar mais produtos":

{% paginate by 12 %}

Deve-se esclarecer que, no caso do tema Base, não utilizamos paginação convencional (com links para páginas: <1 2 3 4 5 6>), mas realizamos uma carga dinâmica, sob os produtos que já tenho visíveis, com um botão que mostra a mensagem "Mostrar mais produtos". Isso significa que, se quisermos alterar o número de produtos por carga, teremos que modificar esse número {% paginate por 12%} e também o JavaScript que fornece a funcionalidade.

Pode ser encontrado em static/store.js.tpl sob o subtítulo // Infinite scroll:

{# /* // Infinite scroll */ #}

{% if pages.current == 1 and not pages.is_last %}
    LS.hybridScroll({
        productGridSelector: '.js-product-table',
        spinnerSelector: '#js-infinite-scroll-spinner',
        loadMoreButtonSelector: '.js-load-more',
        hideWhileScrollingSelector: ".js-hide-footer-while-scrolling",
        productsBeforeLoadMoreButton: 50,
        productsPerPage: 12
    });
{% endif %}

O parâmetro productPerPage: 12 deve corresponder ao {% paginate by 12 %}

Já no corpo html, definimos a estrutura da página da categoria, começando com o título, chamando o snipplet page-header.tpl

{% embed "snipplets/page-header.tpl" with { breadcrumbs: false } %}
    {% block page_header_text %}{{ "Resultados de búsqueda" | translate }}{% endblock page_header_text %}
{% endembed %}

Então nos voltamos para o set que definimos no começo, para verificar se temos filtros, e usamos o snipplet que os mostram, e então incorporamos um div que será o espaço para mostrar os filtros aplicados. Esse div tem a classe js-append-filters que fornece a funcionalidade:

{% if has_filters %}
    <a href="#" class="js-modal-open filter-link" data-toggle="#nav-filters">
        {{ 'Filtrar' | t }} {% include "snipplets/svg/filter.tpl" %} 
    </a>           
    {% embed "snipplets/modal.tpl" with{modal_id: 'nav-filters', modal_class: 'filters modal-docked-small', modal_position: 'left', modal_transition: 'slide', modal_width: 'full'  } %}
        {% block modal_body %}
            {% snipplet "grid/filters.tpl" %}
        {% endblock %}
    {% endembed %}
{% else %}
<h6 class="filter-title">{{ 'Filtro aplicado:' | translate }}</h6>
{% endif %}
<div class="js-append-filters col-12" style="display: none;">
</div>

A seguir, encontramos a ordenação dos produtos com o snipplet grid/sort-by.tpl

A parte em que a lista de produtos é mostrada começa verificando se a categoria em que estamos contém produtos com o seguinte condicional, fazendo referência a um dos sets do 

{% if not show_help %}{% endif %}

Na estrutura da grade do produto, encontraremos o contêiner de grade com uma classe js-product-table, que fornecerá o comportamento de carregamento do produto, que é controlado pelo botão que vem junto com a classe js-load-more

<section class="category-body">
    <div class="container">
        {% if products %}
            <div class="js-product-table row">
                {% include 'snipplets/product_grid.tpl' %}
            </div>
            {% if pages.current == 1 and not pages.is_last %}
                 <div class="text-center mt-5 mb-5">
                    <a class="js-load-more btn btn-primary">
                        <i class="js-load-more-spinner far fa-sync-alt fa-spin" style="display:none;"></i>{{ 'Mostrar más productos' | t }}
                    </a>
                </div>
                 <div id="js-infinite-scroll-spinner" class="mt-5 mb-5 text-center w-100" style="display:none">
                    <i class="far fa-sync-alt fa-spin fa-3x"></i>
                </div>
            {% endif %}
        {% else %}
            <p class="text-center">
                {{(has_filters ? "No tenemos productos en esas variantes. Por favor, intentá con otros filtros." : "Próximamente") | translate}}
            </p>
        {% endif %}
    </div>
</section>