feature: Live filtering for type and subjuect fields

This commit is contained in:
Keith Solomon
2025-02-28 15:22:58 -06:00
parent af045bc64e
commit 2b1bb9f9e1
8 changed files with 264 additions and 93 deletions

View File

@@ -1,43 +1,59 @@
<?php
if (!defined('ABSPATH')) { exit; } // Prevent direct access
// Get configured taxonomies from the admin settings
$configured_taxonomies = get_option('content_filter_taxonomies', []);
$resource_types = get_terms(['taxonomy' => 'resource_type', 'hide_empty' => true]);
$resource_subjects = get_terms(['taxonomy' => 'resource_subject', 'hide_empty' => true]);
?>
<form id="resource-filter">
<!-- Search Field-->
<form class="px-4 sm:px-0" id="resource-filter">
<!-- Search Field -->
<div class="search-text">
<input class="full-width" type="text" id="search" name="search" placeholder="Search resources..." value="<?php echo isset($search) ? esc_attr($search) : ''; ?>">
<input class="bg-[#F8F8F8] border-[#8B8B8B] border-2" type="text" id="search" name="search" placeholder="Search resources..."
value="<?php echo isset($search) ? esc_attr($search) : ''; ?>">
<button class="bg-[#3B65D4] text-white" type="submit">Search</button>
<button type="reset" id="clear-search">&times;</button>
<button type="submit">Filter</button>
</div>
<div class="search-tax">
<?php if (!empty($configured_taxonomies)) : ?>
<?php foreach ($configured_taxonomies as $taxonomy) :
$taxonomy_obj = get_taxonomy($taxonomy);
<!-- Resource Type Filters -->
<div class="custom-dropdown">
<button type="button" class="dropdown-toggle">Resource Type</button>
<div class="dropdown-menu">
<?php foreach ($resource_types as $type) : ?>
<label>
<input type="checkbox" name="resource_type[]" value="<?php echo esc_attr($type->slug); ?>" <?php echo
(isset($_POST['resource_type']) && in_array($type->slug, (array) $_POST['resource_type'])) ? 'checked' :
'';
?>>
<?php echo esc_html($type->name); ?>
</label>
<?php endforeach; ?>
</div>
</div>
if ($taxonomy_obj) :
$terms = get_terms(['taxonomy' => $taxonomy, 'hide_empty' => true]);
if (!empty($terms)) : ?>
<details class="taxonomy-filter" data-taxonomy="<?php echo esc_attr($taxonomy); ?>">
<summary><?php echo esc_html($taxonomy_obj->labels->singular_name); ?></summary>
<div class="filter-options">
<?php foreach ($terms as $term) : ?>
<label>
<input type="checkbox" name="<?php echo esc_attr($taxonomy); ?>[]" value="<?php echo esc_attr($term->slug); ?>"
<?php echo (isset($_POST[$taxonomy]) && in_array($term->slug, (array)$_POST[$taxonomy])) ? 'checked' : ''; ?>>
<?php echo esc_html($term->name); ?>
</label>
<?php endforeach; ?>
</div>
</details>
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
<!-- Resource Subject Filters -->
<div class="custom-dropdown">
<button type="button" class="dropdown-toggle">Resource Subject</button>
<div class="dropdown-menu">
<?php foreach ($resource_subjects as $subject) : ?>
<label>
<input type="checkbox" name="resource_subject[]" value="<?php echo esc_attr($subject->slug); ?>" <?php echo
(isset($_POST['resource_subject']) && in_array($subject->slug, (array) $_POST['resource_subject'])) ?
'checked' : ''; ?>>
<?php echo esc_html($subject->name); ?>
</label>
<?php endforeach; ?>
</div>
</div>
<!-- Sort Container -->
<div id="sort-container" class="flex items-start">
<label class="pt-2" for="sort-order">Sort:</label>
<select class="ml-2 bg-white border-[#CCC] border-2" id="sort-order">
<option value="date_desc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : 'date_desc', 'date_desc'); ?>>Newest First</option>
<option value="date_asc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : 'date_desc', 'date_asc'); ?>>Oldest First</option>
<option value="title_asc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : 'date_desc', 'title_asc'); ?>>Title (A-Z)</option>
<option value="title_desc" <?php selected(isset($_GET['sort_order']) ? $_GET['sort_order'] : 'date_desc', 'title_desc'); ?>>Title (Z-A)</option>
</select>
</div>
</div>
</form>

