AJAX фильтрация записей по категориям при клике

24 июл. 2014 г., 17:19:33
Просмотры: 16.5K
Голосов: 4

Это моя первая попытка работы с AJAX, я собирал код из разных руководств, что, вероятно, не помогло.

На главной странице (index.php) у меня есть список категорий и список последних записей. Когда пользователь кликает по категории, я хочу обновлять список записей без перезагрузки страницы. Сейчас при клике на фильтр все записи загружаются в контейнер ответа (они не фильтруются по категории), и загружается только the_content(), хотя мой шаблон (listing-post.php) запрашивает миниатюру, категорию и т.д.

Я использую Bones в качестве стартовой темы, поэтому wp_localize_script находится в этом файле (он работает). Я включил только код, в котором есть проблемы (остальная часть сайта и JS работает нормально).

bones.php

// Добавляем путь AJAX для использования в load-posts.js
$getPath = array('ajaxURL' => admin_url('admin-ajax.php'));
wp_localize_script('main-js', 'pathToFile', $getPath);

functions.php

// AJAX фильтр по категориям
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
Комментарии

Помню, у меня была похожая проблема в прошлом. Это долгий путь, но попробуйте добавить это в functions.php: add_action('template_redirect', 'register_scripts');

gdaniel gdaniel
24 июл. 2014 г. 17:43:24

Боюсь, это не решило проблему. Но спасибо, что попробовали.

GuerillaRadio GuerillaRadio
24 июл. 2014 г. 17:53:13

Прежде чем углубляться в решение, может быть дело в опечатке в add_action( 'wp_ajax_oad_cat_posts', 'load_cat_posts' ); (т.е. wp_ajax_oad должно быть wp_ajax_load)?

John P Bloch John P Bloch
24 июл. 2014 г. 17:55:50

Очень благодарен, Джон! Сейчас редактирую вопрос, так как у меня возникла ещё одна проблема.

GuerillaRadio GuerillaRadio
24 июл. 2014 г. 18:24:36
Все ответы на вопрос 1
0

Эта строка в functions.php является вашей проблемой:

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

Я думаю, вы неправильно понимаете назначение функции get_post_meta(). Она предназначена для получения метаданных записи WordPress, а не данных из POST-запроса к сайту. Первый параметр функции get_post_meta() — это $post_id, но поскольку вы передаёте вместо него ID категории, вы получите либо false, либо массив всех мета-значений, если существует запись с таким же ID, как у категории. В любом из этих случаев значение переменной запроса cat не будет действительным ID категории, поэтому эта часть запроса будет проигнорирована и будут возвращены все записи. Если вы замените эту строку на следующую, это исправит проблему, и ваш код, вероятно, заработает:

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

Функция absint() просто преобразует предоставленное пользователем значение в положительное целое число.

23 янв. 2016 г. 20:30:26