0

I have built a ajax post loading program in wordpress where i load post depending on category and current post type.

ive got it all working except hiding the load more button if no more post.

ive been at this for weeks and can not figure it out, can some one help me finish this project.

All i need is for the total post to be dynamic so i can hide the Load more if no more to load.

Thank you

I was flowing https://joeyfarruggio.com/wordpress/skeleton-loader/

Code

<html>
<head>
   <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
     <script>
document.addEventListener('alpine:init', () => {
    
        attrs = $( 'body' ).attr( 'class' ).split( ' ' );
        jQuery( attrs ).each(function() {

            if ( 'post-type-' === this.substr( 0, 10 ) ) {
                postType = this.split( 'post-type-' );
                postType = postType[ postType.length - 1 ];
                return;
            }
        });
        
        postType = postType.replace('archive-', '');
    
    var post_id = postType;
    

Alpine.data("filterPosts", (adminURL) => ({
    posts: "",
    limit: 6,
    category: null,
    post_type_js: post_id,
    showDefault: true,
    showFiltered: false,
    offset: 0,
    total:0,
    
    filterPosts(id) {
        this.showDefault = false;
        this.showFiltered = true;
        this.category = id;
        this.offset = 0; // <-- reset offset to zero
        this.total = 0;
        this.fetchPosts();
    },
    
    loadMore() {
        this.loadingMore = true;
        this.total = 0;
        this.offset += 6;
        this.showFiltered = true;
        this.fetchPosts(true);
    },

    fetchPosts(append = false) {
        var formData = new FormData();
        formData.append("action", "filterPosts");
        formData.append("limit", this.limit);
        formData.append("post_type_js", this.post_type_js);
        formData.append("offset", this.offset); 

        if (this.category) {
            formData.append("category", this.category);
            formData.append("total", this.total);
        }

    fetch(adminURL, {
        method: "POST",
        body: formData,
    })
    .then((res) => res.json())
    .then((res) => {
            if (append) {
                // Appends posts to the end of existing posts data
                this.posts = this.posts.concat(res.posts);
            } else {
                // Resets the posts data with new data
                this.posts = res.posts;
            }

            this.loading = false;
        });
    },
    
    getTotal() {
    var formData = new FormData();
    formData.append("action", "filterPosts");

    fetch(adminURL, {
        method: "POST",
        body: formData,
    })
    .then((res) => res.json())
    .then((res) => {
        this.total = res.total;
    });
},

init() {
    this.getTotal();
}

}));
})




let activeElement = document.querySelector('.active');
let numberOfPosts = activeElement ? activeElement.textContent.replace(/[^0-9]/g, '') : 0;
        
  console.log("post count is", numberOfPosts );
     </script>
     

     
   
</head>
<body>
    <div x-data="filterPosts('<?php echo admin_url('admin-ajax.php'); ?>')">
<section <?php theme_section_attr_id() ?> <?php theme_section_attr_class('main-section js-posts') ?>>
  <div class="container">
    <div class="heading text-md-center">
      <?php $before_title = get_sub_field('before_title');
      if ($before_title) : ?>
        <strong class="sub-title"><?php echo $before_title ?></strong>
        
      
      <?php endif ?>
      <?php $title = get_sub_field('title');
      if ($title) : ?>
        <h2><?php echo $title ?> </h2>
      <?php endif ?>
    </div>

      <div class="head js-posts-search-text">
        <?php if ($search_value) : ?>
          <h2 class="h5 fw-semibold"><?php printf(__('Showing results for “%s”', 'base'), $search_value) ?></h2>
        
        <?php endif ?>
      </div>
      
<!--alipne js dynamic post start-->
    <div class="has-filter row flex-md-row-reverse">
          <!-- Posts Column -->
        <div class="col-md-8 col-lg-9 js-posts-holder">
            
            
           <!-- Default posts query -->
            <div x-show.important="showDefault" class="row cards-area js-posts-items pb-4">
                <?php get_template_part( 'template-parts/posts-filter/default-query' ); ?>
            </div>
                <!-- Filtered posts -->
            <div x-show.important="showFiltered" class="row cards-area js-posts-items" x-html="posts">
                 
            </div>
            <!-- Load More Posts -->
            
              <!-- Load More Posts -->
            <div @click="loadMore()" x-show="total > (limit + offset)" class="text-center pt-4">
                 <button class="border border-solid border-slate-700 text-slate-100 hover:bg-slate-800 px-4 py-2"> Load More </button>
            </div>
         </div>
            
        <!-- Filtered posts -->
        <div class="col-md-4 col-lg-3">
             <?php get_template_part( 'template-parts/posts-filter/filter-query' ); ?>
        <!-- Filtered end -->
         </div>   
    </div>
    </div>
<!--alipne js dynamic post end-->

</section>
</div>
</body>
</html>

Ajax

    <?php // the ajax function
add_action('wp_ajax_filterPosts', 'filterPosts');
add_action('wp_ajax_nopriv_filterPosts', 'filterPosts');

