Thursday, October 20, 2022
HomeWordPress Developmentquestion - AJAX loading with customized parameters

question – AJAX loading with customized parameters


I’ve a CPT arrange with some customized taxonomy and I’ve created some customized looking performance that works nice with it, ( a consumer can search by key phrase, trade, specialty, location, or all 4 or any mixture of the 4 ), what I am attempting to do now could be implement infinite scrolling after a search that features the parameters entered by the consumer.

I’ve bought all the things working so far as the AJAX name and creating a question to incorporate the parameters. My downside is that the AJAX name is returning duplicate outcomes which have already been displayed from the unique search and I’m struggling to discover a approach to filter out the unique outcomes from the AJAX calls.

Right here is my pre_get_posts customized search perform that generates the intial outcomes

/*=================================================
SEARCH QUERY
=================================================== */
perform custom_search( $question ) {
    if ( is_post_type_archive( 'consultants' ) && $query->is_main_query() && !is_admin() ) {

        $key phrase = get_query_var( 'key phrase', FALSE );
        $industry_select = strtolower(str_replace(' ', '-', get_query_var( 'industry_select', FALSE ) ));
        $speciality_select = strtolower(str_replace(' ', '-', get_query_var( 'speciality', FALSE ) ));
        $location_select = strtolower(str_replace(' ', '-', get_query_var( 'location_select', FALSE ) ));


        // create checklist of phrases much like what the consumer typed in
        // use array push so as to add the precise time period searched to the broad match phrases, in any other case name__like won't match if the question is precise

        $broad_match_ind = get_terms( array(
            'taxonomy' => 'experts_industries',
            'fields' => 'slugs', 
            'name__like' => $industry_select,
            'hide_empty' => false 
        ) );
        array_push($broad_match_ind, $industry_select);

        $broad_match_spec = get_terms( array(
            'taxonomy' => 'experts_specialities',
            'fields' => 'slugs',
            'name__like' => $speciality_select,
            'hide_empty' => false 
        ) );
        array_push($broad_match_spec, $speciality_select);

        $broad_match_loc = get_terms( array(
            'taxonomy' => 'experts_locations',
            'fields' => 'slugs', 
            'name__like' => $location_select,
            'hide_empty' => false 
        ) );
        array_push($broad_match_loc, $location_select);        

        // Key phrases question
        $key phrase ? $key phrase : $key phrase = null;

        $query->set('s', $key phrase);
        
        // Construct taxonomy array based mostly on what's been crammed out 

        $tax_query_array = array('relation' => 'AND');
        $location_select ? array_push($tax_query_array, array('taxonomy' => 'experts_locations', 'area' => 'slug', 'phrases' => $broad_match_loc) ) : null ;
        $speciality_select ? array_push($tax_query_array, array('taxonomy' => 'experts_specialities', 'area' => 'slug', 'phrases' => $broad_match_spec) ) : null ;
        $industry_select ? array_push($tax_query_array, array('taxonomy' => 'experts_industries', 'area' => 'slug', 'phrases' => $broad_match_ind) ) : null ;

        $query->set( 'tax_query', $tax_query_array);
    }
}
add_action( 'pre_get_posts', 'custom_search' ); 

Right here is an instance of the ajax perform that masses extra posts when my ajax name is triggered on the entrance finish

if ( $key phrase && $spec && $ind && $loc ) {
    error_log('key phrase + spec + ind + loc params');
    $ajaxposts = new WP_Query([
        'post_type' => 'experts',
        'posts_per_page' => 4,
        'orderby' => 'rand',
        'paged' => $_POST['paged'],
        's' => $_POST['keyword'],
        'tax_query' => array(
            array(
                'taxonomy' => 'experts_specialities',
                'area' => 'slug',
                'phrases' => $spec
            ),
            array(
                'taxonomy' => 'experts_industries',
                'area' => 'slug',
                'phrases' => $ind
            ),
            array(
                'taxonomy' => 'experts_locations',
                'area' => 'slug',
                'phrases' => $loc
            )
        )
    ]);
}

Lastly right here is the JS making the ajax name/dealing with the response

    const archiveLoadMore = perform() {
        let key = $('#key phrase').val();
        let spec = $('#speciality').val();
        let ind = $('#industry_select').val();
        let loc = $('#location_select').val();
        //console.log(key);
        currentPageArchive++;

        console.log(key);

        $.ajax({
            sort: 'POST',
            url: '/wp-admin/admin-ajax.php',
            dataType: 'json',
            knowledge: {
              motion: 'load_more_experts',
              paged: currentPageArchive,
              key phrase: key,
              speciality: spec,
              industry_select: ind,
              location_select: loc
            },
            beforeSend: perform() {
                $("#loaderArchiveDiv").present();
            },
            success: perform (res) {
                setTimeout(() => {
                    if(res.size > 0) {
                        $("#loaderArchiveDiv").conceal();
                        //console.log(res);
                        res.forEach(ele => {
                            card = '<div class="col-md-3 expert-preview"><h4>' + ele['title'] + '</h4><p model="font-size:12px;">' + ele['location'] +', ' + ele['state'][0] + '</p><div class="headshot-container"><img src="' + ele['headshot']['sizes']['thumbnail'] +'"></div><div class="specality-container"><h5>Specialties</h5><p> ' + ele['specialities'][0]['name'] + ' </p><p> ' + ele['specialities'][1]['name'] + ' </p><p> ' + ele['specialities'][2]['name'] + ' </p></div><button sort="button" class="btn btn-link learn-more"><a href="' + ele['postLink'] + '">Study Extra</a></button></div>';
                            $('.experts-row').append(card);
                        });
                    } else {
                        $("#loaderArchiveDiv").conceal();
                    }
                }, 1000);
            }
          });
    }

There appears to be a disconnect between the unique search and the ajax calls, I really feel I could make it work by altering the outcomes from rand to desc or aesc however I would like them to be random.

Any perception can be superior! Thanks.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments