Este archivo comienza con algunos seteos importantes a la hora de mostrar el listado de productos de una categoría determinada. Por un lado vamos a tener la comprobación de la existencia de filtros dentro de la categoría:
{% set has_filters = insta_colors|length > 0 or other_colors|length > 0 or size_properties_values|length > 0 or variants_properties|length > 0 %}Luego si la la tienda tiene productos cargados. Este set lo utilizamos para mostrar placeholder cuando el Administrador de la tienda acaba de crearla y no creo ningún producto, pueda ver cómo se vería una categoría:
{% set show_help = not has_products %}Y por último la etiqueta que determina cuántos productos 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 %}Luego recurrimos al set que definimos al comienzo, para comprobar si tenemos filtros, y recurrimos al snippets que muestra los mismos, y luego incorporamos un div que va a ser el espacio para mostrar los filtros aplicados. Este div tiene la clase js-append-filters que le da la funcionalidad:
{% 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>Seguido a esto encontramos el ordenamiento de los productos con el snipplet grid/sort-by.tpl
La porción donde se muestra el listado de productos comienza comprobando que la categoria en la que estamos contenga productos con el siguiente condicional, haciendo referencia a uno de los set del comienzo:
{% if not show_help %}{% endif %}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">
<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>