0

У меня такой дизайна сайта:

На каждом табе South Florida и т.д. свои посты, у каждого таба есть своя кнопка "Показать еще". Сейчас посты выводятся, кнопка отображется, но при нажатии на нее ничего не происходит. На данный момент из ошибок вижу, что в файле js переменная true_posts при выводе в консоль обрезает данные. Как это исправить и как сделать что б на каждом табе была своя подгрузка?

Вот код функции в файле страницы:

     <div class="page-location-content gallery">
                        <?php foreach( $categories as $key => $category) : ?>

                            <?php $args = array(
                                'posts_per_page' => 1,
                                'post_type' => 'locations',
                                'tax_query' => array(
                                        array(
                                            'taxonomy'  => 'category',
                                            'field'     => 'term_id',
                                            'terms'     => $category -> term_id,
                                        )
                                    )
                            );

                            $query = new WP_Query( $args );

                            // Цикл
                            if ( $query->have_posts() ) : ?>
                            <div class="tabs-content">
                                <div class="row ">
                                    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                                        <div class="col-12">
                                            <div class="page-location-item">
                                                <div class="page-location-item__photo irof mb-3 mb-md-4">
                                                    <?php the_post_thumbnail(); ?>
                                                </div>
                                                <p class="text-h1 text-h1--36 mb-3 mb-md-4 page-location-item__title"><?php the_title(); ?></p>
                                                <?php the_content(); ?>
                                            </div>
                                        </div>
                                        <!-- /.col-12  -->
                                    <?php endwhile; ?>
                                    <?php if (  $query->max_num_pages > 1 ) : ?>
                                        <button type="button"  data-true_posts="<?php echo serialize($query->query_vars); ?>"
                                            data-current_page = "<?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>"
                                            data-max_pages='<?php echo $query->max_num_pages; ?>' class="true_loadmore button mb-30">Show more</button>
                                    <?php endif; ?>
                                </div>
                                <!-- /.row -->
                            </div>
                        <?php endif; ?>
                        <?php wp_reset_query(); ?>
                        <?php endforeach; ?>
                    </div>

Код js файла:

jQuery(function ($) {
    $('.true_loadmore').click(function () {

        var el = $(this);
        var true_posts = el.attr('data-true_posts');
        var current_page = el.attr('data-current_page');
        var max_pages = el.attr('data-max_pages');

        $(this).text('Loading...'); // изменяем текст кнопки, вы также можете добавить прелоадер
        var data = {
            'action': 'loadmoreposts',
            'query': true_posts,
            'page': current_page
        };

        console.log(true_posts);

        $.ajax({
            url: ajaxurl, // обработчик
            data: data, // данные
            type: 'POST', // тип запроса
            success: function (data) {
                console.log(data);
                if (data) {
                    el.text('Show more').before(data); // вставляем новые посты
                    current_page++; // увеличиваем номер страницы на единицу
                    el.attr('data-current_page', current_page);
                    if (current_page == max_pages) el.remove(); // если последняя страница, удаляем кнопку
                } else {
                    el.remove(); // если мы дошли до последней страницы постов, скроем кнопку
                }
            }
        });
    });
});

И код в functions.php:

function main_load_posts(){
    $args = json_decode( stripslashes( $_POST['query'] ), true );
    $args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
    $args['post_status'] = 'publish';
    $args['post_type'] = 'locations';
    $args['posts_per_page'] = 1; // по сколько записей подгружать
    $args['tax_query'] = array( array( 'taxonomy'  => 'category', 'field'     => 'term_id', 'terms'     => $category -> term_id));

    // обычно лучше использовать WP_Query, но не здесь
    query_posts( $args );
    // если посты есть
    if( have_posts() ) :
      echo '
        <div class="tabs-content">
          <div class="row ">
      ';
            // запускаем цикл
            while( have_posts() ): the_post();

              echo '
                <div class="col-12">
                  <div class="page-location-item">
                    <div class="page-location-item__photo irof mb-3 mb-md-4">
                      '. get_the_post_thumbnail() .'
                    </div>
                    <p class="text-h1 text-h1--36 mb-3 mb-md-4 page-location-item__title">'. get_the_title() .'</p>
                    '. get_the_content() .'
                  </div>
                </div>
              ';

            endwhile;
      echo  '</div>
          <!-- /.row -->
        </div>';
    endif;
    die();
  }


  add_action('wp_ajax_loadmoreposts', 'main_load_posts');
  add_action('wp_ajax_nopriv_loadmoreposts', 'main_load_posts');

