From 6f8d87f50d47b9d3d9f92d394ac24fcbb0c5c450 Mon Sep 17 00:00:00 2001
From: divyesh000 <divjok28@outlook.com>
Date: Sat, 18 May 2024 11:19:52 +0400
Subject: [PATCH 1/6] Improve pagination UI on shop page

---
 src/controllers/Shop.php |   2 +
 src/views/Shop.php       | 123 +++++++++++++++++++++++++++++++--------
 2 files changed, 102 insertions(+), 23 deletions(-)
diff --git a/src/controllers/Shop.php b/src/controllers/Shop.php
index 0d11cf98..b3eb94b5 100644
--- a/src/controllers/Shop.php
+++ b/src/controllers/Shop.php
@@ -122,6 +122,8 @@ public function index(): void
         // Fetch all products from the database
         $all_products = Product::getAll();
 
+        $this->data['all_products'] = $all_products;
+
         // Apply filtering based on search keyword and category (existing functionality)
         $filtered_products = array_filter($all_products, array($this, "match_keyword"));
         $filtered_products = array_filter($filtered_products, array($this, "match_category"));
diff --git a/src/views/Shop.php b/src/views/Shop.php
index ea4cf343..9249f5b1 100644
--- a/src/views/Shop.php
+++ b/src/views/Shop.php
@@ -32,15 +32,68 @@ function displayProduct(Product $product): void
     echo <<<EOL
         <a data-aos="zoom-in" href="$product_href">
             <img src="$product_img_src" alt="$img_alt_text">
-        <hgroup>     
-             <h5>$name</h5>
-             <h5>Rs $price</h5>
-        </hgroup>
+            <hgroup> 
+                <h5>$name</h5>
+                <h5>Rs $price</h5>
+            </hgroup>
         </a>
     EOL;
 }
 
 ?>
+<head>
+    <style>
+            .pagination {
+            display: flex;
+            list-style: none;
+            border-radius: 0.25rem;
+            margin-top: 2cm; 
+        }
+
+
+            .page-item {
+            --bs-padding-x: 0.5rem;
+            --bs-padding-y: 0.25rem;
+        }
+
+            .page-link {
+            position: relative;
+            display: block;
+            padding: var(--bs-padding-y) var(--bs-padding-x);
+            color: #007bff;
+            text-decoration: none;
+            transition: color .25s ease-in-out, background-color .25s ease-in-out;
+            border: 1px solid #dee2e6;
+        }
+
+            .page-link:hover {
+            z-index: 2;
+            color: #0056b3;
+            background-color: #e9ecef;
+            border-color: #dee2e6;
+        }
+        
+            .page-link:focus {
+            z-index: 3;
+            outline: 0;
+            box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
+        }
+
+            .page-item.active .page-link {
+            z-index: 3;
+            color: #fff;
+            background-color: #007bff;
+            border-color: #007bff;
+        }
+            .page-item.disabled .page-link {
+            color: #6c757d;
+            pointer-events: none;
+            background-color: #fff;
+            border-color: #dee2e6;
+        }
+
+    </style>
+</head>
 
 <form method="get" class="container">
     <label>
@@ -71,12 +124,12 @@ function displayProduct(Product $product): void
                     $sanitized_category = htmlspecialchars($category);
 
                     echo <<< EOL
-                    <li>
-                        <label>
-                            <input $checked value="$category" name="categories[]" type="checkbox">
-                            $sanitized_category
-                        </label>
-                    </li>
+                        <li>
+                            <label>
+                                <input $checked value="$category" name="categories[]" type="checkbox">
+                                $sanitized_category
+                            </label>
+                        </li>
                     EOL;
                 }
                 ?>
@@ -97,26 +150,50 @@ function displayProduct(Product $product): void
         ?>
     </div>
 
