The default state of the page is to show "all kitchens list of all categories" (/?cat=0) with a category dropdown generated using wp_dropdown_categories() which allows the user to select other categories.
The desired use case is:
The user selects a category from a dropdown list and create a search query in the search box and seeing only kitchens in that category that contain the search term.
the result displays only the title and it displays it in another page
please how can i filter kitchens in the same page
add_image_size('header-image', 1200, 360, true);
add_action('wp_enqueue_scripts', function () {
wp_dequeue_style('bootstrap4');
wp_dequeue_style('bootstrap-basic4-main');
wp_enqueue_style('webfont-roboto', get_stylesheet_directory_uri() . '/webfont/roboto/stylesheet.css');
wp_enqueue_style('nelga-bootstrap', get_stylesheet_directory_uri() . '/assets/css/bootstrap.css');
wp_enqueue_style('font-lato', get_stylesheet_directory_uri() . '/assets/fonts/stylesheet.css');
wp_enqueue_script('nelga-block-map', get_stylesheet_directory_uri() . '/block/interactive-map/map.js');
}, 11);
add_action('wp_enqueue_scripts', function () {
wp_dequeue_style('wpuf-css');
wp_register_style('wpuf-css', WPUF_ASSET_URI . '/css/frontend-forms.css');
});
/*add_filter( 'allowed_block_types_all', function () {
return [
'core/block',
'core/image',
'core/paragraph',
'core/heading',
'core/list',
'core/shortcode',
'nelga/icon-with-text',
'nelga/interactive-map
];
});
*/
add_action('init', function () {
register_block_type(__DIR__ . '/block/icon-with-text');
register_block_type(__DIR__ . '/block/interactive-map');
});
// Scripts for Ajax Filter Search
function my_ajax_filter_search_scripts()
{
wp_localize_script('my_ajax_filter_search', 'ajax_url', admin_url('admin-ajax.php'));
}
// Shortcode: [my_ajax_filter_search]
function my_ajax_filter_search_shortcode(){
my_ajax_filter_search_scripts(); // Added here
ob_start(); ?>
<div id="my-ajax-filter-search" class="filter">
<div class="container p-0">
<form>
<div class="d-inline-flex mb-2 mb-lg-0">
<div class="position-relative first-input">
<svg class="position-absolute" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #3C3C3C;
stroke-width: 2;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #3C3C3C;
stroke-width: 2;
stroke-miterlimit: 9.9999;
}
</style>
<g>
<circle class="st0" cx="21" cy="21" r="20" />
<line class="st0" x1="35" y1="35" x2="41" y2="41" />
<rect x="46.3" y="37.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.9172 50.5006)" class="st1" width="8.5" height="26.9" />
</g>
</svg>
<label class="screen-reader-text" for="s">Search for:</label>
<input value="<?php the_search_query(); ?>" name="s" id="s" class="form-control " placeholder="Diese Kuche such ich ..">
</div>
<?php wp_dropdown_categories( array(
'show_option_all' => 'All Kategorien',
'show_option_none' => '',
'orderby' => 'id',
'order' => 'ASC',
'show_count' => 0,
'hide_empty' => 0,
'child_of' => 0,
'exclude' => '',
'echo' => 1,
'selected' => 0,
'hierarchical' => 0,
'name' => '',
'id' => 'custom-cat-drop',
'class' => 'form-select',
'depth' => 0,
'tab_index' => 0,
'taxonomy' => 'category',
'hide_if_empty' => false,
'option_none_value' => -1,
'value_field' => 'term_id',
'required' => false,
) ); ?>
</div>
<select class="form-select">
<option selected>Ganzer Ort</option>
<option value="action">Ganzer Ort1</option>
<option value="action">Ganzer Ort2</option>
<option value="action"><?php the_field('state'); ?></option>
</select>
</div>
<div class="d-inline-flex mb-2 mb-lg-0 ml-lg-3">
<input type="submit" id="searchsubmit" class="btn" name="submit" value="Jetzt Kuche finden">
</div>
</form>
</div>
<?php
return ob_get_clean();
}
add_shortcode('my_ajax_filter_search', 'my_ajax_filter_search_shortcode');
add_filter('doing_it_wrong_trigger_error', function () {
return false;
}, 10, 0);
This is my custom plugin
<?php
$args = array(
'post_type' => 'kitchen',
$postID = get_the_ID()
);
$the_query = new WP_Query($args);
?>
<div class="container">
<div class="row card-kitchens-title">
<h3>Top Küchen</h3>
</div>
<div class="row card-kitchens">
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post();
$postID = get_the_ID();
?>
<?php if (get_field('featured', $postID)) : ?>
<div class="col-sm-4">
<a class="card" href=" <?php echo get_permalink(); ?>">
<?php
if (has_post_thumbnail()) {
echo the_post_thumbnail();
}
?>
<?php if (get_field('price', $postID)) : ?>
<p class="price1"> <?php echo the_field('price', $postID); ?></p>
<?php endif; ?>
<div class="card-body">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="card-text"> <?php the_field('state', $postID); ?></p>
</div>
</a>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
<div class="container">
<div class="row card-kitchens-title">
<h3>Empfohlene Küchen</h3>
</div>
</div>
<div class="container p-0">
<div class="row second-box">
<?php if ($the_query->have_posts()) : ?>
<?php while ($the_query->have_posts()) : $the_query->the_post();
$postID = get_the_ID();
?>
<div class="col-sm-3 cards pb-4">
<a class="card" href=" <?php echo get_permalink(); ?>">
<?php
if (has_post_thumbnail()) {
echo the_post_thumbnail();
}
?>
<?php if (get_field('price', $postID)) : ?>
<p class="price"> <?php echo the_field('price', $postID); ?></p>
<?php endif; ?>
<div class="card-body">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="card-text"> <?php the_field('state', $postID); ?></p>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
My Answer:
To filter the list of kitchens by category and search term on the same page, you can use AJAX to dynamically update the list based on the user's selection. Here's a basic outline of how you can achieve this:
1. Create a custom JavaScript file to handle the AJAX request and update the kitchen list based on the selected category and search term. Here's an example of how you can structure this file:
javascript
jQuery(document).ready(function($) {
$('#my-ajax-filter-search').on('submit', function(e) {
e.preventDefault();
var category = $('#custom-cat-drop').val();
var search = $('#s').val();
$.ajax({
url: ajax_url,
type: 'POST',
data: {
action: 'filter_kitchens',
category: category,
search: search
},
success: function(response) {
$('.card-kitchens').html(response);
}
});
});
});
2. Create a PHP function to handle the AJAX request and filter the kitchens based on the selected category and search term. Add this function to your theme's functions.php file:
php
add_action('wp_ajax_filter_kitchens', 'filter_kitchens');
add_action('wp_ajax_nopriv_filter_kitchens', 'filter_kitchens');
function filter_kitchens() {
$category = $_POST['category'];
$search = $_POST['search'];
$args = array(
'post_type' => 'kitchen',
'posts_per_page' => -1,
's' => $search,
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => $category
)
)
);
$query = new WP_Query($args);
ob_start();
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
// Display the kitchen item as needed
}
} else {
echo 'No kitchens found.';
}
wp_reset_postdata();
echo ob_get_clean();
wp_die();
}
3. Update your kitchen list display code to use the AJAX-filtered content. You can remove the existing kitchen list display code and replace it with a placeholder div that will be updated by the AJAX request.
4. Add the necessary HTML markup and shortcode to display the search form and kitchen list on the page. Make sure to include the necessary JavaScript and CSS files for the AJAX functionality.
With these steps, you should be able to filter the list of kitchens by category and search term on the same page using AJAX. Make sure to test the functionality thoroughly to ensure it works as expected.
Rate this post
3 of 5 based on 4858 votesComments