Скрин данных которые выводятся в console.log(true_posts), насколько я понимаю данные почему-то обрезаются

1 ответ 1

1

Тут сразу несколько ошибок

  1. По кнопке, которая как-будто не отрабатывает - у вас неуникальный айди кнопки получается id="true_loadmore"

Нужно переделать через класс ,например.

  1. Параметры страничника у Вас тоже не уникальны. Они переписывают друг друга

Код

<script>
                    var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
                    var true_posts = '<?php echo serialize($query->query_vars); ?>';
                    var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
                    var max_pages = '<?php echo $query->max_num_pages; ?>';
</script>
<button type="button" id="true_loadmore" class="button mb-30">Show more</button>

заменить на

<button type="button" class="true_loadmore"  data-true_posts="<?php echo serialize($query->query_vars); ?>"  data-current_page = "<?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>" data-max_pages='<?php echo $query->max_num_pages; ?>' class="button mb-30">Show more</button>

Потом

Код

jQuery(function ($) {
  $('#true_loadmore').click(function () {
    $(this).text('Loading...'); // изменяем текст кнопки, вы также можете добавить прелоадер
    var data = {
      'action': 'loadmoreposts',
      'query': true_posts,
      'page': current_page
    };

    $.ajax({
      url: ajaxurl, // обработчик
      data: data, // данные
      type: 'POST', // тип запроса
      success: function (data) {
        console.log(data);
        if (data) {
          $('#true_loadmore').text('Show more').before(data); // вставляем новые посты
          current_page++; // увеличиваем номер страницы на единицу
          if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
        } else {
          $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
        }
      }
    });
  });
});

заменяем


jQuery(function ($) {
  $('.true_loadmore').click(function () {
    
    var el = $(this);
    var true_posts = el.attr('data-true_posts');
    var current_page = el.attr('data-current_page');
    var max_pages = el.attr('data-max_pages');
    
    $(this).text('Loading...'); // изменяем текст кнопки, вы также можете добавить прелоадер
    var data = {
      'action': 'loadmoreposts',
      'query': true_posts,
      'page': current_page
    };

    $.ajax({
      url: '<?php echo admin_url( 'admin-ajax.php' ); ?>', // обработчик
      data: data, // данные
      type: 'POST', // тип запроса
      success: function (data) {
        console.log(data);
        if (data) {
          el.text('Show more').before(data); // вставляем новые посты
          current_page++; // увеличиваем номер страницы на единицу
          el.attr('data-current_page', current_page);
          if (current_page == max_pages) el.remove(); // если последняя страница, удаляем кнопку
        } else {
          el.remove(); // если мы дошли до последней страницы постов, скроем кнопку
        }
      }
    });
  });
});

18
  • к сожалению, в таком варианте кнопка "Show more" перестала работать даже на первой вкладке, просто не нажимается. Ошибок в консоли никаких нет, Если в функции в файле functions.php прописать просто вывод строки, тоже не выводит
    – Alexa
    2 окт 2020 в 8:52
  • 1
    @Alexa вверху страницы поставьте <script>var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';</script>. в js замените url: '<?php echo admin_url( 'admin-ajax.php' ); ?>', на url: ajaxurl, 2 окт 2020 в 9:39
  • 1
    Передаваемое query нигде не используется плюс попробуйте вывести переменную true_posts в консоль, она наверняка будет обрезана.
    – Alexy
    2 окт 2020 в 10:08
  • 1
    @Alexa и поменяйте json_decode( stripslashes( $_POST['query'] ), true ) на unserialize( stripslashes( $_POST['query'] ) )
    – Alexy
    2 окт 2020 в 12:29
  • 1
    @Alexa в $args['tax_query'] откуда $category взялась?
    – Alexy
    2 окт 2020 в 12:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.