diff --git a/src/pages/catalog.vue b/src/pages/catalog.vue index 302392d..1521d65 100644 --- a/src/pages/catalog.vue +++ b/src/pages/catalog.vue @@ -9,13 +9,32 @@ - - Catálogo - + + mdi-store + mdi-store +
+
+

Catálogo

+

Explora y agrega productos a tu compra

+
+ + +
+
No hay productos disponibles en el catálogo + + No se encontraron productos con ese nombre + + item.name.toLowerCase().includes(query), + ); + }, // Paginación paginatedItems() { const start = (this.currentPage - 1) * this.itemsPerPage; const end = start + this.itemsPerPage; - return this.items.slice(start, end); + return this.filteredItems.slice(start, end); }, totalPages() { - return Math.ceil(this.items.length / this.itemsPerPage); + return Math.ceil(this.filteredItems.length / this.itemsPerPage); }, paginationInfo() { const start = (this.currentPage - 1) * this.itemsPerPage + 1; @@ -275,7 +311,7 @@ export default { return { start, end, - total: this.items.length, + total: this.filteredItems.length, }; }, // Computed para total-visible dinámico y responsive (usado por ambos PaginationControls) @@ -306,6 +342,11 @@ export default { this.loadItemsPerPagePreference(); this.fetchProducts(); }, + watch: { + searchQuery() { + this.currentPage = 1; + }, + }, methods: { fetchProducts() { this.api @@ -446,7 +487,7 @@ export default { }, scrollToTop() { this.$nextTick(() => { - const catalogHeader = this.$el?.querySelector(".headline"); + const catalogHeader = this.$el?.querySelector(".page-header"); if (catalogHeader) { catalogHeader.scrollIntoView({ behavior: "smooth", @@ -468,59 +509,60 @@ export default {