admin管理员组文章数量:1125063
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 /
Code
<html>
<head>
<script defer src="/[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=";>
<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>
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
Reset to default 0I 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
本文标签： Hide load more button if no more post in selected category
版权声明：本文标题：Hide load more button if no more post in selected category 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736623469a1945625.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论