custom post types - Issues with Ajax Pagination and Filtering

admin管理员组

文章数量:1124031

I am creating a website and just can't manage to get the pagination to update when a filter is selected.

block.php

<section class="photographers full-width-grid mt-<?= $attributes['margin-top']; ?> mb-<?= $attributes['margin-bot']; ?>">
    <div class="filter-container photographers-filter d-grid">
        <?php
        $photographer_cat_terms = get_terms(array(
            'taxonomy' => 'kategorie',
            'hide_empty' => false,
        ));

        $bundesland_terms = get_terms(array(
            'taxonomy' => 'bundesland',
            'hide_empty' => false,
        ));
        ?>

        <select class="photographer-cat" name="photographer-cat">
            <option value="">Kategorie</option>
            <?php foreach ($photographer_cat_terms as $term) : ?>
                <option value="<?php echo esc_attr($term->slug); ?>"><?php echo esc_html($term->name); ?></option>
            <?php endforeach; ?>
        </select>

        <select class="photographer-location" name="photographer-location">
            <option value="">Bundesland</option>
            <?php foreach ($bundesland_terms as $term) : ?>
                <option value="<?php echo esc_attr($term->slug); ?>"><?php echo esc_html($term->name); ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <div class="photographers-container d-grid" id="photographers-container">
    <?php
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
    $args = array(
        'post_type' => 'photographers',
        'paged'     => $paged,
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) :
        while ($query->have_posts()) : $query->the_post(); 
        ?>
            <a href="<?php the_permalink(); ?>" class="photographer-single">
                <div class="photographer-thumbnail img-container">
                    <?php if (has_post_thumbnail()) { the_post_thumbnail(); } ?>
                </div>
                <div class="photographer-name sub-headline"><?php the_title(); ?></div>
            </a>
        <?php
        endwhile;
        wp_reset_postdata();
    else :
    ?>
        <div class="no-photographers">Keine Fotografen gefunden</div>
    <?php endif; ?>
    </div>
    <?php if ( $query->max_num_pages > 1 ) { ?>
        <div class="pagination-container">
            <?php 
            echo paginate_links( array(
                'base'    => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
                'format'  => '?paged=%#%',
                'current' => max( 1, $paged ),
                'total'   => $query->max_num_pages,
            ) );
            ?>
        </div>
    <?php } ?>
</section>

functions.php

function handle_filtering_ajax() {
    $category = isset($_GET['category']) ? $_GET['category'] : '';
    $location = isset($_GET['location']) ? $_GET['location'] : '';
    $paged = isset($_GET['paged']) ? $_GET['paged'] : 1;

    $tax_query = array('relation' => 'AND');

    if (!empty($category)) {
        $tax_query[] = array(
            'taxonomy' => 'kategorie',
            'field'    => 'slug',
            'terms'    => $category,
        );
    }

    if (!empty($location)) {
        $tax_query[] = array(
            'taxonomy' => 'bundesland',
            'field'    => 'slug',
            'terms'    => $location,
        );
    }

    $args = array(
        'post_type'      => 'photographers',
        'tax_query'      => $tax_query,
        'paged'          => $paged, // Pass the current page number
    );
    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            ?>
            <a href="<?php the_permalink(); ?>" class="photographer-single">
                <div class="photographer-thumbnail img-container">
                    <?php if (has_post_thumbnail()) { the_post_thumbnail(); } ?>
                </div>
                <div class="photographer-name sub-headline"><?php the_title(); ?></div>
            </a>
        <?php
        }
        wp_reset_postdata();
    } else {
        echo 'Keine Fotografen gefunden.';
    }

    die();
}
add_action('wp_ajax_handle_filtering', 'handle_filtering_ajax');
add_action('wp_ajax_nopriv_handle_filtering', 'handle_filtering_ajax');

main.js

filterHelper = () => {
    function handlePagination(e) {
        e.preventDefault();
        var link = $(this).attr('href');
        $.get(link, function(data) {
            var $container = $('.photographers-container');
            var photographers = $(data).find('.photographers-container').html();
            var pagination = $(data).find('.pagination-container').html();

            $container.html(photographers);
            $('.pagination-container').html(pagination);

            $('html,body').animate({
                scrollTop: $('.photographers').offset().top - $('.site-header').outerHeight() - 50
            }, '250');

            $('.pagination-container a').on('click', handlePagination);
        });
    }

    $('.pagination-container').on('click', 'a', handlePagination);

    function handleFiltering(category, location, page) {
        $.ajax({
            url: ajax_obj.ajax_url,
            type: 'GET',
            data: {
                action: 'handle_filtering',
                category: category,
                location: location,
            },
            success: function(response) {
                $('.photographers-container').html(response);
                $('.pagination-container a').on('click', handlePagination);
            },
            error: function(xhr, status, error) {
                console.error(xhr, status, error);
            }
        });
    }

    $('.photographer-cat, .photographer-location').change(function() {
        var category = $('.photographer-cat').val();
        var location = $('.photographer-location').val();
        handleFiltering(category, location, page);
    });
}

本文标签： custom post typesIssues with Ajax Pagination and Filtering