I have been working on this for hours and can find no solution.
I have a website that uses a custom post type named 'Brands', which has a taxonomy named 'brand-categories'. At my client's request, I created a page where you could filter the brands, by allowing you to search for a brand and/or find all brands by their brand-category. It is done through ajax, so no page reload is necessary.
unfortunately, no matter what I do, I always get an error along the lines of
GET .php?action=my_ajax_filter_search&Brandcats%5B%5D=beauty 500 (Internal Server Error)
when I attempt to search by taxonomy. I've run out of ideas. am I missing something?
This is my php
add_shortcode('WCAlphabeticalBrands', 'WCAlphabeticalFunc_Cleanse');
// Shortcode: [my_ajax_filter_search]
function my_ajax_filter_search_shortcode() {
ob_start();
my_ajax_filter_search_scripts(); // Added here
// list taxonomies
$taxonomies = get_object_taxonomies( 'brand', 'objects' );
foreach( $taxonomies as $taxonomy ){
echo $taxonomy->name;
$terms = get_terms(array(
'taxonomy' => $taxonomy->name,
'hide_empty' => false,
));
echo "<ul>";
foreach( $terms as $term ){
echo "<li><label><input class='brandcatcheckboxes' type='checkbox' name='Brand-category-filter[]' value='{$term->slug}'/>{$term->name}</label></li>";
}
echo "</ul>";
}?>
<div id="my-ajax-filter-search">
<form action="" method="get">
<div class="column-wrap">
<div class="column">
<label for="year">Brand Name</label>
<input type="text" name="title" id="BrandName">
</div>
</div>
<input type="submit" id="submit" name="submit" value="Search">
</form>
<ul id="ajax_filter_search_results"></ul>
</div>
<?php
return ob_get_clean();
}
add_shortcode ('my_ajax_filter_search', 'my_ajax_filter_search_shortcode');
function my_ajax_filter_search_scripts() {
wp_enqueue_script( 'my_ajax_filter_search', plugin_dir_url( __FILE__ ). '/js/ajax.js', array(), '1.0', true );
wp_localize_script( 'my_ajax_filter_search', 'ajax_url', admin_url('admin-ajax.php') );
}
add_action('wp_ajax_my_ajax_filter_search', 'my_ajax_filter_search_callback');
add_action('wp_ajax_nopriv_my_ajax_filter_search', 'my_ajax_filter_search_callback');
function my_ajax_filter_search_callback() {
header("Content-Type: application/json");
/*
$tax_query = array();
if(isset($_POST['Brand-category-filter'])) {
$BCat = $_POST['Brand-category-filter'];
$tax_query[] = array(
'taxonomy' => 'brand-category',
'field' => 'term_taxonomy_id',
'terms' => $BCat
);
}
*/
$args = array(
'post_type' => 'brand',
'posts_per_page' => -1,
);
if(isset($_GET['title'])) {
$search = sanitize_text_field( $_GET['title'] );
$BCat = sanitize_text_field($_GET['Brand-category-filter']);
$search_query = new WP_Query( array(
'post_type' => 'brand',
'posts_per_page' => -1,
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'brand-categories',
'terms' => $BCat[0],
'field' => 'slug'
)
),'s' => $search
));
}
else {
$search_query = $args;
}
if ( $search_query->have_posts() ) {
$result = array();
while ( $search_query->have_posts() ) {
$search_query->the_post();
$result[] = array(
"id" => get_the_ID(),
"title" => get_the_title(),
"content" => get_the_content(),
"taxonomies" => get_the_terms(get_the_ID(), 'brand-categories'),
"permalink" => get_permalink(),
);
}
wp_reset_query();
echo json_encode($result);
} else {
// no posts found
}
wp_die();
}
And this is my javascript:
jQuery( document ).ready(function() {
var mafs = jQuery("#my-ajax-filter-search");
var mafsForm = mafs.find("form");
var Brandcats = [];
mafsForm.submit(function(e){
e.preventDefault();
//console.log("form submitted");
//console.log(mafsForm.find("#title").val());
/*if(mafsForm.find("#year").val().length !== 0) {
var BrandName = mafsForm.find("#year").val();
}*/
jQuery('.brandcatcheckboxes:checkbox:checked').each(function() {
Brandcats.push($(this).val());
});
console.log(Brandcats);
if(mafsForm.find("#BrandName").val().length !== 0) {
var BrandName = mafsForm.find("#BrandName").val();
}
var data = {
action : "my_ajax_filter_search",
title : BrandName,
Brandcats : Brandcats,
}
$.ajax({
url : ajax_url,
data : data,
success : function(response) {
console.log(response);
mafs.find("ul").empty();
if(response) {
for(var i = 0 ; i < response.length ; i++) {
//var html = "<div>Result found</div>";
var html = "<div>" + response[i].title + "</div>";
mafs.find("ul").append(html);
}
} else {
var html = "<li class='no-result'>No matching brands found. Try a different filter or search keyword</li>";
mafs.find("ul").append(html);
}
}
});
});
});
I have been working on this for hours and can find no solution.
I have a website that uses a custom post type named 'Brands', which has a taxonomy named 'brand-categories'. At my client's request, I created a page where you could filter the brands, by allowing you to search for a brand and/or find all brands by their brand-category. It is done through ajax, so no page reload is necessary.
unfortunately, no matter what I do, I always get an error along the lines of
GET https://darkm.co/womenschapter/wp-admin/admin-ajax.php?action=my_ajax_filter_search&Brandcats%5B%5D=beauty 500 (Internal Server Error)
when I attempt to search by taxonomy. I've run out of ideas. am I missing something?
This is my php
add_shortcode('WCAlphabeticalBrands', 'WCAlphabeticalFunc_Cleanse');
// Shortcode: [my_ajax_filter_search]
function my_ajax_filter_search_shortcode() {
ob_start();
my_ajax_filter_search_scripts(); // Added here
// list taxonomies
$taxonomies = get_object_taxonomies( 'brand', 'objects' );
foreach( $taxonomies as $taxonomy ){
echo $taxonomy->name;
$terms = get_terms(array(
'taxonomy' => $taxonomy->name,
'hide_empty' => false,
));
echo "<ul>";
foreach( $terms as $term ){
echo "<li><label><input class='brandcatcheckboxes' type='checkbox' name='Brand-category-filter[]' value='{$term->slug}'/>{$term->name}</label></li>";
}
echo "</ul>";
}?>
<div id="my-ajax-filter-search">
<form action="" method="get">
<div class="column-wrap">
<div class="column">
<label for="year">Brand Name</label>
<input type="text" name="title" id="BrandName">
</div>
</div>
<input type="submit" id="submit" name="submit" value="Search">
</form>
<ul id="ajax_filter_search_results"></ul>
</div>
<?php
return ob_get_clean();
}
add_shortcode ('my_ajax_filter_search', 'my_ajax_filter_search_shortcode');
function my_ajax_filter_search_scripts() {
wp_enqueue_script( 'my_ajax_filter_search', plugin_dir_url( __FILE__ ). '/js/ajax.js', array(), '1.0', true );
wp_localize_script( 'my_ajax_filter_search', 'ajax_url', admin_url('admin-ajax.php') );
}
add_action('wp_ajax_my_ajax_filter_search', 'my_ajax_filter_search_callback');
add_action('wp_ajax_nopriv_my_ajax_filter_search', 'my_ajax_filter_search_callback');
function my_ajax_filter_search_callback() {
header("Content-Type: application/json");
/*
$tax_query = array();
if(isset($_POST['Brand-category-filter'])) {
$BCat = $_POST['Brand-category-filter'];
$tax_query[] = array(
'taxonomy' => 'brand-category',
'field' => 'term_taxonomy_id',
'terms' => $BCat
);
}
*/
$args = array(
'post_type' => 'brand',
'posts_per_page' => -1,
);
if(isset($_GET['title'])) {
$search = sanitize_text_field( $_GET['title'] );
$BCat = sanitize_text_field($_GET['Brand-category-filter']);
$search_query = new WP_Query( array(
'post_type' => 'brand',
'posts_per_page' => -1,
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'brand-categories',
'terms' => $BCat[0],
'field' => 'slug'
)
),'s' => $search
));
}
else {
$search_query = $args;
}
if ( $search_query->have_posts() ) {
$result = array();
while ( $search_query->have_posts() ) {
$search_query->the_post();
$result[] = array(
"id" => get_the_ID(),
"title" => get_the_title(),
"content" => get_the_content(),
"taxonomies" => get_the_terms(get_the_ID(), 'brand-categories'),
"permalink" => get_permalink(),
);
}
wp_reset_query();
echo json_encode($result);
} else {
// no posts found
}
wp_die();
}
And this is my javascript:
jQuery( document ).ready(function() {
var mafs = jQuery("#my-ajax-filter-search");
var mafsForm = mafs.find("form");
var Brandcats = [];
mafsForm.submit(function(e){
e.preventDefault();
//console.log("form submitted");
//console.log(mafsForm.find("#title").val());
/*if(mafsForm.find("#year").val().length !== 0) {
var BrandName = mafsForm.find("#year").val();
}*/
jQuery('.brandcatcheckboxes:checkbox:checked').each(function() {
Brandcats.push($(this).val());
});
console.log(Brandcats);
if(mafsForm.find("#BrandName").val().length !== 0) {
var BrandName = mafsForm.find("#BrandName").val();
}
var data = {
action : "my_ajax_filter_search",
title : BrandName,
Brandcats : Brandcats,
}
$.ajax({
url : ajax_url,
data : data,
success : function(response) {
console.log(response);
mafs.find("ul").empty();
if(response) {
for(var i = 0 ; i < response.length ; i++) {
//var html = "<div>Result found</div>";
var html = "<div>" + response[i].title + "</div>";
mafs.find("ul").append(html);
}
} else {
var html = "<li class='no-result'>No matching brands found. Try a different filter or search keyword</li>";
mafs.find("ul").append(html);
}
}
});
});
});
1 Answer
Reset to default 0No any mistake in you code only just remove one line from you code.
Please remove first line from your code :
add_shortcode('WCAlphabeticalBrands', 'WCAlphabeticalFunc_Cleanse');