To pass the current post type to your AJAX request, you need to modify your JS to include the post type information in the AJAX request. You can achieve this by adding the post type
as a parameter when calling the filterPosts()
function
JS
import Alpine from 'alpinejs';
Alpine.data("filterPosts", (adminURL, postType) => ({
posts: "",
limit: 10,
category: null,
showDefault: true,
showFiltered: false,
filterPosts(id) {
this.showDefault = false;
this.showFiltered = true;
this.category = id;
this.fetchPosts(postType); // Pass post type to fetchPosts function
},
fetchPosts(postType) { // Add postType parameter
var formData = new FormData();
formData.append("action", "filterPosts");
formData.append("offset", this.offset);
formData.append("limit", this.limit);
formData.append("post_type", postType); // Include post type in form data
if (this.category) {
formData.append("category", this.category);
}
fetch(adminURL, {
method: "POST",
body: formData,
})
.then((res) => res.json())
.then((res) => {
this.posts = res.posts;
});
}
}));
window.Alpine = Alpine;
Alpine.start();
Ajax
// The AJAX function
add_action('wp_ajax_filterPosts', 'filterPosts');
add_action('wp_ajax_nopriv_filterPosts', 'filterPosts');
function filterPosts()
{
$response = [
'posts' => "",
];
$filter_args = array(
'post_status' => 'publish',
'post_type' => isset($_POST['post_type']) ? $_POST['post_type'] : 'post', // Use the post type received from AJAX request
);
if ($_POST['limit']) {
$filter_args['posts_per_page'] = $_POST['limit'];
}
if ($_POST['category']) {
$filter_args['cat'] = $_POST['category'];
}
$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();
}