✨refactor: Improve resource filter templates and styles; enhance layout and dynamic taxonomy handling

assets/script.js

@@ -8,91 +8,41 @@ jQuery(document).ready(function ($) {
    */
   function triggerFiltering(paged = 1) {
     let searchTerm = $('#search').val();
+    let appliedFilters = [];
 
-    let appliedFilters  = [];
-    let typeFilters    = [];
-    let subjectFilters = [];
+    // Collect selected taxonomy filters dynamically
+    let taxonomyFilters = {};
+    $('input[type="checkbox"]:checked').each(function () {
+      let taxonomy = $(this).attr('name').replace('[]', ''); // Extract taxonomy name
 
-    let selectedTypes = $('input[name="resource_type[]"]:checked')
-      .map(function () {
-        return $(this).closest('label').text().trim();
-      })
-      .get();
+      if (!taxonomyFilters[taxonomy]) {
+        taxonomyFilters[taxonomy] = [];
+      }
 
-    let selectedSubjects = $('input[name="resource_subject[]"]:checked')
-      .map(function () {
-        return $(this).closest('label').text().trim();
-      })
-      .get();
+      taxonomyFilters[taxonomy].push($(this).val());
+    });
 
-    // Search Term
-    if (searchTerm) {
-      appliedFilters.push(
-        `<span class="filter-item" data-type="search" data-value="${searchTerm}">
-          <strong>Search:</strong> "${searchTerm}"
-          <button class="remove-filter" aria-label="Remove Search">×</button>
-        </span>`
-      );
+    // Build applied filters for display
+    for (let taxonomy in taxonomyFilters) {
+      taxonomyFilters[taxonomy].forEach(function (term) {
+        appliedFilters.push(
+          `<span class="filter-item" data-type="${taxonomy}" data-value="${term}">
+            <strong>${taxonomy}:</strong> ${term}
+            <button class="remove-filter" aria-label="Remove ${term}">×</button>
+          </span>`
+        );
+      });
     }
 
-    // Resource Types
-    $('input[name="resource_type[]"]:checked').each(function () {
-      const slug = $(this).val(); // Get the slug
-      const name = $(this).closest('label').text().trim(); // Get the name
-
-      appliedFilters.push(
-        `<span class="filter-item" data-type="resource_type" data-value="${slug}">
-          <strong>Type:</strong> ${name}
-          <button class="remove-filter" aria-label="Remove ${name}">×</button>
-        </span>`
-      );
-
-      typeFilters.push(
-        `${name}`
-      );
-    });
-
-    // Resource Subjects
-    selectedSubjects.forEach(function (subject) {
-      appliedFilters.push(
-        `<span class="filter-item" data-type="resource_subject" data-value="${subject}">
-          <strong>Subject:</strong> ${subject}
-          <button class="remove-filter" aria-label="Remove ${subject}">×</button>
-        </span>`
-      );
-
-      subjectFilters.push(
-        `${subject}`
-      );
-    });
-
-    $('#applied-filters').html(
-      appliedFilters.length ? appliedFilters.join(' ') : 'None'
-    );
-
-    $('#type_text').html(
-      typeFilters.length ? typeFilters.join(', ') : 'Resource Type'
-    );
-    $('#subject_text').html(
-      subjectFilters.length ? subjectFilters.join(', ') : 'Subject Tags'
-    );
+    $('#applied-filters').html(appliedFilters.length ? appliedFilters.join(' ') : 'None');
 
     let formData = {
       action: 'filter_resources',
       nonce: resourceFilterAjax.nonce,
       search: searchTerm,
       paged: paged,
-      sort_order: $('#sort-order').val(),
-      resource_type: $('input[name="resource_type[]"]:checked')
-        .map(function () {
-          return this.value;
-        })
-        .get(),
-      resource_subject: $('input[name="resource_subject[]"]:checked')
-        .map(function () {
-          return this.value;
-        })
-        .get(),
+      sort_order: $('#sortOrder').val(),
+      ...taxonomyFilters, // Include taxonomy filters dynamically
     };
 
     // Perform AJAX request
@@ -112,7 +62,7 @@ jQuery(document).ready(function ($) {
   }
 
   // Handle sort order change
-  $('#sort-order').on('change', function () {
+  $('#sortOrder').on('change', function () {
     triggerFiltering();
   });
 
@@ -148,18 +98,13 @@ jQuery(document).ready(function ($) {
     // Remove the corresponding filter
     if (filterType === 'search') {
       $('#search').val('');
-    } else if (filterType === 'resource_type') {
-      $('input[name="resource_type[]"]:checked').each(function () {
+    } else {
+      // Dynamically handle taxonomy filters
+      $(`input[name="${filterType}[]"]:checked`).each(function () {
         if ($(this).val() === filterValue) { // Match the slug, not the name
           $(this).prop('checked', false);
         }
       });
-    } else if (filterType === 'resource_subject') {
-      $('input[name="resource_subject[]"]:checked').each(function () {
-        if ($(this).closest('label').text().trim() === filterValue) {
-          $(this).prop('checked', false);
-        }
-      });
     }
 
     // Re-trigger filtering after removing the filter