it-swarm.com.de

AJAX Beiträge filtern nach Klick basierend auf Kategorie

Dies ist mein erster Versuch in AJAX. Ich habe Code-Teile aus verschiedenen Tutorials zusammengefügt, was wahrscheinlich nicht geholfen hat.

Ich habe eine Liste der Kategorien auf meiner Homepage (index.php) und eine Liste der neuesten Beiträge. Wenn ein Benutzer auf eine Kategorie klickt, möchte ich, dass diese Liste der Beiträge aktualisiert wird, ohne die Seite zu aktualisieren. Wenn ich derzeit auf einen Filter klicke, werden alle Beiträge in meinen Antwortcontainer geladen (es wird nicht nach Kategorie gefiltert) und der einzige Inhalt, der geladen wird, ist the_content (), obwohl meine Vorlage (listing-post.php) nach dem Vorschaubild fragt , die Kategorie usw.

Ich benutze Bones als Starter-Theme, daher ist wp_localize_script in dieser Datei (es funktioniert). Ich habe nur Code eingefügt, von dem ich weiß, dass er Probleme hat (ich weiß, dass der Rest der Site und JS gut funktionieren).

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));
        }
4
GuerillaRadio

Diese Zeile in functions.php ist Ihr Problem:

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

Ich denke, Sie verstehen den Zweck der Funktion get_post_meta() falsch. Es wurde entwickelt, um Metadaten für einen WordPress-Beitrag abzurufen, keine Daten aus einer POST-Anfrage an die Site. Der erste Parameter der Funktion get_post_meta() ist der $post_id, aber da Sie stattdessen die Kategorie-ID übergeben, erhalten Sie entweder false oder ein Array aller Meta-Werte, wenn ein Beitrag mit derselben ID wie diese Kategorie-ID vorhanden ist. In beiden Fällen ist der Wert der cat query var keine gültige Kategorie-ID, sodass ein Teil der Abfrage ignoriert und alle Posts zurückgegeben werden. Wenn Sie diese Zeile in diese ändern, wird das Problem behoben und Ihr Code wird wahrscheinlich funktionieren:

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

Die Funktion absint() konvertiert nur den vom Benutzer angegebenen Wert in eine positive Ganzzahl.

1
J.D.