CODEWITHSUNDEEP
ajaxwordpresswoocommerce
mohamed adel
mohamed adel

Reputation: 715

Wordpress Lazy Loading using Pagination

im doing a lazy loading with WP_Query Pagination it's working fine but the content duplicate itself when it reaches it's end and when i search for a specific result it shows the result correctly but after that it still want to do lazy load so it load random data

here is my code

lazy-load.php

    <?php 

add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');

function load_posts_by_ajax_callback(){
    // check_ajax_referer( 'load_more_posts', 'security' );
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'unit',
        'post_status' => 'publish',
        'posts_per_page' => 4,
        'paged' => $paged
    );
    if ( !empty($_POST['taxonomy']) &&  !empty($_POST['term_id']) ){
        $args['tax_query'] = array (
            array(
                'taxonomy' => $_POST['taxonomy'],
                'terms'    => $_POST['term_id'],
            ),
        );
    }
    if ( ! is_null($_POST['offer']) ) {
        $args['meta_query'][] = array(
            'key'    => 'WAKEB_hot',
            'value'  => '1',
            'compare' => '=',
        );
    }
    if ( ! is_null($_POST['purpose']) ) {
        $args['meta_query'][] = array(
            'key'    => 'WAKEB_vacation',
            'value'  => '1',
            'compare' => '=',
        );
    }
    if (!empty($_POST['project'])){
        $args['meta_query'] = array (
            array(
                'key' => 'WAKEB_project',
                'value' => $_POST['project'],
                'compare' => '='
            ),
        );
    }
    // start buffer 
    ob_start();
    $query = new WP_Query( $args );
    if ( $query->have_posts() ) : 
        while($query->have_posts()){ $query->the_post(); 
            get_template_part("template-parts/units"); 
        } 
    endif; wp_reset_postdata();
    // start buffered data in data variable
    $data = ob_get_clean();
    wp_send_json_success( $data );
    wp_die();
}

add_action('wp_ajax_nopriv_load_projects_by_ajax', 'load_projects_by_ajax_callback');
add_action('wp_ajax_load_projects_by_ajax', 'load_projects_by_ajax_callback');

function load_projects_by_ajax_callback(){
    // check_ajax_referer( 'load_more_posts', 'security' );
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'project',
        'post_status' => 'publish',
        'posts_per_page' => 4,
        'paged' => $paged
    );
    if ( ! is_null($_POST['ptype']) ) {
        $args['tax_query'] = array (
            array(
                'taxonomy' => 'pptypes',
                'field'    => 'slug',
                'terms'    => $_POST['ptype'],
            ),
        );
    }
    if ( !empty($_POST['taxonomy']) &&  !empty($_POST['term_id']) ){
        $args['tax_query'] = array (
            array(
                'taxonomy' => $_POST['taxonomy'],
                'terms'    => $_POST['term_id'],
            ),
        );
    }
    // start buffer 
    ob_start();
    $query = new WP_Query( $args );
    if ( $query->have_posts() ) :
        while($query->have_posts()){ $query->the_post();
            get_template_part("template-parts/projects");
        }
    endif; wp_reset_postdata();
    // start buffered data in data variable
    $data = ob_get_clean();
    wp_send_json_success( $data );
    wp_die();
}

lazy-load.js

    $('.unit-terms li a').each( function() {
    if ( this.href == window.location.href ) {
        $(this).parent().addClass('current');
    }
});

main.js

    (function($){
  $('.isotope a').on('click', function(){
    $('.isotope .active').removeClass('active');
    $(this).addClass('active');
    var filter = $(this).data('filter');
    if(filter=='*'){
    $('.property').show();
  }else{
    $('.property').not(filter).hide();
    $('.property'+filter).show();
  }
  return false;
  });
})(jQuery);

so how can i make it work? i don't know what im doing wrong here

Here is the repo link for the full project https://github.com/Ov3rControl/hoomerz

Upvotes: 4

Views: 1388

Answers (2)

Tomek Dura
Tomek Dura

Reputation: 146

ok, now I understand what you meant ;) During lazy load you send to backend only page number without current state of filters and / or search string. So it sends all posttype items based on page number only. You should send also current state of filters

main.js: add this to your after-page-load function:

var currentUrl = new URL(window.location.href); var searchQuery = urlObj.searchParams.get("k");

lazy-load.js: add search param to data posted to backend

var data = {
    'action': 'load_posts_by_ajax',
    'page': page,
    'search: searchQuery // new field
};

lazy-load.php: add search param to WP_Query

if ( isset($_POST['search']) && !empty($_POST['search']) ){ // new section
    $args['s'] = sanitize_text_field($_POST['search']);
}

That's example for text search filter. For all filters you must

1. match every filter from front (URL get param) (main.js)
2. than put it in data object sent to backend (lazy-load.js)
3. address this variable in lazy-load.php in if(isset($_POST['param-name'])) section ( new or existing one as there are some )

Upvotes: 2

Tomek Dura
Tomek Dura

Reputation: 146

I suggest to try without ob_start() / ob_get_clean(). Also if you generate html instead of raw data structure, I would simply print it to output without wp_send_json_success().

Other solution would be sending raw data (1. array in php, 2. json_encode(), 3. wp_send_json() ) and than processing in javascript (dynamic dom element creation after request to backend made).

Upvotes: 0

Related Questions