web-dev-qa-db-fra.com

AJAX filtrer les publications sur les clics en fonction de la catégorie

Il s’agit de ma première incursion dans AJAX. J’ai épissé des fragments de code de divers didacticiels, ce qui n’a probablement pas aidé.

J'ai une liste de catégories sur ma page d'accueil (index.php) et une liste des messages les plus récents. Lorsqu'un utilisateur clique sur une catégorie, je souhaite que cette liste d'articles soit mise à jour sans actualiser la page. Actuellement, lorsque je clique sur un filtre, tous les articles sont chargés dans mon conteneur de réponses (ce n'est pas un filtrage par catégorie) et le seul contenu chargé dans the_content (), même si mon modèle (listing-post.php) demande la vignette , la catégorie etc.

J'utilise Bones comme thème de départ, d'où la raison pour laquelle wp_localize_script se trouve dans ce fichier (cela fonctionne). Je n'ai inclus que du code dont je sais qu'il a des problèmes (je sais que le reste du site et JS fonctionnent bien).

bones.php 

//Add AJAX path to use in load-posts.js
$getPath = array('ajaxURL' => admin_url('admin-ajax.php'));
wp_localize_script('main-js', 'pathToFile', $getPath);

functions.php 

//AJAX Category Filter
add_action( 'wp_ajax_load_cat_posts', 'load_cat_posts' );
add_action( 'wp_ajax_nopriv_load_cat_posts', 'load_cat_posts' );

function load_cat_posts () {
    $cat_id = get_post_meta($_REQUEST['cat']);
    $args = array (
      'cat' => $cat_id,
      'posts_per_page' => 10,
      'order' => 'DESC'
    );

    $posts = get_posts($args);

    ob_start ();

    foreach ( $posts as $post ) {
      setup_postdata( $post ); ?>

      <?php get_template_part( 'partials/listing', 'post'); ?>

   <?php } wp_reset_postdata();

   $response = ob_get_contents();
   ob_end_clean();

   echo $response;
   die(1);
}

index.php 

<?php $categories = get_categories(); ?>

<ul class="category-filters">
    <?php foreach ( $categories as $cat ) { ?>
        <li id="cat-<?php echo $cat->term_id; ?>">
            <a class="<?php echo $cat->slug; ?> ajax" data-cat="<?php echo $cat->term_id; ?>" href="javascript:void(0)"><?php echo $cat->name; ?></a>
        </li>
    <?php } ?>
</ul>

listing-post.php 

<li class="standard-post">
    <article id="<?php echo sanitize_title_with_dashes( get_the_title() ); ?>" <?php post_class(); ?> role="article">

        <?php if (has_post_thumbnail()) { ?>
            <div class="article-image">
                <?php the_post_thumbnail(large); ?>
            </div>
        <?php } ?>

        <div class="article-left">
            <?php foreach((get_the_category()) as $category) { ?>
                <span class="article-category"><?php echo $category->cat_name . ' ';?></span>
            <?php } ?>
            </div>

            <div class="article-right">
            <header class="article-header">
                <h1 class="article-title"><?php the_title(); ?></h1>
                <p class="article-time">
                    <?php printf( __( '<time class="updated" datetime="%1$s" pubdate>%2$s</time>', 'bonestheme' ), get_the_time(), get_the_time(get_option('date_format'))); ?>
                </p>
            </header>

            <section class="entry-content">
                <?php the_content(); ?>
            </section>
        </div>

    </article>
</li>

load-posts.js 

function cat_ajax_get(currentCat) {
            $('a.ajax').removeClass('current');
            $('a.ajax').addClass('current');
            $('#loading-animation').show();
            $.ajax({
                type: 'POST',
                url: ajaxurl,
                data: {action: 'load_cat_posts', cat: currentCat },
                success: function(response) {
                    $('.article-listing').html(response);
                    $('#loading-animation').hide();
                    return false;
                }
            });
        };

ajaxFilters: function() {
            $('.category-filters a').on('click', $.proxy(function(clickEvent) {
                $clickTarget = $(clickEvent.currentTarget);
                var currentCat = $clickTarget.attr('data-cat');
                cat_ajax_get(currentCat);
            },this));
        }
filtersajaxjavascript
4
GuerillaRadio

Cette ligne dans functions.php est votre problème:

$cat_id = get_post_meta($_REQUEST['cat']);

Je pense que vous ne comprenez pas le but de la fonction get_post_meta() . Il est conçu pour obtenir des métadonnées pour un message WordPress, et non des données provenant d'une demande POST sur le site. Le premier paramètre de la fonction get_post_meta() est le $post_id, mais puisque vous passez l'ID de la catégorie à la place, vous obtiendrez false ou un tableau de toutes les méta-valeurs si une publication avec le même ID que cet ID de catégorie existe. Dans l'un ou l'autre de ces cas, la valeur de la requête cat var ne sera pas un identifiant de categroy valide et une partie de la requête sera donc ignorée et toutes les publications seront renvoyées. Si vous modifiez cette ligne en cela, cela résoudra le problème et votre code fonctionnera probablement:

$cat_id = absint( $_REQUEST['cat'] );

La fonction absint() convertit simplement la valeur fournie par l'utilisateur en un entier positif.

1
J.D.