Las plantillas de Tienda Nube ofrecen scroll infinito por defecto. Para poder imitar este comportamiento, debes tener en cuenta las siguientes consideraciones:
1. El código para crear listado de productos tiene que estar encapsulado en un template propio ubicado en snipplets/product_grid.tpl
2. Colocar el siguiente código en layout.tpl:
<!-- código para habilitar el scroll infinito -->
{% if settings.infinite_scrolling and (template == 'category' or template == 'search') %}
<script type="text/javascript">
$(function() {
new LS.infiniteScroll({
afterSetup: function() {
//Esconde los elementos de paginación en el diseño
$('.crumbPaginationContainer').hide();
},
productGridClass: 'product-table'
});
});
</script>
{% endif %}
Este código fue tomado de una plantilla de Tienda Nube por lo que debes tener en cuenta que se deben realizar ciertos cambios.
El constructor de LS.infiniteScroll puede recibir los siguientes parámetros:
- afterSetup: Función llamada luego de habilitar el scroll infinito. Su uso clásico es para esconder los componentes de paginación del diseño. Valor por defecto: function(){}
- productGridClass: clase CSS que posee el elemento contenedor del listado de productos Valor por defecto: ''
- productsPerPage: cantidad de productos que se mostrarán a medida que el usuario haga scroll. Valor por defecto: 9
- loadingClass: clase CSS del elemento que se introduce mientras se están obteniendo los productos. Valor por defecto: 'infinite-scroll-loading'
- loadingElement: HTML del elemento que se introduce mientras se están obteniendo los productos. Valor por defecto: '<div class="infinite-scroll-loading"></div>'
- bufferPx: Cantidad de píxeles antes del fin de la página que disparan la obtención de nuevos productos. Valor por defecto: 150
3. Agregar las reglas CSS que correspondan para el elemento introducido por el plugin.
4. Agregar una opción en settings.txt que permita deshabilitar el scroll infinito.
Si se desea se puede habilitar por default via defaults.txt. En nuestro ejemplo el nombre la opción debería ser infinite_scrolling.
5. No eliminar la paginación del diseño, ya que los buscadores la utilizan para poder indexar la tienda de manera apropiada.
Eliminarlo impactaría negativamente en el SEO de la tienda.