search.tpl

Neste arquivo nós carregamos os resultados de uma pesquisa feita na loja. Como na category.tpl, aqui mostramos uma lista de produtos com uma paginação definida pela seguinte etiqueta que determina quantos serão exibidos por página ou cada vez que clicamos 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 %}

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">
                        <span class="js-load-more-spinner" style="display:none;">{% include "snipplets/svg/sync-alt.tpl" with {svg_custom_class: "icon-inline icon-spin"} %}</span>
                        {{ '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">
                     {% include "snipplets/svg/sync-alt.tpl" with {svg_custom_class: "icon-inline icon-3x svg-icon-text icon-spin"} %} 
                </div>
            {% endif %}
        {% else %}
            <p class="text-center">
                {{ "No hubo resultados para tu búsqueda" | translate }}
            </p>
        {% endif %}
    </div>
</section>