使用padgination的WordPress延迟加载

时间:2019-06-25 14:56:38

标签: javascript php ajax wordpress lazy-loading

使用分页和WP_Query加载 它正在工作,但是会加载无关的数据

第一个帖子是正确的,但是当您滚动其余帖子时,它们是无关紧要的,因为在此ajax调用功能中

        $(window).scroll(function(){
        if ( ! loading && scrollHandling.allow ) {
            scrollHandling.allow = false;
            setTimeout( scrollHandling.reallow,scrollHandling.delay );
            var offset = $(button).offset().top - $(window).scrollTop();
            if ( 2000 > offset ) {
                loading = true;
                $('.loader-wrap').css({display: 'flex'});
                var data = {
                    'action':       'load_projects_by_ajax',
                    'page':         page,

                };
                if ( ptype ) {
                    data.ptype = ptype;
                }
                console.log(data);
                $.post(AJAX.ajaxurl, data, function(response) {
                    if( response.data != "") {
                        $('.project-listings .content-wrap').append(response.data);
                        $('.project-listings').append( button );
                        page++;
                        $('.loader-wrap').css({display: 'none'});
                        loading = false;
                    }else{
                        $('.loader-wrap').css({display: 'none'});
                        scrollHandling.allow = false;
                    }
                });
            }
        }
    });

我仅向后端发送页码,而没有过滤器和/或搜索字符串的当前状态。因此,它仅根据页码发送所有posttype项目。我还应该发送过滤器的当前状态,但是我不知道该怎么做?

这是我的lazy-load.php

    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();
}

page-find-projects.php

    <?php
get_header();
$args = array (
    'post_type' => 'project',
    'posts_per_page' => 4,
    'paged' => 1,
);

if (!empty($_GET['region'])){
    $args['tax_query'] = array (
        array(
            'taxonomy' => 'regions',
            'terms'    => $_GET['region'],
        ),
    );
}

if (!empty($_GET['facilities'])){
    $args['tax_query'] = array (
        array(
            'taxonomy' => 'facilities',
            'terms'    => $_GET['facilities'],
        ),
    );
}

if (!empty($_GET['ptype'])){
    $args['tax_query'] = array (
        array(
            'taxonomy' => 'pptypes',
            'field'    => 'slug',
            'terms'    => $_GET['ptype'],
        ),
    );
}

if (!empty($_GET['dev'])){
    $args['meta_query'] =array(
        array(
            'key'    => 'WAKEB_dev',
            'value'  => $_GET['dev'],
            'compare' => 'IN',
            'type'   => 'NUMERIC',
        ),
    );
}

if(!empty($_GET['k'])){
    $args['s'] = $_GET['k'];
}
?>

<div class="fixed-search project-page">
    <form method="get" action="<?php bloginfo('wpurl'); ?>/find-projects/" name="find-projects">
        <div class="content-wrap">
            <div class="form-group">
                <div class="field-group">
                    <input type="search" placeholder="<?php _e('Search', 'WAKEB'); ?>" name="k" id="k" >
                </div>
                <div class="field-group">
                    <div id="toggle-dev" class="filter"><?php _e('Filter by developer', 'WAKEB'); ?></div>
                    <div class="dropdwon" id="dev-select">
                        <?php 
                            $dev_args = array (
                                'post_type'      => 'developer',
                                'posts_per_page' => -1,
                            );
                            $query = new WP_Query( $dev_args );
                            if($query->have_posts()){
                                while($query->have_posts()){
                                    $query->the_post();
                                    echo '<div class="checkbox">';
                                    echo '<label><input type="checkbox" name="dev[]" value="'.get_the_ID().'"><span class="checkmark"></span>'.get_the_title().'</label>';
                                    echo '</div>';
                                }
                            }
                        ?>
                    </div>
                </div>
                <div class="field-group">
                    <div id="regions-toggle" class="filter"><?php _e('Filter by regions', 'WAKEB'); ?></div>
                    <div class="dropdwon" id="select-regions">
                        <?php 
                            echo '<ul>';
                            draw_tree_for_regions(0);
                            function draw_tree_for_regions($p_id){
                                $reg_args = array (
                                    'orderby'    => 'menu_order',
                                    'hide_empty' => false,
                                    'parent'     => $p_id,
                                );
                                $allregions = get_terms('regions', $reg_args);
                                foreach ($allregions as $region){
                                    if ( !get_field( 'hide', 'regions_'. $region->term_id ) ) :
                                        echo '<li><div class="checkbox">';
                                        echo '<label class="item" for="'.$region->term_id.'"><input type="checkbox" class="project-checkbox" name="region[]" id="'.$region->term_id.'" value="'.$region->term_id.'"><span class="checkmark"></span>'.$region->name.'</label>';
                                        echo '</div>';
                                        $children=get_term_children($region->term_id, 'regions');
                                        if($children){
                                            echo '<ul>';
                                            draw_tree_for_regions($region->term_id);
                                            echo '</ul>';
                                        }
                                        echo '</li>';
                                    endif;
                                }
                            }
                            echo '</ul>';
                        ?>
                    </div>
                </div>
                <div class="field-group">
                    <div id="toggle-sec" class="filter"><?php _e('Filter by facilities', 'WAKEB'); ?></div>
                    <div class="dropdwon" id="fac-select">
                        <?php 
                            $fac_args = array (
                                'orderby'     => 'menu_order',
                                'hide_empty'  => false,
                            );
                            $facility = get_terms('facilities', $fac_args);
                            foreach ($facility as $fac){
                                if ( !get_field( 'hide', 'facilities_'. $fac->term_id ) ) :
                                    echo '<div class="checkbox">';
                                    echo '<label class="item"><input type="checkbox" name="facilities[]" value="'.$fac->term_id.'"><span class="checkmark"></span>'.$fac->name.'</label>';
                                    echo '</div>';
                                endif;
                            }
                        ?>
                    </div>
                </div>
                <div class="field-group">
                    <button type="submit"><?php _e( 'Search', 'WAKEB' ); ?></button>
                </div>
            </div>
        </div>
    </form>
</div>

<section class="content-search-result page-section">
    <div class="section-title"><h2><?php _e('AVAILABLE COMPOUNDS', 'WAKEB'); ?></h2></div>
    <?php
        $query = new WP_Query( $args );
        if($query->have_posts()){ ?>
            <ul class="project-listings">
                <div class="content-wrap">
                <?php 
                    while( $query->have_posts() ) : $query->the_post(); 
                        get_template_part("template-parts/projects");
                    endwhile;
                ?>  
                </div>
            </ul>
            <?php echo '<div class="loader-wrap"><div class="lds-facebook"><div></div><div></div><div></div></div></div>';
        }else{
            echo '<div class="no-result">'. _e( 'No results found...', 'WAKEB' ) .'</div>';
        }

    ?>  
</section>

<?php get_footer(); ?>

问题的实时链接 http://beta.hoomerz.com/find-properties/?k=Ain+Sokhna&area1=&area2=&price1=&price2=

0 个答案:

没有答案