そのため、投稿にフィルタリング機能を作成して、価格、プロパティタイプなどでフィルタリングできるようにしました。しかし、今では、[さらにロード]ボタンがクリックされてから、さらに8つのプロパティがロードされるまで、8つのプロパティのみが表示されるようにする必要があります。周りを見回したところ、wp_queryでオフセットを使用してから、表示されている投稿の数だけjsでオフセットをインクリメントする必要があることがわかりました。しかし、私の問題は、私はAJAX私の私のデータを定義した方法は、単に（serializeArrayを使用している場合）とチュートリアルに（https://madebydenis.com/ajax-load-posts-on-wordpress/)Iは、彼らが追加されて見てきました以下のようなデータにもっと;
data: {
'cat': cat,
'ppp': ppp,
'offset': offset,
'action': 'mytheme_more_post_ajax'
}
これにserializeArray（）を追加してJSONデータをフェッチする方法はありますか？または私はこれを別の方法で行う必要がありますか？
これが私の完全なphpとjsのコードで、これまでのところフィルターがどのように機能するかを確認できます。
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();
}
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();
}
});
});
});
serializeArrayは、オブジェクトの配列（別名コレクション）を作成します。次のように、新しい要素を配列にプッシュするだけです。
// using $ notation in variable to indicate a jQuery object
var $filter = $('#filters');
// serialize here, so you can add to it before passing in AJAX call...
var filter = $filter.serializeArray();
filter.push({ offset: 2 }); // or whatever offset you need to push on....
// you could add more here if needed....
filter.push( { other_value: 'foo' } );
var root_dir = document.location.origin;
$.ajax({
url: ajax_url,
// send the filter variable here, instead of serializing here...
data: filter,
// .... remainder of your code ....
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加