woocommerce分类法ajax过滤器,获取正确的分页

时间:2018-10-21 17:39:13

标签: php ajax wordpress post woocommerce

我正在构建woocommerce分类法Ajax过滤器,除一个问题外,一切都很好。 当我将产品列表替换为过滤后的列表时,分页不会得到更新以匹配新结果。这是有道理的,因为在我过滤帖子后,我只打电话给

 wc_get_template_part( 'content', 'product' );

所以我的问题是: 如何替换/更新分页。

这是我的代码:

    public function hmuAjaxCall()
{
    ?>
    <div class="col-md-12">
        <?php

        $nonce = $_POST['nonce'];

        if (!wp_verify_nonce($nonce, 'ajax-nonce')) {
            die('Busted!');
        }
        $cpt = 'product';
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

        $args = array(
            'post_type' => $cpt,
            'posts_per_page' => -1,
            'paged' =>  $paged,
            'orderby' => array(
                'ID' => 'DESC',
            ),

        );

        if ($_POST['args'] == 'true') {
            $result = array();
            foreach ($_POST['attributes'] as $tax => $term) {
                $result [] = array(
                    'taxonomy' => $tax,
                    'field' => 'slug',
                    'terms' => array($term),

                );
            }
            //var_dump($result);
            $args['tax_query'] = array(
                'relation' => 'AND',

                $result
            );

        }


        /* when using namespace dont forget to add \ to WP_Query */
        $query = new \WP_Query($args);
        if ($query->have_posts()) :
            while ($query->have_posts()) {
                $query->the_post();

                wc_get_template_part( 'content', 'product' );

            }

            wp_reset_postdata();
        else :
            echo '<h2> No Result found</h2>';
        endif;

        die();

        ?>
    </div>

    <?php
}

这是我的js代码:

$.ajax({
        url: adminAjax ,
        data : {
            action : 'customfilter',
            nonce: nonce,
            attributes: href,
            args : arg,

        },
        type:'POST', // POST
        beforeSend:function(xhr){
            $('body').addClass('load-ajax');
        },
        error:function (data) {
            $('body').removeClass('load-ajax');
            console.log('ERROR');
        },
        success:function(data){
            $('body').removeClass('load-ajax');
            if(data =='') {
                console.log('empty');
            }else {

                $('#con').empty().html(data);
            }


            // $('#lazyload').empty();
        }
    });

编辑:

通过在循环后添加以下代码,我设法获得了正确的分页:

 <nav class="woocommerce-pagination">
                <?php
                echo paginate_links( apply_filters( 'woocommerce_pagination_args', array(
                    'base'         => esc_url_raw( str_replace( 999999999, '%#%', remove_query_arg( 'add-to-cart', get_pagenum_link( 999999999, false ) ) ) ),
                    'format'       => '',
                    'add_args'     => false,
                    'current'      => max( 1, get_query_var( 'paged' ) ),
                    'total'        => $query->max_num_pages,
                    'prev_text'    => '&larr;',
                    'next_text'    => '&rarr;',
                    'type'         => 'list',
                    'end_size'     => 3,
                    'mid_size'     => 3,
                ) ) );
                ?>
            </nav>

但是当点击页面时,我得到这个链接: /wp-admin/admin-ajax.php?paged=2 所以现在的问题是如何获得正确的链接?

1 个答案:

答案 0 :(得分:0)

这是我设法解决的方法:

在循环中获取导航结果并将其隐藏

let a: Set = [1, 2, 3]
let b: Set = [3, 5, 2]
if !a.isSubset(of: b) {
    let c: Set = a.intersection(b)
}

然后在js文件中,我用分页的替换分页:

 <nav class="woocommerce-pagination" id="hmuPagination" style="display: none">
                <?php
                echo paginate_links(array(
                    'base' => home_url('/%_%'),
                    'format' => '&paged=%#%',
                    'add_args' => false,
                    'current' => $paged,
                    'total' => $query->max_num_pages,
                    'prev_text' => '&larr;',
                    'next_text' => '&rarr;',
                    'type' => 'list',
                    'end_size' => 3,
                    'mid_size' => 3,
                ));
                ?>
            </nav>