View File

@@ -0,0 +1,38 @@
<?php
if (!defined('ABSPATH')) { exit; } // Prevent direct access
if (!empty($resources)) :
foreach ($resources as $resource) :
$postID = $resource->ID;
$postTitle = get_the_title($postID);
$postLink = get_permalink($postID);
?>
<div class="resource-item border border-primary-500 p-4 rounded">
<h3 class="text-22px font-semibold leading-2 my-0 py-0"><a class="text-indigo-400" href="<?php echo esc_url($postLink); ?>"><?php echo esc_html($postTitle); ?></a></h3>
<div class="flex flex-col mt-8">
<p class="text-14px leading-tight my-0 py-0"><strong>Resource Type:</strong> <?php echo esc_html(get_the_terms($postID, 'resource_type')[0]->name); ?></p>
<p class="text-14px leading-tight my-0 py-0">
<strong>Resource Subject(s):</strong>
<?php
$subjects = get_the_terms($postID, 'resource_subject');
$count = count($subjects);
$i = 1;
foreach ($subjects as $subject) {
if ($i === $count) {
echo esc_html($subject->name);
} else {
echo esc_html($subject->name) . ', ';
}
$i++;
}
?>
</p>
</div>
</div>
<?php endforeach; ?>
<?php else : ?>
<p>No resources found.</p>
<?php endif; ?>

View File

@@ -6,30 +6,32 @@ if (!empty($resources)) :
$postID = $resource->ID;
$postTitle = get_the_title($postID);
$postLink = get_permalink($postID);
$terms = get_the_terms($postID, 'resource_type');
?>
<div class="resource-item border border-primary-500 p-4 rounded">
<h3 class="text-22px font-semibold leading-2 my-0 py-0"><a class="text-indigo-400" href="<?php echo esc_url($postLink); ?>"><?php echo esc_html($postTitle); ?></a></h3>
<div class="px-4 sm:px-0">
<?php if (has_post_thumbnail($postID)) : ?>
<div class="block bg-[#F3F3F3] h-[32rem]">
<a href="<?php echo esc_url($postLink); ?>">
<img src="<?php echo esc_url(get_the_post_thumbnail_url($postID)); ?>" alt="<?php echo esc_attr($postTitle); ?>"
class="flex justify-center items-center w-full h-full object-contain">
</a>
</div>
<?php endif; ?>
<div class="flex flex-col mt-8">
<p class="text-14px leading-tight my-0 py-0"><strong>Resource Type:</strong> <?php echo esc_html(get_the_terms($postID, 'resource_type')[0]->name); ?></p>
<p class="text-14px leading-tight my-0 py-0">
<strong>Resource Subject(s):</strong>
<?php
$subjects = get_the_terms($postID, 'resource_subject');
$count = count($subjects);
$i = 1;
<p class="text-sm font-thin uppercase">
<?php echo $terms ? esc_html(strtolower($terms[0]->name)) : ''; ?>
</p>
foreach ($subjects as $subject) {
if ($i === $count) {
echo esc_html($subject->name);
} else {
echo esc_html($subject->name) . ', ';
}
<div class="flex">
<div>
<h3 class="text-lg"><a class="" href="<?php echo esc_url($postLink); ?>"><?php echo esc_html($postTitle); ?></a></h3>
</div>
$i++;
}
?>
</p>
<div class="flex items-center ml-auto pr-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 ml-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</div>
</div>
</div>
<?php endforeach; ?>