php – Display WordPress search results based on the selected Sub-Category

Question

I’m trying to create a search using dropdowns in WordPress.

I’ve got two dropdowns, 1 – Parent Category and 1 – Sub-category.

The Sub-category will show automatically based on the selected Parent category.

My goal is to have the 2 dropdowns with a submit button and have it act as a search and only displaying the selected sub-category’s posts on the results page.

I’ve got this far using research but I’m completely lost and struggling as you can see.

Below is my functions.php code:

// FUNCTIONS.PHP

// Drop-down Ajax call

add_action('wp_ajax_my_special_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
function my_action_callback() {
    if(isset($_POST['main_catid'])) {
        $categories = get_categories('child_of=".$_POST["main_catid'].'&hide_empty=0');
        foreach ($categories as $cat) {
            $option .= '<option value="'.$cat->term_id.'">';
            $option .= $cat->cat_name;
            $option .= ' ('.$cat->category_count.')';
            $option .= '</option>';
        }
        echo '<option value="-1" selected="selected">Search...</option>'.$option;
        die();
    } // end if
}



// Define search for sub-category
function search_filter( $query ) {
    // only modify your custom search query.
    if ( $query->is_search &&  $_post['my_search'] == "c_search") {
        $args = array(
                'relation' => 'AND',
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => array( $_post['main_cat']),
                'operator' => 'IN'
            ),
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => array( $_post['sub_cat']),
                'operator' => 'IN'
            )
        );
        $query->set( 'tax_query', $args);
    }
    return $query;
}

// The hook needed to search_filter
add_filter( 'the_search_query','search_filter');

This is the HTML & JS code used for the form and Ajax call for the sub-categories:

<div id="content">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
  <div>
    <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
    <?php
wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=main_cat');
?>
    <select name="sub_cat" id="sub_cat" enabled="disabled"></select>
    <input type="hidden" id="my_search" name="my_search" value="c_search" />
    <input type="submit" id="searchsubmit" value="search" />
  </div>
</form>


<script type="text/javascript">
    jQuery(function() {
      jQuery('#main_cat').change(function() {
        var $mainCat = jQuery('#main_cat').val();

        // call ajax
        jQuery("#sub_cat").empty();
        jQuery.ajax({
          url: "https://testdev.co.za/test/macadams_new/wp-admin/admin-ajax.php",
          type: 'POST',
          data: 'action=my_special_action&main_catid=' + $mainCat,

          success: function(results) {
            //  alert(results);
            jQuery("#sub_cat").removeAttr("disabled");
            jQuery("#sub_cat").append(results);
          }
        });
      });
    });
</script>

0
ZUH. 3 months 2022-04-05T03:29:54-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse