Przycisk załaduj więcej postów Ajax nie jest wyświetlany
Mam trochę alpine.js i ajax, które ładują posty WordPress jednym kliknięciem, to działa dobrze.
jednak teraz próbuję dodać kod do przycisku, aby go ukryć, jeśli nie ma postu do załadowania, robię to za pomocą mojego przycisku, dodając x-show="total > (limit + offset)". mój limit wynosi 6, a przesunięcie ma wartość null, a liczba postów wynosi 10, więc powinien pokazywać przycisk, jednak jest ukryty.
myślę, że może być problem getTotal()nie wyświetla poprawnie całkowitego ustawienia przycisku, który ma być ukryty.
lub mój ajax, muszę wywołać sumę.
Każda pomoc w tym zakresie jest bardzo doceniana, jeszcze raz, jeśli ją usunę x-show="total > (limit + offset)" mój przycisk pokazuje i ładuje więcej postów, jednak nie ukrywaj, nie ma już dostępnych postów
Poniżej znajduje się mój kod WordPress Alpine.js, AJAX i html/php
<script>
Alpine.data("filterPosts", (adminURL) => ({
posts: "",
limit: 6,
total: null,
category: null,
post_type_js: post_id,
showDefault: true,
showFiltered: false,
offset: null,
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>
html/wordpressphp
<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
// 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 (isset($_POST['offset'])) {
$filter_args['offset'] = max (0, (int)$_POST['offset']);
}
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;
}