+    <nav aria-label="Page navigation example">
+        <ul class="pagination">
+            <?php
+            // Calculate total number of pages
+            $totalPages = 1;
+            if (isset($all_products)) {
+                $totalPages = ceil(count($all_products) / 4); // Assuming 4 products per page
+            }
+
+            $isFirstPage = ($page === 1);
+            $prevPageUrl = ($page > 1) ? '?page=' . ($page - 1) . '&' . http_build_query(array_merge($_GET, ['page' => ($page - 1)])) : '#';
+            $disabledClass = $isFirstPage ? ' disabled' : '';
+
+            echo '<li class="page-item' . $disabledClass . '"><a class="page-link" href="' . $prevPageUrl . '"> < </a></li>';
+
+            // Loop through page numbers
+            for ($i = 1; $i <= $totalPages; $i++) {
+                $active = $page === $i ? ' active' : '';
+                echo '<li class="page-item' . $active . '"><a class="page-link" href="' . ($i !== $page ? '?page=' . $i . '&' . http_build_query(array_merge($_GET, ['page' => $i])) : '#') . '">' . $i . '</a></li>';
+            }
+
+            // Next button
+            echo '<li class="page-item' . ($page === $totalPages ? ' disabled' : '') . '"><a class="page-link" href="' . ($page < $totalPages ? '?page=' . ($page + 1) . '&' . http_build_query(array_merge($_GET, ['page' => ($page + 1)])) : '#') . '"> > </a></li>';
+            ?>
+        </ul>
+    </nav>
+
     <form style="margin-top: 10rem;">
         <?php
-        // any previously selected categories should be preserved
+        // Any previously selected categories should be preserved
         foreach ($selected_categories as $category) {
-            echo <<< EOL
-            <input value="$category" name="categories[]" type="hidden">
-            EOL;
+            echo '<input value="' . $category . '" name="categories[]" type="hidden">';
         }
-        ?>
-        <!--any previously selected filter should be preserved-->
-        <input value="<?= htmlspecialchars($sort_option) ?>" name="sort" type="hidden"/>
-        <input value="<?= htmlspecialchars($search_keyword) ?>" name="keyword" type="hidden"/>
+        // Any previously selected filter should be preserved
+        echo '<input value="' . htmlspecialchars($sort_option) . '" name="sort" type="hidden"/>';
+        echo '<input value="' . htmlspecialchars($search_keyword) . '" name="keyword" type="hidden"/>';
 
-        <button type="submit" name="page" value="<?= $page + 1 ?>">Load More</button>
+        ?>
     </form>
 
 </main>
 
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
-    AOS.init();
-  });
-</script>
\ No newline at end of file
+document.addEventListener("DOMContentLoaded", function() {
+  AOS.init();
+});
+</script>

From 7b14f9560177a5ca5b443b1fcbc9ea18e16bc1fb Mon Sep 17 00:00:00 2001
From: creme332 <65414576+creme332@users.noreply.github.com>
Date: Sat, 18 May 2024 14:54:03 +0400
Subject: [PATCH 2/6] remove styles out of view

- move nav out of main
- add $totalPages as view placeholder
---
 public/styles/views/Shop.css |  52 ++++++++++++++-
 src/views/Shop.php           | 120 ++++++++---------------------------
 2 files changed, 78 insertions(+), 94 deletions(-)

diff --git a/public/styles/views/Shop.css b/public/styles/views/Shop.css
index 5d4c2bba..7136a43e 100644
--- a/public/styles/views/Shop.css
+++ b/public/styles/views/Shop.css
@@ -14,7 +14,7 @@
   box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
 }
 
-#item-grid > a:focus{
+#item-grid > a:focus {
   background-color: transparent;
 }
 
@@ -61,4 +61,54 @@ article header {
   #item-grid {
     grid-template-columns: repeat(1, 1fr);
   }
+}
+
+.pagination {
+  display: flex;
+  list-style: none;
+  border-radius: 0.25rem;
+  margin-top: 2cm;
+}
+
+
+.page-item {
+  --bs-padding-x: 0.5rem;
+  --bs-padding-y: 0.25rem;
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  padding: var(--bs-padding-y) var(--bs-padding-x);
+  color: #007bff;
+  text-decoration: none;
+  transition: color .25s ease-in-out, background-color .25s ease-in-out;
+  border: 1px solid #dee2e6;
+}
+
+.page-link:hover {
+  z-index: 2;
+  color: #0056b3;
+  background-color: #e9ecef;
+  border-color: #dee2e6;
+}
+
+.page-link:focus {
+  z-index: 3;
+  outline: 0;
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
+}
+
+.page-item.active .page-link {
+  z-index: 3;
+  color: #fff;
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+.page-item.disabled .page-link {
+  color: #6c757d;
+  pointer-events: none;
+  background-color: #fff;
+  border-color: #dee2e6;
 }
\ No newline at end of file
diff --git a/src/views/Shop.php b/src/views/Shop.php
index 9249f5b1..4d79fe15 100644
--- a/src/views/Shop.php
+++ b/src/views/Shop.php
@@ -11,6 +11,7 @@
  * @var string $search_keyword keyword used to filter products
  * @var string $sort_option Sort By option selected by user
  * @var int $page Current page number
+ * @var int $totalPages Total number of pages
  */
 
 use Steamy\Model\Product;
@@ -41,59 +42,6 @@ function displayProduct(Product $product): void
 }
 
 ?>
