Add “load more” functionality to an AJAX response

Question

We have a custom post type named accommodation and it has one taxonomy, named accommodation_city. Its children are 4 terms, simple city names.

What I have done so far, is make 2 queries:

  1. Will show the 4 city names horizontaly
  2. Will show ALL the posts that are included in these 4 terms.
$terms = get_terms('accommodation_city'); ?>
<ul class="cat-list">
  <li><a class="cat-list_item active" href="#!" data-slug="">All cities</a></li>
  <?php foreach($terms as $term) : ?>
    <li>
      <a class="cat-list_item" href="#!" data-slug="<?= $term->slug; ?>">
        <?= $term->name; ?>
      </a>
    </li>
  <?php endforeach; ?>
</ul>

The code abobe will simply show the 1st query.

  $accs = new WP_Query([
    'post_type' => 'accommodation',
    'posts_per_page' => 2,
    'order_by' => 'date',
    'order' => 'desc',
    'tax_query' => array(
      array(
        'taxonomy' => 'accommodation_city',
        'field' => 'slug',
        'operator' => 'EXISTS'
      )
    )
  ]);

  if ($accs->have_posts()): ?>
    <ul class="project-tiles">
      <?php
      while($accs->have_posts()) : $accs->the_post();
        echo get_the_title() . "<br>";
      endwhile;
      ?>
    </ul>
    <?php wp_reset_postdata();
  endif;

The code above will simply show the 2nd query, but limiting the results to 2 posts.

Now we go to the part where we create some Javascript, in order to make our AJAX call.

jQuery('.cat-list_item').on('click', function() {

  jQuery('.cat-list_item').removeClass('active');
  jQuery(this).addClass('active');

  jQuery.ajax({
    type: 'POST',
    url: '/wp-admin/admin-ajax.php',
    dataType: 'html',
    data: {
      action: 'filter_projects',
      category: jQuery(this).data('slug'),
    },
    success: function(res) {
      jQuery('.project-tiles').html(res);
    }
  })
});

Our goal here is to show 4 cities and then everytime we click on one city name, to show it’s posts that are related to that term.

The code to do that is below:

function filter_projects() {
  $catSlug = $_POST['category'];

  if ($catSlug){
    $ajaxposts = new WP_Query([
      'post_type' => 'accommodation',
      'posts_per_page' => 2,
      'orderby' => 'menu_order',
      'order' => 'desc',
      'tax_query' => array(
        array(
          'taxonomy' => 'accommodation_city',
          'field' => 'slug',
          'terms' => $catSlug,
        )
      )
    ]);
  } else {
    $ajaxposts = new WP_Query([
      'post_type' => 'accommodation',
      'posts_per_page' => 2,
      'orderby' => 'menu_order',
      'order' => 'desc',
      'tax_query' => array(
        array(
          'taxonomy' => 'accommodation_city',
          'field' => 'slug',
          'operator' => 'EXISTS'
        )
      )
    ]);
  }

  $response="";

  if($ajaxposts->have_posts()) {
    while($ajaxposts->have_posts()) : $ajaxposts->the_post();
      $response .= get_the_title() . "<br>";
    endwhile;
  } else {
    $response="empty";
  }

  echo $response;
  exit;
}
add_action('wp_ajax_filter_projects', 'filter_projects');
add_action('wp_ajax_nopriv_filter_projects', 'filter_projects');

How can I add “Load more” functionality to the code above? Is it doable? Should I replace my code to REST API in order to do something like that?

0
dominotrix 5 days 2022-11-23T12:06:05-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse