[IMP] website_sale_aplicoop: Auto-carga de productos al filtrar por tags
Mejora en la UX del filtrado por tags: - Cuando se aplica un filtro que deja pocos productos visibles (<10), automáticamente carga más páginas sin esperar scroll del usuario - Evita pantallas vacías o con muy pocos productos después de filtrar - El auto-carga se ejecuta con delay de 100ms para evitar race conditions - Solo se activa si hay más páginas disponibles (hasMore) y no está ya cargando Nuevo método: _autoLoadMoreIfNeeded(visibleCount) - Umbral configurable: 10 productos mínimos - Se llama automáticamente desde _filterProducts() - Integración con infiniteScroll.loadNextPage()
This commit is contained in:
parent
19eb1b91b5
commit
5d4552581c
1 changed files with 44 additions and 0 deletions
|
|
@ -646,11 +646,55 @@
|
||||||
Array.from(self.selectedTags).join(",") +
|
Array.from(self.selectedTags).join(",") +
|
||||||
")"
|
")"
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Auto-load more products if too few are visible
|
||||||
|
self._autoLoadMoreIfNeeded(visibleCount);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("[realtimeSearch] ERROR in _filterProducts():", error.message);
|
console.error("[realtimeSearch] ERROR in _filterProducts():", error.message);
|
||||||
console.error("[realtimeSearch] Stack:", error.stack);
|
console.error("[realtimeSearch] Stack:", error.stack);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_autoLoadMoreIfNeeded: function (visibleCount) {
|
||||||
|
/**
|
||||||
|
* Automatically load more products if there are too few visible on screen.
|
||||||
|
* This prevents empty screens when filters hide most products.
|
||||||
|
*
|
||||||
|
* @param {number} visibleCount - Number of currently visible products
|
||||||
|
*/
|
||||||
|
var self = this;
|
||||||
|
var minVisibleProducts = 10; // Minimum products before auto-loading more
|
||||||
|
|
||||||
|
// Only auto-load if infinite scroll is available and has more pages
|
||||||
|
if (
|
||||||
|
!window.infiniteScroll ||
|
||||||
|
typeof window.infiniteScroll.loadNextPage !== "function"
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if we need more products
|
||||||
|
if (visibleCount < minVisibleProducts && window.infiniteScroll.hasMore) {
|
||||||
|
console.log(
|
||||||
|
"[realtimeSearch] Only " +
|
||||||
|
visibleCount +
|
||||||
|
" products visible (min: " +
|
||||||
|
minVisibleProducts +
|
||||||
|
"), auto-loading next page..."
|
||||||
|
);
|
||||||
|
|
||||||
|
// Delay slightly to avoid race conditions
|
||||||
|
setTimeout(function () {
|
||||||
|
if (
|
||||||
|
window.infiniteScroll &&
|
||||||
|
!window.infiniteScroll.isLoading &&
|
||||||
|
window.infiniteScroll.hasMore
|
||||||
|
) {
|
||||||
|
window.infiniteScroll.loadNextPage();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// Initialize when DOM is ready
|
// Initialize when DOM is ready
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue