Пользовательский Фильтр Таксономии Типа Записи С Разбиением На Страницы Ajax

#php #ajax #wordpress #pagination

Вопрос:

Я создал первый пользовательский тип записи «продукт» и создал некоторую таксономию, например: «тип», «отделка» и «размер».

Но у меня проблема «ajax-ответ» в разбиении на страницы не работает.

Разбиение на страницы не работает с ответом ajax.

Кто-нибудь знает, как обрабатывать разбиение на страницы в результатах ajax?

Итак, вот мой код:

     //1. Html Code
    <form action="" method="POST" id="filter">
        <div class="zindex-filter">
            <div class="filter-by-type">
                <div class="sidebar-title">
                    <h5>Filter by type</h5>
                </div>
                <div class="filter-content">
                    <ul>
                    <?php
                        $tt=0;
                        if( $terms = get_terms( array(
                        'taxonomy' => 'type', // to make it simple I use default categories
                        'orderby' => 'name'
                        ) ) ) :                                     
                        foreach ( $terms as $term ) : $tt  ;
                            //echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; 
                            ?>                                          
                            <li>
                                <input class="form-check-input" type="checkbox" name="typecat" id="typecat<?php echo $tt; ?>" value="<?php echo $term->term_id; ?>" onclick="handleClick();" >
                                <label for="typecat<?php echo $tt; ?>"><?php echo $term->name; ?></label>
                            </li>
                            <?php
                        endforeach;     
                        endif;
                    ?>                                  
                    </ul>
                </div>
            </div>
            <div class="filter-by-finish">
                <div class="sidebar-title">
                    <h5>Filter by finish</h5>
                </div>
                <div class="filter-content">
                    <ul>
                    <?php
                        $ff=0;
                        if( $terms = get_terms( array(
                        'taxonomy' => 'finish', // to make it simple I use default categories
                        'orderby' => 'name'
                        ) ) ) :                                  
                        foreach ( $terms as $term ) : $ff  ;
                            //echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; 
                            ?>                                        
                            <li>
                            <input class="form-check-input" type="checkbox" name="finishcat" id="finishcat<?php echo $ff; ?>" value="<?php echo $term->term_id; ?>" onclick="handleClick();">
                            <label for="finishcat<?php echo $ff; ?>"><?php echo $term->name; ?></label>
                            </li>
                            <?php
                        endforeach;     
                        endif;
                    ?>                                    
                    </ul>
                </div>
            </div>
            <div class="filter-by-size">
                <div class="sidebar-title">
                <h5>Filter by size</h5>
                </div>
                <div class="filter-content">
                <ul>
                    <?php
                    $ss=0;
                    if( $terms = get_terms( array(
                        'taxonomy' => 'size', // to make it simple I use default categories
                        'orderby' => 'name'
                    ) ) ) :                                   
                        foreach ( $terms as $term ) : $ss  ;
                        //echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; 
                        ?>                                        
                            <li>
                            <input class="form-check-input" type="checkbox" name="sizecat" id="sizecat<?php echo $ss; ?>" value="<?php echo $term->term_id; ?>" onclick="handleClick();" >
                            <label for="sizecat<?php echo $ss; ?>"><?php echo $term->name; ?></label>
                            </li>
                        <?php
                        endforeach;     
                    endif;
                    ?>
                </ul>
                </div>
            </div>
        </div>
    </form>
    // 1. End Html Code
    // 2.PHP Code
        <?php
            $paged = get_query_var('paged') ? get_query_var('paged') : 1;
            $the_query  = new WP_Query(array(
            'post_type'   => 'product',
            'post_status' =>'publish',
            'posts_per_page' => 6,
            'paged' => $paged,
            'no_found_rows' => true,
            'orderby' => 'menu_order',
            'order' => 'DESC'
            ));
            //echo '<pre>'; print_r($the_query);
            if ( $the_query->have_posts() ) {   
        ?>  
            <div class="products-zindex">
                <div class="row productlist">                           
                <?php while ( $the_query->have_posts() ) {
                    $the_query->the_post();
                    $pid = $the_query->post->ID;
                    $product_name = $the_query->post->post_title;
                    //$product_slug = $the_query->post->post_name;
                    $featured_img_url = get_the_post_thumbnail_url($pid, 'full');
                    $procatArr = wp_get_post_terms( $pid, 'finish' ); 
                    //print_r($procatArr);
                ?>
                    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 scrollload">
                    <div class="zindex-product-detail">
                        <a href="<?php echo get_permalink(); ?>">
                            <div class="product-img">
                                <img src="<?php echo $featured_img_url; ?>" alt="<?php echo $product_name; ?>" class="img-fluid">
                            </div>
                            <div class="product-data">
                                <h5><?php echo $product_name; ?></h5>
                                <h6> 
                                <?php
                                    $comma_string = array();
                                    foreach( $procatArr as $catval ) {            
                                        $comma_string[] = $catval->name;         
                                    }
                                    echo $productname = implode(", ", $comma_string);
                                ?>
                                </h6>
                            </div>
                        </a>
                    </div>
                    </div>
                <?php }                     
                    echo "<nav class="sw-pagination">";
                    $big = 999999999; // need an unlikely integer
                    echo paginate_links( array(
                        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
                        'format' => '?paged=%#%',
                        'current' => max( 1, get_query_var('paged') ),
                        'total' => $the_query->max_num_pages
                    ) );
                    echo "</nav>";
                    wp_reset_query();                    
                ?>              
                </div>
            </div>
        <?php } else { ?>
            <h2>No Product Found.</h2>
        <?php } ?>
    //2. End PHP Code
    // 3. Javascript Code
    <script>
        function handleClick(){ //alert('kghkghk');
            var arr = [];
            var farr = [];
            var sarr = [];
            jQuery.each(jQuery("input[name='typecat']:checked"), function(){
                arr.push(jQuery(this).val());
            });    
            var typearr = arr.join(", ");

            jQuery.each(jQuery("input[name='finishcat']:checked"), function(){
                farr.push(jQuery(this).val());
            });
            var finisharr = farr.join(", ");

            jQuery.each(jQuery("input[name='sizecat']:checked"), function(){
                sarr.push(jQuery(this).val());
            });
            var sizearr = sarr.join(", ");
            
            dealers_ajax_call(typearr, finisharr, sizearr);    
        }

        function dealers_ajax_call(typearr = "", finisharr = "", sizearr = "")
        {       
        //alert(typearr);
        //alert(finisharr);
        //alert(sizearr);
        jQuery("#ajaxloaderdiv").show();
        jQuery.ajax({
            type : "post",
            url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
            data:
            {
            typearr : typearr,
            finisharr : finisharr,              
            sizearr : sizearr,
            post_type : "product" , 
            type : "type",
            finish : "finish",
            size : "size",
            action : 'request_by_filter'
            },    
            success: function(data) {
                //alert(data);
                jQuery('#response').html(data); 
                //jQuery("#hidepagination").hide();
                //jQuery(".yith-infs-loader").hide();
                setTimeout(function(){ jQuery("#ajaxloaderdiv").hide(); }, 2000);
            }
        });
        }
    </script>
    //3.End Javascript Code

    // 4. Function.php code
    <?php
    // ajax code for request test ride details
    add_action( 'wp_ajax_nopriv_request_by_filter', 'request_by_filter' );
    add_action( 'wp_ajax_request_by_filter', 'request_by_filter' );
    function request_by_filter()
    {
        $typecatArr = $_POST['typearr'];
        //print_r($typecatArr);
        $type_arr = explode (",", $typecatArr); 
        
        $finishcatArr = $_POST['finisharr'];
        //print_r($finishcatArr);
        $finish_arr = explode (",", $finishcatArr);

        $sizecatArr = $_POST['sizearr'];
        //print_r($sizecatArr);
        $size_arr = explode (",", $sizecatArr);

        $post_type = $_POST['post_type'];
        $type = $_POST['type'];
        $finish = $_POST['finish'];
        $size = $_POST['size'];
        
        $paged = get_query_var('paged') ? get_query_var('paged') : 1;
        $args = array(
            'post_type' => $post_type,
            'posts_per_page'=>6,
            'paged' => $paged,
            'post_status' =>'publish',
            'orderby' => 'menu_order',
            'order' => 'DESC'        
        );
        if($type_arr || $finish_arr || $size_arr)
        {
            $tax_query['tax_query'] = array( 'relation'=>'AND' );
        }
        $args = array_merge_recursive( $args, $tax_query);
        if(!empty($typecatArr))
        {
            $tax_query['tax_query'] = array(
                array(
                    'taxonomy' => $type,
                    'field' => 'term_id',
                    'terms' => $type_arr,
                )
            );
            $args = array_merge_recursive( $args, $tax_query);

           // print_r($args);
        }
        if(!empty($finishcatArr))
        {
            $tax_query['tax_query'] = array(
                array(
                    'taxonomy' => $finish,
                    'field' => 'term_id',
                    'terms' => $finish_arr,
                )
            );
            $args = array_merge_recursive( $args, $tax_query);
           // print_r($args);
        }
        if(!empty($sizecatArr))
        {
            $tax_query['tax_query'] = array(
                array(
                    'taxonomy' => $size,
                    'field' => 'term_id',
                    'terms' => $size_arr,
                )
            );
            $args = array_merge_recursive( $args, $tax_query);
        }

        // echo '<pre>'; print_r($args);  echo '</pre>';
        $query = new WP_Query($args);
        if ( $query->have_posts() ) {
        ?>
            <div class="ajaxloader col-lg-10 col-md-9" id="ajaxloaderdiv" style="display:none;">  
                <img class="loading-image" src="<?php echo get_stylesheet_directory_uri(); ?>/framework/loader.gif" />
            </div>
            <div class="products-zindex">
                <div class="row">
                    <?php
                        while ( $query->have_posts() ) {
                            $query->the_post();
                            $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
                            $procatArr = wp_get_post_terms( get_the_ID(), $finish ); 
                    ?>
                        <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 scrollload">
                            <div class="zindex-product-detail">
                                <a href="<?php echo get_permalink(); ?>">
                                    <div class="product-img">
                                        <img src="<?php echo $featured_img_url; ?>" alt="<?php the_title(); ?>" class="img-fluid">
                                    </div>
                                    <div class="product-data">
                                        <h5><?php the_title(); ?></h5>
                                        <h6> 
                                            <?php
                                                $comma_string = array();
                                                foreach( $procatArr as $catval ) {            
                                                    $comma_string[] = $catval->name;         
                                                }
                                                echo $productname = implode(", ", $comma_string);
                                            ?>
                                        </h6>
                                    </div>
                                </a>
                            </div>
                        </div>
                    <?php } 
                        echo "<nav class="sw-pagination">";
                        $big = 999999999; // need an unlikely integer
                        echo paginate_links( array(
                            'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
                            'format' => '?paged=%#%',
                            'current' => max( 1, get_query_var('paged') ),
                            'total' => $the_query->max_num_pages
                        ) );
                        echo "</nav>";
                        wp_reset_query(); 
                    ?>
                </div>
            </div>
        <?php } else { ?>
            <h2>No Product Found.</h2>
        <?php
        }

        wp_die();
        //exit;
    }
    ?>
    // 4 .Endfunction.php code
 

Ищу код и советы по этому поводу.

Спасибо

Комментарии:

1. Кто-нибудь знает, как обрабатывать разбиение на страницы в результатах ajax?