How to Filter the Custom term loop based on dropdown

admin管理员组

文章数量:1134585

I had created on Custom Post Type 'resource', which has 4 taxonomies ('type', 'sector', 'industry', 'rtag')

now i had added 45 posts in following manners

• Type - Brochure, Infographic, Research Paper, Video, White Paper - 9 posts each
• Sectors - Engineering, Cloud, Database - 15 posts each
• Industries - AEC, Real Estate, Manufacturing - 15 posts each

now i had created following templates for each taxonomy

1. taxonomy-industry.php
2. taxonomy-rtag.php
3. taxonomy-sector.php
4. taxonomy-type.php

no to get my desired out put i working on "resources/industry/aec/" which is technically taxonomy-industry.php

where i had display by default posts with following code

<?php
            $args = array(
                'post_type' => 'resource',
                'posts_per_page' => 9,
                'paged' => get_query_var('paged'),
                'tax_query' => array(),
            );

            // You can modify the $args based on the selected dropdown values here
            if (isset($_POST['industry']) && !empty($_POST['industry'])) {
                $args['tax_query'][] = array(
                    'taxonomy' => 'industry',
                    'field' => 'slug',
                    'terms' => sanitize_text_field($_POST['industry']),
                );
            }

            // Repeat similar checks for 'sector' and 'type'

            $query = new WP_Query($args);

            if ($query->have_posts()) :
                while ($query->have_posts()) :
                    $query->the_post();
               ?>

so when page load it will default all posts that are registered with AEC industry now i had added 3 dropdowns in this template like

    <?php
      // Get the terms for the 'type' taxonomy
      $type_terms = get_terms(array(
         'taxonomy' => 'type',
         'hide_empty' => false,
      ));

      // Get the terms for the 'sector' taxonomy
      $sector_terms = get_terms(array(
         'taxonomy' => 'sector',
         'hide_empty' => false,
      ));

      // Get the terms for the 'industry' taxonomy
      $industry_terms = get_terms(array(
         'taxonomy' => 'industry',
         'hide_empty' => false,
      ));

      // Retrieve the total number of posts for each option
      $type_counts = get_term_post_counts($type_terms);
      $sector_counts = get_term_post_counts($sector_terms);
      $industry_counts = get_term_post_counts($industry_terms);

      function get_term_post_counts($terms) {
         $term_counts = array();
         foreach ($terms as $term) {
            $term_counts[$term->slug] = $term->count;
         }
         return $term_counts;
      }
   ?>
   <div class="clearfix" style="padding:0 15px">
      <div class="one-fourth fl">Filter by</div>
      <div class="one-fourth fl">
      <!-- Dropdown for 'industry' -->
         <select id="industry-dropdown" class="width100 position-relative">
            <option value="">Industries</option>
            <?php foreach ($industry_terms as $term) : ?>
               <option value="<?php echo $term->slug; ?>"><?php echo $term->name . ' (' . $industry_counts[$term->slug] . ')'; ?></option>
            <?php endforeach; ?>
         </select>
      </div>
      <div class="one-fourth fl">
      <!-- Dropdown for 'sector' -->
         <select id="sector-dropdown" class="width100 position-relative">
            <option value="">Sectors</option>
            <?php foreach ($sector_terms as $term) : ?>
               <option value="<?php echo $term->slug; ?>"><?php echo $term->name . ' (' . $sector_counts[$term->slug] . ')'; ?></option>
            <?php endforeach; ?>
         </select>
      </div>
      <div class="one-fourth fl">
      <!-- Dropdown for 'type' -->
         <select id="type-dropdown" class="width100 position-relative">
            <option value="">Types</option>
            <?php foreach ($type_terms as $term) : ?>
               <option value="<?php echo $term->slug; ?>"><?php echo $term->name . ' (' . $type_counts[$term->slug] . ')'; ?></option>
            <?php endforeach; ?>
         </select>
      </div>
   </div>

no i had tried various code but didn't find the solution, what I am trying to implement that when any body select any drop-down then existing loop will change the value and display the result for that selected value for AEC industry

for example i had selected brochure then it should show Brochure from AEC for all sectors without page refresh.

We can go with JS+Ajax and Add another div to display output and hide old existing loop div.

Please guide me or suggest me some path to achieve this.

本文标签： How to Filter the Custom term loop based on dropdown