En este archivo cargamos los resultados de una búsqueda hecha en la tienda. Así como en category.tpl, acá mostramos una lista de productos con un paginado definido por la siguiente etiqueta que determina cuántos se van a mostrar por página o cada vez que hagamos clic en “mostrar más productos”:
{% paginate by 12 %}Cabe aclarar que en el caso del theme Base, no utilizamos paginado convencional (con links a páginas: < 1 2 3 4 5 6 >), sino que realizamos una carga dinámica, bajo los productos que ya tengo visibles, con un botón que muestra el mensaje de “Mostrar más productos”. Esto significa que si queremos cambiar el número de productos por carga, vamos a tener que modificar este número {% paginate by 12 %} y también el JavaScript que le da la funcionalidad.
El mismo se encuentra en static/store.js.tpl bajo el 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 %}El parametro productPerPage: 12 tiene que coincidir con el {% paginate by 12 %}
Ya en el cuerpo del html, definimos la estructura de la pagina de categoria, iniciando con el título, llamando al 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 %}En la estructura de la grilla de productos vamos a encontrara el contenedor de la grilla con una clase js-product-table, que le va a dar el comportamiento de carga de productos, que es controlado por el boton que esta a continuación con la clase 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>