🐞 fix: Update filters for single entries, each removable

✨feature: Start pagination
2025-02-12 11:57:47 -06:00
parent 4aaf3d69f8
commit 4cea0703c2
3 changed files with 89 additions and 26 deletions
--- a/assets/script.js
+++ b/assets/script.js
@@ -1,5 +1,5 @@
 jQuery(document).ready(function ($) {
-  function triggerFiltering() {
+  function triggerFiltering(paged = 1) {
    let searchTerm = $('#search').val();

    let selectedTypes = $('input[name="resource_type[]"]:checked')
@@ -16,6 +16,7 @@ jQuery(document).ready(function ($) {

    let appliedFilters = [];

+    // Search Term
    if (searchTerm) {
      appliedFilters.push(
        `<span class="filter-item" data-type="search" data-value="${searchTerm}">
@@ -25,27 +26,25 @@ jQuery(document).ready(function ($) {
      );
    }

-    if (selectedTypes.length > 0) {
+    // Resource Types
+    selectedTypes.forEach(function (type) {
      appliedFilters.push(
-        `<span class="filter-item" data-type="resource_type" data-value="${selectedTypes.join(
-          ', '
-        )}">
-          <strong>Type:</strong> ${selectedTypes.join(', ')}
-          <button class="remove-filter" aria-label="Remove Type">×</button>
+        `<span class="filter-item" data-type="resource_type" data-value="${type}">
+          <strong>Type:</strong> ${type}
+          <button class="remove-filter" aria-label="Remove Type ${type}">×</button>
        </span>`
      );
-    }
+    });

-    if (selectedSubjects.length > 0) {
+    // Resource Subjects
+    selectedSubjects.forEach(function (subject) {
      appliedFilters.push(
-        `<span class="filter-item" data-type="resource_subject" data-value="${selectedSubjects.join(
-          ', '
-        )}">
-          <strong>Subject:</strong> ${selectedSubjects.join(', ')}
-          <button class="remove-filter" aria-label="Remove Subject">×</button>
+        `<span class="filter-item" data-type="resource_subject" data-value="${subject}">
+          <strong>Subject:</strong> ${subject}
+          <button class="remove-filter" aria-label="Remove Subject ${subject}">×</button>
        </span>`
      );
-    }
+    });

    $('#applied-filters').html(
      appliedFilters.length ? appliedFilters.join(' ') : 'None'
@@ -66,6 +65,7 @@ jQuery(document).ready(function ($) {
        })
        .get(),
      sort_order: $('#sort-order').val(),
+      paged: paged,
    };

    $.post(resourceFilterAjax.ajaxurl, formData, function (response) {
@@ -74,6 +74,7 @@ jQuery(document).ready(function ($) {
      $('#resource-results').html(response.html);
      $('#result-count').text(response.count);

+      // Update pagination
      if (response.pagination) {
        $('.pagination').html(response.pagination.join(''));
      }
@@ -88,7 +89,7 @@ jQuery(document).ready(function ($) {
    let filterType = $filter.data('type');
    let filterValue = $filter.data('value');

-    // Clear the relevant filter
+    // Remove the corresponding filter
    if (filterType === 'search') {
      $('#search').val('');
    } else if (filterType === 'resource_type') {
@@ -106,7 +107,7 @@ jQuery(document).ready(function ($) {
    }

    // Re-trigger filtering after removing the filter
-    triggerFiltering();
+    triggerFiltering(1);
  });

  // Handle form submission
@@ -147,4 +148,15 @@ document.addEventListener('DOMContentLoaded', function () {
      });
    }
  });
+
+  // Handle pagination click
+  $(document).on('click', '.pagination a', function (e) {
+    e.preventDefault();
+
+    // Extract the page number from the link
+    let paged = $(this).attr('href').match(/paged=(\d+)/)[1];
+
+    // Trigger filtering for the selected page
+    triggerFiltering(paged);
+  });
 });
--- a/assets/style.css
+++ b/assets/style.css
@@ -124,6 +124,33 @@

 .filter-item button.remove-filter:hover { color: #d63638; }

+.pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.pagination a,
+.pagination span {
+  margin: 0 5px;
+  padding: 8px 12px;
+  text-decoration: none;
+  color: #0073aa;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.pagination a:hover {
+  background: #0073aa;
+  color: #fff;
+}
+
+.pagination .current {
+  background: #0073aa;
+  color: #fff;
+  border-color: #0073aa;
+}
+
@media (min-width: 768px) { /* Tailwind 'md' breakpoint */
  #resource-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
--- a/resource-filter.php
+++ b/resource-filter.php
@@ -72,7 +72,8 @@ class ResourceFilterPlugin {

      $query_args = [
        'post_type'      => 'resource',
-        'posts_per_page' => -1,
+        'posts_per_page' => 12, // Show 12 results per page
+        'paged' => max(1, get_query_var('paged', 1)), // Get current page number
        'tax_query'      => [],
        's'              => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '',
      ];
@@ -137,7 +138,8 @@ class ResourceFilterPlugin {
    } else {
      $query = new WP_Query([
        'post_type' => 'resource',
-        'posts_per_page' => -1,
+        'posts_per_page' => 12, // Show 12 results per page
+        'paged' => max(1, get_query_var('paged', 1)), // Get current page number
      ]);
    }

@@ -169,6 +171,18 @@ class ResourceFilterPlugin {
        } else {
          $this->loadResources(); // Load all resources initially
        }
+
+        $pagination_links = paginate_links([
+          'total' => $query->max_num_pages,
+          'current' => max(1, get_query_var('paged', 1)),
+          'format' => '?paged=%#%',
+          'prev_text' => '&laquo;',
+          'next_text' => '&raquo;',
+        ]);
+
+        if ($pagination_links) {
+          echo '<div class="pagination">' . $pagination_links . '</div>';
+        }
        ?>
    </div>
    <?php
@@ -187,7 +201,8 @@ class ResourceFilterPlugin {
  public function loadResources() {
    $query_args = [
      'post_type' => 'resource',
-      'posts_per_page' => -1
+      'posts_per_page' => 12, // Show 12 results per page
+      'paged' => max(1, get_query_var('paged', 1)), // Get current page number
    ];

    $query = new WP_Query($query_args);
@@ -225,9 +240,10 @@ class ResourceFilterPlugin {

    $query_args = [
      'post_type'      => 'resource',
-      'posts_per_page' => -1,
+      'posts_per_page' => 12, // Show 12 results per page
+      'paged'          => isset($_POST['paged']) ? intval($_POST['paged']) : 1, // Get current page number
      'tax_query'      => [],
-      's'             => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '',
+      's'              => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '',
    ];

    // Sorting logic
@@ -303,13 +319,21 @@ class ResourceFilterPlugin {
    if ($is_ajax) {
      // Prepare response JSON
      $response = [
-          'count'   => $query->found_posts,
+        'count' => $query->found_posts,
        'filters' => [
-            'search'           => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '',
-            'resource_type'    => !empty($_POST['resource_type']) ? sanitize_text_field($_POST['resource_type']) : '',
+          'search' => isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '',
+          'resource_type' => !empty($_POST['resource_type']) ? sanitize_text_field($_POST['resource_type']) : '',
          'resource_subject' => !empty($_POST['resource_subject']) ? sanitize_text_field($_POST['resource_subject']) : ''
        ],
-            'html'             => ob_get_clean()
+        'html' => ob_get_clean(),
+        'pagination' => paginate_links([
+          'total' => $query->max_num_pages,
+          'current' => isset($_POST['paged']) ? intval($_POST['paged']) : 1,
+          'format' => '%#%',
+          'prev_text' => '&laquo;',
+          'next_text' => '&raquo;',
+          'type' => 'array'
+        ])
      ];

      echo json_encode($response);