Ecommerce Shopify WordPress Discussion

WordPress Ajax load more post

I have a simple post that I am using alipine.js to help me load post using AJAX. So far it is loading my pages and changing the category if I click a filter button, this is all expected and working. However I have updated my code to show more when click "load more button", this is not showing and giving no error. Can anyone see where I have gone wrong? the problem If i click load more its getting more post but of the same type, not 10 new post. I believe the code is very close to working. its loading my post on click, just the same as already loaded. <html> <head> <script defer src=""></script> <script>"filterPosts", (adminURL) => ({ posts: "", limit: 6, total: null, category: null, 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 += 10; 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) => { =; }); }, init() { this.getTotal(); } })); }) </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 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()" 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> </html> // the ajax function add_action('wp_ajax_filterPosts', 'filterPosts'); add_action('wp_ajax_nopriv_filterPosts', 'filterPosts'); function filterPosts() { $response = [ 'posts' => "", ]; // New args for an All Posts Query $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'] = $_POST['limit']; } 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); // New All Posts Query $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(); } function load_template_part($template_name, $part_name = null, $args = []) { ob_start(); get_template_part($template_name, $part_name, $args); $var = ob_get_contents(); ob_end_clean(); return $var; }
You are not using the 'offset' parameter, add it to $filter_args: $filter_args = array( 'post_status' => 'publish', ); if (isset($_POST['offset'])) { // <<<< THIS $filter_args['offset'] = max (0, (int)$_POST['offset']); } if ($_POST['limit']) { $filter_args['posts_per_page'] = $_POST['limit']; } // ..... I also suggest you add a minimum of validation for the $_POST parameters like I did

February 17, 2024

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.