Ecommerce Shopify WordPress Discussion

ajax load more show and hide if all post loaded – WordPress

I have some alpine.js script and ajax that is loading more wordpress post on click of a button, this is working well. however I am now trying to add some code to the button to hide if no post available to load, im doing this with my button by adding x-show="total > (limit + offset)". my limit is 6 and offset is null and post count is 10 so it should show the button, however its hidden. im thinking it could be my getTotal()is not correctly getting my total setting the button to be hidden. any insight a or help with this is much appreciated, once again if I remove x-show="total > (limit + offset)" my button shows and loads more post, but I am trying to get it to hide or show depending if more post available. Bellow is my Alpine.js, AJAX and html/php wordpress code Im expecting button to hide if no more post are avalible to load. I tried this with the gettotal function and x-show in the alpine.js alpine <script> Alpine.data("filterPosts", (adminURL) => ({ posts: "", limit: 6, total: 0, category: 0, post_type_js: post_id, showDefault: true, showFiltered: false, offset: 0, filterPosts(id) { this.showDefault = false; this.showFiltered = true; this.category = id; this.offset = 0; // <-- reset offset to zero this.fetchPosts(); }, loadMore() { this.loadingMore = true; 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); // <-- Add new data to the form if (this.category) { formData.append("category", this.category); } 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(); } })); }) </script> wordpress php <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 mx-0"> <?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"> <div class="col-md-8 col-lg-9 js-posts-holder"> <!-- Posts Column --> <div x-show.important="showDefault" class="row cards-area js-posts-items"> <!-- Default posts query --> <?php get_template_part( 'template-parts/posts-filter/default-query' ); ?> </div> <!-- Filtered posts --> <div x-show.important="showFiltered" x-html="posts"class="row cards-area js-posts-items"> </div> <!-- Load More Posts --> <!-- Load More Posts --> <div @click="loadMore()" x-show="total > (limit + offset)" class="text-center mt-12 pt-5"> <button class=""> 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> 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 $all_args['cat'] = $_POST['category']; } $filter_query = new WP_Query($filter_args); $all_query = new WP_Query($all_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(); }
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.