So I have created filterability on my posts so I can filter them by price, property type ect. But now I have been tasked with also making it so that only eight properties will show until a load more button is clicked then eight more will load. I have looked around and I can see that I need to use offset in the wp_query then increment it in my js by the number of posts shown. But my issues is the way I have defined my data in AJAX I have just used serializeArray() and in the tutorials (https://madebydenis.com/ajax-load-posts-on-wordpress/)I have seen they are adding more to the data like below;
data: {
'cat': cat,
'ppp': ppp,
'offset': offset,
'action': 'mytheme_more_post_ajax'
}
Is there a way I can add serializeArray() to this to fetch my JSON data? or should I go about this another way?
Here's my full php and js code so you can see how I have got my filters to work so far;
functions.php
function custom_js_css(){
wp_enqueue_script('all_js', get_template_directory_uri() . '/js/all.min.js', 'jquery', '1.0', true);
wp_localize_script( 'all_js', 'ajax_url', admin_url('admin-ajax.php') );
}
add_action('wp_enqueue_scripts', 'custom_js_css');
add_action('wp_ajax_forsalefilter', 'for_sale_filter');
add_action('wp_ajax_nopriv_forsalefilter', 'for_sale_filter');
function for_sale_filter(){
$posts = array(
'posts_per_page' => -1,
'post_type' => 'property',
'orderby' => 'date',
'meta_key' => 'property_status',
'meta_value' => 'For Sale',
);
$posts['meta_query'] = array( 'relation' => 'AND' );
// price filtering
if($_GET['min_price'] && !empty($_GET['min_price'])){
$min_price = $_GET['min_price'];
}else{
$min_price = 0;
}
if($_GET['max_price'] && !empty($_GET['max_price'])){
$max_price = $_GET['max_price'];
}else{
$max_price = 10000000;
}
$posts['meta_query'][] = array(
'key' => 'property_price',
'type' => 'NUMERIC',
'value' => array($min_price, $max_price),
'compare' => 'BETWEEN'
);
// bed filtering
if($_GET['min_beds'] && !empty($_GET['min_beds'])){
$min_beds = $_GET['min_beds'];
}else{
$min_beds = '1';
}
if($_GET['max_beds'] && !empty($_GET['max_beds'])){
$max_beds = $_GET['max_beds'];
}else{
$max_beds = '9+';
}
$posts['meta_query'][] = array(
'key' => 'bedrooms',
'value' => array($min_beds, $max_beds),
'compare' => 'BETWEEN'
);
//location filtering
if(isset( $_GET['location'] ) && $_GET['location']){
$location = $_GET['location'];
$location_val = stripslashes($location);
$posts['meta_query'][] = array(
'relation' => 'OR',
array(
'key' => 'street',
'value' => $location_val,
'compare' => 'LIKE'
),
array(
'key' => 'town',
'value' => $location_val,
'compare' => 'LIKE'
),
array(
'key' => 'county',
'value' => $location_val,
'compare' => 'LIKE'
),
array(
'key' => 'postcode',
'value' => $location_val,
'compare' => 'LIKE'
)
);
}
// property type filtering
if(isset( $_GET['type'] ) && $_GET['type']){
$posts['meta_query'][] = array(
'key' => 'type_of_property',
'value' => $_GET['type'],
'compare' => 'IN'
);
}
// secondary flash filtering
if(isset( $_GET['flash_type'] ) && $_GET['flash_type']){
$posts['meta_query'][] = array(
'key' => 'optional_category',
'value' => $_GET['flash_type'],
'compare' => 'IN'
);
}
$query = new WP_Query( $posts );
if( $query->have_posts() ){
$result = array();
while( $query->have_posts() ){
$query->the_post();
$main_field = get_field('images');
$first_row = $main_field[0];
$img = $first_row['image'];
$img_med = $img['sizes']['medium'];
$result[] = array(
"permalink" => get_permalink(),
"image" => $img_med,
"property_type" => get_field('type_of_property'),
"bedrooms" => get_field('bedrooms'),
"street" => get_field('street'),
"town" => get_field('town'),
"price" => get_field('property_price'),
"second_flash" => get_field('optional_category'),
"status" => get_field('property_status')
);
}
echo json_encode($result);
}
wp_die();
}
js
jQuery(function($){
$('#filters').submit(function(e){
e.preventDefault();
var filter = $('#filters');
var root_dir = document.location.origin;
$.ajax({
url: ajax_url,
data: filter.serializeArray(), // form data
dataType: 'json',
beforeSend:function(xhr){
$('#properties').html("\
<div id='property_preloader'>\
<div id='gif'>\
<img src='http://domain.co.uk/wp-content/themes/dist/imgs/preloader.gif' alt='Preloader Icon'>\
</div>\
</div>"
);
},
success:function(response){
$('#response').empty();
$('#properties').html(""+
"<div class='container'>"+
"<div class='row'><div class='col-12'><div id='crumb'></div><div id='flash_crumbs'></div></div></div>"+
"<div class='row' id='response'></div>"+
"</div>");
for(var i = 0; i < response.length; i++){
var status = response[i].status;
var flash_url;
if(response[i].status == "For Sale"){
flash_url = root_dir + '/wp-content/themes/dist/imgs/forsale.svg';
}else if(response[i].status == "Sold"){
flash_url = root_dir + '/wp-content/themes/dist/imgs/sold.svg';
}else{
flash_url = root_dir + '/wp-content/themes/dist/imgs/sstc.svg';
}
var html =""+
"<div class='col-sm-6 col-md-4 col-lg-3 post'>" +
"<div class='shadowwrapper2'>" +
"<a href='" + response[i].permalink + "'>" +
"<div class='propertywrapper'>" +
"<img class='img-fluid gal_imgs' src='" + response[i].image + "' alt='alt'/>" +
"<span class='second_flash'>" + response[i].second_flash + "</span>" +
"</div>" +
"<div class='cornerflash'><img src='" + flash_url + "' alt='corner flash'></div>" +
"<div class='propertyinfo'>" +
"<div class='row m-0'>" +
"<div class='col-6 p-0 mt-2'>" + response[i].property_type + "</div>" +
"<div class='col-6 p-0 mt-2'>" + response[i].bedrooms + " bedrooms</div>" +
"</div>" +
"</div>" +
"<div class='streetpricewrapper'>" +
"<p class='streetname'>" + response[i].street + ", " + response[i].town + "</p>" +
"<p class='price'>£" + response[i].price + "</p>" +
"</div>" +
"</a>" +
"</div>" +
"</div>";
$('#response').append(html);
}
crumb();
},
error: function(XMLHttpRequest, textStatus, errorThrown){
$('#properties').html(""+
"<div class='container'>"+
"<div class='row'><div class='col-12'><div id='crumb'></div><div id='flash_crumbs'></div></div></div>"+
"<div class='row' id='response'></div>"+
"</div>");
var html = "<div class='col-12'><p>Sorry we found no results for your search. Please try widen your search</p></div>";
$('#response').html(html);
crumb();
}
});
});
});