-<head>
-    <style>
-            .pagination {
-            display: flex;
-            list-style: none;
-            border-radius: 0.25rem;
-            margin-top: 2cm; 
-        }
-
-
-            .page-item {
-            --bs-padding-x: 0.5rem;
-            --bs-padding-y: 0.25rem;
-        }
-
-            .page-link {
-            position: relative;
-            display: block;
-            padding: var(--bs-padding-y) var(--bs-padding-x);
-            color: #007bff;
-            text-decoration: none;
-            transition: color .25s ease-in-out, background-color .25s ease-in-out;
-            border: 1px solid #dee2e6;
-        }
-
-            .page-link:hover {
-            z-index: 2;
-            color: #0056b3;
-            background-color: #e9ecef;
-            border-color: #dee2e6;
-        }
-        
-            .page-link:focus {
-            z-index: 3;
-            outline: 0;
-            box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
-        }
-
-            .page-item.active .page-link {
-            z-index: 3;
-            color: #fff;
-            background-color: #007bff;
-            border-color: #007bff;
-        }
-            .page-item.disabled .page-link {
-            color: #6c757d;
-            pointer-events: none;
-            background-color: #fff;
-            border-color: #dee2e6;
-        }
-
-    </style>
-</head>
 
 <form method="get" class="container">
     <label>
@@ -149,51 +97,37 @@ function displayProduct(Product $product): void
         }
         ?>
     </div>
+</main>
 
-    <nav aria-label="Page navigation example">
-        <ul class="pagination">
-            <?php
-            // Calculate total number of pages
-            $totalPages = 1;
-            if (isset($all_products)) {
-                $totalPages = ceil(count($all_products) / 4); // Assuming 4 products per page
-            }
-
-            $isFirstPage = ($page === 1);
-            $prevPageUrl = ($page > 1) ? '?page=' . ($page - 1) . '&' . http_build_query(array_merge($_GET, ['page' => ($page - 1)])) : '#';
-            $disabledClass = $isFirstPage ? ' disabled' : '';
-
-            echo '<li class="page-item' . $disabledClass . '"><a class="page-link" href="' . $prevPageUrl . '"> < </a></li>';
-
-            // Loop through page numbers
-            for ($i = 1; $i <= $totalPages; $i++) {
-                $active = $page === $i ? ' active' : '';
-                echo '<li class="page-item' . $active . '"><a class="page-link" href="' . ($i !== $page ? '?page=' . $i . '&' . http_build_query(array_merge($_GET, ['page' => $i])) : '#') . '">' . $i . '</a></li>';
-            }
-
-            // Next button
-            echo '<li class="page-item' . ($page === $totalPages ? ' disabled' : '') . '"><a class="page-link" href="' . ($page < $totalPages ? '?page=' . ($page + 1) . '&' . http_build_query(array_merge($_GET, ['page' => ($page + 1)])) : '#') . '"> > </a></li>';
-            ?>
-        </ul>
-    </nav>
-
-    <form style="margin-top: 10rem;">
+<nav class="container" style="display: flex; justify-content: center">
+    <ul class="pagination">
         <?php