function filterPosts()
{
    $response = [
        'posts' => "",
    ];
    
    $all_args = array(
        'posts_per_page' => -1, // returns all posts
        'post_status' => 'publish',
    );
    
    $filter_args = array(
        'post_status' => 'publish',
    );
    
     if ($_POST['limit']) {
        $filter_args['posts_per_page'] = max (0, (int) $_POST['limit']);
    }
    
    if (isset($_POST['offset'])) {                      
        $filter_args['offset'] = max (0, (int)$_POST['offset']);
    }

     if ($_POST['post_type_js']) {
        $filter_args['post_type'] = $_POST['post_type_js'];
    }

    if ($_POST['category']) {
        $filter_args['cat'] = $_POST['category'];
        
        // Get the total number of posts for the category
        $filter_args['paged'] = $_POST['total'];
       
    }

    $filter_query = new WP_Query($filter_args);

    if ($filter_query->have_posts()) :
        while ($filter_query->have_posts()) : $filter_query->the_post();
            $response['posts'] .= load_template_part('/template-parts/posts-filter/single-post');
        endwhile;
        wp_reset_postdata();
    endif;

    echo json_encode($response);
    die();
}

Sidebar for category selection

 <style>
      a.child {
              margin-left: 10px;
      }
      
      ul.filter-list a.active {
        font-weight: 700;
        border-bottom: none;
}


ul.filter-list a:hover {
  
    border-bottom: 3px solid #4ef4cb !important;
}


  </style>
  <script>
      
        attrs = $( 'body' ).attr( 'class' ).split( ' ' );
        jQuery( attrs ).each(function() {

            if ( 'post-type-' === this.substr( 0, 10 ) ) {
                postType = this.split( 'post-type-' );
                postType = postType[ postType.length - 1 ];
                return;
            }

        });
        
        postType = postType.replace('archive-', '');
        
    var post_id = postType;


  </script>
  <aside class="sidebar">
                 <div class="widget widget-filter">
                     <button class="widget-title">Explore Topics</button>
                     <svg class="separator" viewBox="0 0 238 11" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
                <line opacity="0.3" y1="0.5" x2="101.942" y2="0.5" stroke="#3CD5AF"></line>
                <line opacity="0.3" y1="10.5" x2="237.5" y2="10.5" stroke="#3CD5AF"></line>
              </svg>
<?php


$string = basename($wp->request); ;
$string = str_replace('-', '_', $string);

$new_string = $string;
// echo $new_string;

 $args = array(
                    'post_type'      => $new_string,
                    'post_status'    => 'publish',
                );

    $the_query = new WP_Query( $args );
    $my_categories = array();
    if ( $the_query->have_posts() ) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();
               $postType = get_queried_object();

            $terms = get_the_terms( get_the_ID(), 'category' );
            if ( $terms && ! is_wp_error( $terms ) ) : 
                foreach ( $terms as $term ) {
                if(!in_array($term->term_id, $my_categories))
                    $my_categories[] = $term->term_id;
                }   
            endif;  
        }
        wp_reset_postdata();
    }

    if(sizeof($my_categories)) { ?>

     <ul class="filter-list">
             <li :class="category == 0 ? 'parent' : ''" ;>
      <a class="" @click="filterPosts">Show All</a>
      
      <?php
 


$args = array(
  'cat' => $category_id,
  'post_type' => $new_string,
);

 
?>
      </li>
      
  
         <?php foreach ($my_categories as $term_id) {
            $category = get_term_by('id', $term_id, 'category');
        
            if($category->slug!="all-articles") {
                if($category->parent != 0){ // If this is a subcategory

$args = array(
    'numberposts' => -1,
    'category' => $category->term_id,
    'post_type' => $new_string,
);
$count_posts = get_posts( $args );
$total_posts_child = count($count_posts);


  ?>
          <li :class="category == <?php echo $category->term_id; ?> ? 'child' : ''" ;>
                     <a class="child" @click="filterPosts(<?= $category->term_id; ?>)"><?= esc_html( $category->name ); echo " ". "(" .$total_posts_child . ")"; ?></a>
                </li> <?php
    
    } else {
   
                
                $args = array(
    'numberposts' => -1,
    'category' => $category->term_id,
    'post_type' => $new_string,
);
$count_posts = get_posts( $args );
$total_posts_parent = count($count_posts);

 ?>
      <li :class="category == <?php echo $category->term_id; ?> ? 'parent' : ''" ;>
                     <a class="parent" @click="filterPosts(<?= $category->term_id; ?>)"><?= esc_html( $category->name); echo " ". "(" .$total_posts_parent . ")" ?></a>
                </li>   <?php
    }
          
            }
        }
    }
    ?>
    </ul>
 
    </div>
    </aside>

1 Answer 1

0

I believe you should pass one more label "How many posts remain to be seen" in your $response array in function filterPosts()

You know the total number of posts based WP_Query that exist in the database

$filter_query = new WP_Query($filter_args);
$total_query_posts = $filter_query->found_posts;

So, then you have to calculate it based on paged and posts_per_page, pass the remain number posts in the other variable and then make an if condition in your js to hide the button

This is a quick thought

3
  • hmm, ill look into this and try, not sure i fully understand
    – Beep
    Mar 8 at 12:03
  • in filterPosts()calclualte $posts_already_shown = (int) $_POST['limit'] * (int) $_POST['total']; based on $filter_args 'posts_per_page' & 'paged'. So $posts_remain = $total_query_posts - $posts_already_shown. Then $response['remain'] = $posts_remain before echo json_encode($response); and then you should make if condition in your js remain == 0 hide load button
    – Sak
    Mar 8 at 12:14
  • thanks @sak, ill try this and update my question to see if i understand your solution
    – Beep
    Mar 8 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.