From 3be418c4b51ccf4b3af37002bfcd312b4941d88b Mon Sep 17 00:00:00 2001
From: admin <admin@admin.com>
Date: Wed, 19 Nov 2025 13:50:44 +0545
Subject: [PATCH] fix: Pagination fixed

---
 .../[categoryType]/[[slug]]/+page.svelte      | 40 +++++++++++++++++--
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/routes/category/[categoryType]/[[slug]]/+page.svelte b/src/routes/category/[categoryType]/[[slug]]/+page.svelte
index 1422e16..7f7a4a1 100644
--- a/src/routes/category/[categoryType]/[[slug]]/+page.svelte
+++ b/src/routes/category/[categoryType]/[[slug]]/+page.svelte
@@ -23,8 +23,12 @@
 	// $inspect(page.url.searchParams.get('search'));
 
 	let initialUrlParams = $state(new URLSearchParams());
+	let urlPage = $state(1);
 
 	$effect(() => {
+		const pageParam = page.url.searchParams.get('page');
+		urlPage = pageParam ? parseInt(pageParam, 10) : 1;
+
 		// Store initial URL params before any filtering
 		if (Object.keys(selectedFilters).length === 0) {
 			initialUrlParams = new URLSearchParams(page.url.search);
@@ -102,6 +106,16 @@
 			params.set('categories', page.url.searchParams.get('categories')!);
 		}
 
+		const currentPage = page.url.searchParams.get('page');
+		const currentPerPage = page.url.searchParams.get('per_page');
+
+		if (currentPage) {
+			params.set('page', currentPage);
+		}
+		if (currentPerPage) {
+			params.set('per_page', currentPerPage);
+		}
+
 		goto(`?${params.toString()}`, {
 			keepFocus: true,
 			noScroll: true,
@@ -131,6 +145,19 @@
 		);
 	}
 
+	function goToPage(pageNumber: number) {
+		const params = new URLSearchParams(page.url.search);
+
+		params.set('page', pageNumber.toString());
+
+		goto(`?${params.toString()}`, {
+			keepFocus: true,
+			noScroll: true,
+			replaceState: true,
+			invalidateAll: true
+		});
+	}
+
 	$effect(() => {
 		data?.productCategory
 			?.then(
@@ -327,12 +354,13 @@
 				<Pagination.Root
 					count={category?.pagination.total_items}
 					perPage={category?.pagination?.per_page}
+					page={urlPage}
 					class="col-start-4 items-end"
 				>
 					{#snippet children({ pages, currentPage })}
 						<Pagination.Content>
 							<Pagination.Item>
-								<Pagination.PrevButton />
+								<Pagination.PrevButton onclick={() => goToPage(currentPage - 1)} />
 							</Pagination.Item>
 							{#each pages as page (page.key)}
 								{#if page.type === 'ellipsis'}
@@ -340,15 +368,19 @@
 										<Pagination.Ellipsis />
 									</Pagination.Item>
 								{:else}
-									<Pagination.Item isVisible={currentPage === page.value}>
-										<Pagination.Link {page} isActive={currentPage === page.value}>
+									<Pagination.Item>
+										<Pagination.Link
+											{page}
+											isActive={currentPage === page.value}
+											onclick={() => goToPage(page.value)}
+										>
 											{page.value}
 										</Pagination.Link>
 									</Pagination.Item>
 								{/if}
 							{/each}
 							<Pagination.Item>
-								<Pagination.NextButton />
+								<Pagination.NextButton onclick={() => goToPage(currentPage + 1)} />
 							</Pagination.Item>
 						</Pagination.Content>
 					{/snippet}