-        // Any previously selected categories should be preserved
-        foreach ($selected_categories as $category) {
-            echo '<input value="' . $category . '" name="categories[]" type="hidden">';
+        $isFirstPage = ($page === 1);
+        $prevPageUrl = ($page > 1) ? '?page=' . ($page - 1) . '&' . http_build_query(
+                array_merge($_GET, ['page' => ($page - 1)])
+            ) : '#';
+        $disabledClass = $isFirstPage ? ' disabled' : '';
+
+        echo '<li class="page-item' . $disabledClass . '"><a class="page-link" href="' . $prevPageUrl . '"> < </a></li>';
+
+        // Loop through page numbers
+        for ($i = 1; $i <= $totalPages; $i++) {
+            $active = $page === $i ? ' active' : '';
+            echo '<li class="page-item' . $active . '"><a class="page-link" href="' . ($i !== $page ? '?page=' . $i . '&' . http_build_query(
+                        array_merge($_GET, ['page' => $i])
+                    ) : '#') . '">' . $i . '</a></li>';
         }
-        // Any previously selected filter should be preserved
-        echo '<input value="' . htmlspecialchars($sort_option) . '" name="sort" type="hidden"/>';
-        echo '<input value="' . htmlspecialchars($search_keyword) . '" name="keyword" type="hidden"/>';
 
+        // Next button
+        echo '<li class="page-item' . ($page === $totalPages ? ' disabled' : '') . '"><a class="page-link" href="' . ($page < $totalPages ? '?page=' . ($page + 1) . '&' . http_build_query(
+                    array_merge($_GET, ['page' => ($page + 1)])
+                ) : '#') . '"> > </a></li>';
         ?>
-    </form>
-
-</main>
+    </ul>
+</nav>
 
 <script>
-document.addEventListener("DOMContentLoaded", function() {
-  AOS.init();
-});
+  document.addEventListener("DOMContentLoaded", function() {
+    AOS.init();
+  });
 </script>

From 35e811312c24564c14aebebfd457a597f51b90fa Mon Sep 17 00:00:00 2001
From: creme332 <65414576+creme332@users.noreply.github.com>
Date: Sat, 18 May 2024 14:55:10 +0400
Subject: [PATCH 3/6] fix bug in pagination behavior, refactor

bug fixed: on page X, products from previous pages should not be displayed
---
 src/controllers/Shop.php | 65 +++++++++++++++++++++++++++++-----------
 1 file changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/controllers/Shop.php b/src/controllers/Shop.php
index b3eb94b5..fc652e6f 100644
--- a/src/controllers/Shop.php
+++ b/src/controllers/Shop.php
@@ -17,6 +17,7 @@ class Shop
     use Controller;
 
     private array $data;
+    private static int $MAX_PRODUCTS_PER_PAGE = 4;
 
     /**
      * Check if a product matches the category filter (if any)
@@ -71,7 +72,7 @@ private function sort_product(Product $a, Product $b): int
             return 0;
         }
 
-        // sort by date
+        // sort by descending date
         if ($_GET['sort'] === 'newest') {
             return ($a->getCreatedDate() > $b->getCreatedDate()) ? -1 : 1;
         }
@@ -99,6 +100,46 @@ private function sort_product(Product $a, Product $b): int
         return 0; // no sorting if invalid sorting option
     }
 
+    /**
+     * @return Product[] Array of products which match filters (excluding pagination) and sorting applied by user
+     */
+    public function getMatchingProducts(): array
+    {
+        // Fetch all products from the database
+        $all_products = Product::getAll();
+
+        // Apply filtering based on search keyword and category (existing functionality)
+        $filtered_products = array_filter($all_products, array($this, "match_keyword"));
+        $filtered_products = array_filter($filtered_products, array($this, "match_category"));
+
+        // Sort the filtered products (existing functionality)
+        usort($filtered_products, array($this, "sort_product"));
+
+        return $filtered_products;
+    }
+
+    /**
+     * @return int Page number on shop page. Defaults to 1.
+     */
+    public function getPageNumber(): int
+    {
+        return (int)($_GET['page'] ?? 1);
+    }
+
+    /**
+     * @param $products
+     * @return array Products which should be displayed on current page
+     */
+    public function applyPagination($products): array
+    {
+        // Slice the products based on pagination
+        return array_slice(
+            $products,
+            ($this->getPageNumber() - 1) * Shop::$MAX_PRODUCTS_PER_PAGE,
+            Shop::$MAX_PRODUCTS_PER_PAGE
+        );
+    }
+
     public function index(): void
     {
         // check if URL follows format /shop/products/<number>
@@ -115,24 +156,11 @@ public function index(): void
             return;
         }
 
-        // Retrieve the page number from the URL query parameters
-        $page = $_GET['page'] ?? 1;
-        $perPage = (int) $page * 4; // Number of products per page
-
-        // Fetch all products from the database
-        $all_products = Product::getAll();
-
-        $this->data['all_products'] = $all_products;
-
-        // Apply filtering based on search keyword and category (existing functionality)
-        $filtered_products = array_filter($all_products, array($this, "match_keyword"));
-        $filtered_products = array_filter($filtered_products, array($this, "match_category"));
-
-        // Sort the filtered products (existing functionality)
-        usort($filtered_products, array($this, "sort_product"));
+        // get all products that match user criteria
+        $filtered_products = $this->getMatchingProducts();
 
         // Slice the products based on pagination
-        $paginated_products = array_slice($filtered_products, 0, $perPage);
+        $paginated_products = $this->applyPagination($filtered_products);
 
         // Initialize view variables (existing functionality)
         $this->data['products'] = $paginated_products;
@@ -140,7 +168,8 @@ public function index(): void
         $this->data['categories'] = Product::getCategories();
         $this->data['sort_option'] = $_GET['sort'] ?? "";
         $this->data['selected_categories'] = $_GET['categories'] ?? [];
-        $this->data['page'] = $page;
+        $this->data['page'] = $this->getPageNumber();
+        $this->data['totalPages'] = ceil(count($filtered_products) / Shop::$MAX_PRODUCTS_PER_PAGE);
 
         // Render the view with pagination information
         $this->view(

From c0b535a5049fd57a4c8b520daff6b9d8f335bf9d Mon Sep 17 00:00:00 2001
From: creme332 <65414576+creme332@users.noreply.github.com>
Date: Sat, 18 May 2024 17:52:13 +0400
Subject: [PATCH 4/6] improve colors for pagination ui

---
 public/styles/views/Shop.css | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/public/styles/views/Shop.css b/public/styles/views/Shop.css
index 7136a43e..bd9d5ddd 100644
--- a/public/styles/views/Shop.css
+++ b/public/styles/views/Shop.css
@@ -67,6 +67,7 @@ article header {
   display: flex;
   list-style: none;
   border-radius: 0.25rem;
+  gap: 0.45rem;
   margin-top: 2cm;
 }
 
@@ -80,17 +81,15 @@ article header {
   position: relative;
   display: block;
   padding: var(--bs-padding-y) var(--bs-padding-x);
-  color: #007bff;
   text-decoration: none;
   transition: color .25s ease-in-out, background-color .25s ease-in-out;
-  border: 1px solid #dee2e6;
+  outline: 1px solid #dee2e6;
 }
 
 .page-link:hover {
   z-index: 2;
-  color: #0056b3;
-  background-color: #e9ecef;
-  border-color: #dee2e6;
+  background-color: var(--contrast-hover);
+  color: var(--contrast-inverse);
 }
 
 .page-link:focus {
@@ -101,14 +100,13 @@ article header {
 
 .page-item.active .page-link {
   z-index: 3;
-  color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+  background-color: var(--contrast);
+  color: var(--contrast-inverse);
 }
 
 .page-item.disabled .page-link {
-  color: #6c757d;
+  color: var(--form-element-disabled-opacity);
+  outline-color: var(--form-element-disabled-border-color);
   pointer-events: none;
-  background-color: #fff;
-  border-color: #dee2e6;
+  background-color: var(--form-element-disabled-background-color);
 }
\ No newline at end of file

From 03b27f65a8e91e3a36bc5938d287e08018dd0c16 Mon Sep 17 00:00:00 2001
From: creme332 <65414576+creme332@users.noreply.github.com>
Date: Sat, 18 May 2024 17:53:14 +0400
Subject: [PATCH 5/6] cast total_pages to int, rename view variable `page` to
 `current_page_number`

---
 src/controllers/Shop.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/controllers/Shop.php b/src/controllers/Shop.php
index fc652e6f..a582450c 100644
--- a/src/controllers/Shop.php
+++ b/src/controllers/Shop.php
@@ -168,8 +168,8 @@ public function index(): void
         $this->data['categories'] = Product::getCategories();
         $this->data['sort_option'] = $_GET['sort'] ?? "";
         $this->data['selected_categories'] = $_GET['categories'] ?? [];
-        $this->data['page'] = $this->getPageNumber();
-        $this->data['totalPages'] = ceil(count($filtered_products) / Shop::$MAX_PRODUCTS_PER_PAGE);
+        $this->data['current_page_number'] = $this->getPageNumber();
+        $this->data['total_pages'] = (int)ceil(count($filtered_products) / Shop::$MAX_PRODUCTS_PER_PAGE);
 
         // Render the view with pagination information
         $this->view(

From 1fdf810582dbfd054d28b22f3f99441f5450da70 Mon Sep 17 00:00:00 2001
From: creme332 <65414576+creme332@users.noreply.github.com>
Date: Sat, 18 May 2024 17:54:09 +0400
Subject: [PATCH 6/6] refactor view, add helper functions to display page item

---
 src/views/Shop.php | 100 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 80 insertions(+), 20 deletions(-)

diff --git a/src/views/Shop.php b/src/views/Shop.php
index 4d79fe15..c1200bf0 100644
--- a/src/views/Shop.php
+++ b/src/views/Shop.php
@@ -10,8 +10,8 @@
  * @var string[] $selected_categories Array of selected categories
  * @var string $search_keyword keyword used to filter products
  * @var string $sort_option Sort By option selected by user
- * @var int $page Current page number
- * @var int $totalPages Total number of pages
+ * @var int $current_page_number Current page number.
+ * @var int $total_pages Total number of pages
  */
 
 use Steamy\Model\Product;
@@ -41,6 +41,68 @@ function displayProduct(Product $product): void
     EOL;
 }
 
+/**
+ * Returns a query string that maintains all current query string parameters and page number.
+ * @param int $page_number
+ * @return string Query string link for page item
+ */
+function getPageItemLink(int $page_number): string
+{
+    // create a string with all past query parameters except page and url
+    unset($_GET['page']);
+    unset($_GET['url']);
+
+    $link = '?' . http_build_query($_GET);
+
+    // add page number as query parameter
+    $link .= '&page=' . $page_number;
+
+    return $link;
+}
+
+/**
+ * Prints page item in HTML format.
+ *
+ * @param int $current_page_number
+ * @param int $page_number Page number of page item
+ * @return void
+ */
+function displayPageItem(int $current_page_number, int $page_number): void
+{
+    $page_link = getPageItemLink($page_number);
+    $className = "page-item" . ($page_number === $current_page_number ? " active" : "");
+
+    echo <<< EOL
+    <li class="$className">
+        <a class="page-link" href="$page_link">$page_number</a>
+    </li>
+    EOL;
+}
+
+/**
+ * Prints navigation button in HTML format
+ * @param int $current_page_number
+ * @param int $total_pages Total number of pages
+ * @param bool $is_left True indicates left navigation button.
+ * @return void
+ */
+function displayNavigationButton(int $current_page_number, int $total_pages, bool $is_left): void
+{
+    $page_link = getPageItemLink($current_page_number + ($is_left ? -1 : 1));
+    $link_content = htmlspecialchars($is_left ? "<" : ">");
+    $className = "page-item";
+
+    if (($current_page_number === 1 && $is_left) || ($current_page_number === $total_pages && !$is_left)) {
+        $className .= " disabled";
+    }
+
+    echo <<< EOL
+    <li class="$className">
+        <a class="page-link" href="$page_link">$link_content</a>
+    </li>
+    EOL;
+}
+
 ?>
 
 <form method="get" class="container">
@@ -102,26 +164,24 @@ function displayProduct(Product $product): void
 <nav class="container" style="display: flex; justify-content: center">
     <ul class="pagination">
         <?php
-        $isFirstPage = ($page === 1);
-        $prevPageUrl = ($page > 1) ? '?page=' . ($page - 1) . '&' . http_build_query(
-                array_merge($_GET, ['page' => ($page - 1)])
-            ) : '#';
-        $disabledClass = $isFirstPage ? ' disabled' : '';
-
-        echo '<li class="page-item' . $disabledClass . '"><a class="page-link" href="' . $prevPageUrl . '"> < </a></li>';
-
-        // Loop through page numbers
-        for ($i = 1; $i <= $totalPages; $i++) {
-            $active = $page === $i ? ' active' : '';
-            echo '<li class="page-item' . $active . '"><a class="page-link" href="' . ($i !== $page ? '?page=' . $i . '&' . http_build_query(
-                        array_merge($_GET, ['page' => $i])
-                    ) : '#') . '">' . $i . '</a></li>';
+        // Display previous page button
+        displayNavigationButton(
+            $current_page_number,
+            $total_pages,
+            true
+        );
+
+        // Display each page item
+        for ($page_num = 1; $page_num <= $total_pages; $page_num++) {
+            displayPageItem($current_page_number, $page_num);
         }
 
-        // Next button
-        echo '<li class="page-item' . ($page === $totalPages ? ' disabled' : '') . '"><a class="page-link" href="' . ($page < $totalPages ? '?page=' . ($page + 1) . '&' . http_build_query(
-                    array_merge($_GET, ['page' => ($page + 1)])
-                ) : '#') . '"> > </a></li>';
+        // Display next page button
+        displayNavigationButton(
+            $current_page_number,
+            $total_pages,
+            false
+        );
         ?>
     </ul>
 </nav>
