Много букв, сложно - так и отметил, не надо просто так "чтобы было" вставлять 5 копеек советуя плагины, пожалуйста, а за реальную помощь буду очень благодарен, хочу разобраться, но без помощи никак, уже несколько дней гуглю и пытаюсь.
Есть фильтр товаров и loadmore, два больших сложных запроса, которые по отдельности работают. Нужно чтобы бесконечная подгрузка постов работала и после того, как фильтр отфильтровал. Скрипт для подгрузки - от Миши Рудрастых, а фильтр другой, не с его сайта.
jQuery(function($){
var canBeLoaded = true, // this param allows to initiate the AJAX call only if necessary
bottomOffset = 2000; // the distance (in px) from the page bottom when you want to load more posts
$(window).scroll(function nextAjax(){
var data = {
'action': 'loadmore',
'query': misha_loadmore_params.posts,
'page' : misha_loadmore_params.current_page
};
if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && canBeLoaded == true ){
$.ajax({
url : misha_loadmore_params.ajaxurl,
data:data,
type:'GET',
beforeSend: function( xhr ){
canBeLoaded = false;
},
success:function(data){
if( data ) {
$('body.post-type-archive-product .non-filter div.products').find('.product.col-lg-3.col-6:last-of-type').after( data );
canBeLoaded = true; // the ajax is completed, now we can run it again
misha_loadmore_params.current_page++;
}
}
});
}
});
});
Фильтр я сокращу, потому что разные переменные для фильтрации meta query, tax query не нужны все сразу. И так большой
jQuery(function($)
{
$('.side-nav input').on('change',function(e){
jQuery(this).closest('div, li').toggleClass('attr-selected');
e.preventDefault();
muvre_get_posts();
jQuery('html, body').animate({scrollTop:0}, 1);
});
function getColor()
{
var cats = []; //Setup empty array
$(".muvre_filter_pa_color_check input:checked").each(function() {
var val = $(this).val();
cats.push(val); //Push value onto array
});
return cats; //Return all of the selected genres in an array
}
function muvre_get_posts(paged){
var paged_value = paged;
var ajax_url = woocommerce_params.ajax_url;
jQuery.ajax({
type: 'GET',
url: ajax_url,
data: {
action: 'muvre_filter',
url : ajax_url,
pa_color: getColor,
paged: paged_value,
},
beforeSend: function ()
{ jQuery('.main-products-wrapper').html('<div class="text-center search-filter" style="height:50vh;">Search...</div>');
},
success: function(data)
{ jQuery('.main-products-wrapper').html(data);
jQuery('aside#secondary').removeClass('opened');
},
error: function()
{
jQuery(".main-products-wrapper").html('<div class="text-center" style="height:50vh;">Error</div>');
}
})
}
}
Вот сам цикл для товара похож, но отличается именно параметр paged. Там +1, там нет.
function muvre_show_products(){
$query_data = $_GET;
$paged = $_GET['page'];
$pages = $wp_query->max_num_pages;
$orderby = 'date';
$orderby = $query_data['order'];
$posts_per_page = get_option('woocommerce_catalog_columns') * get_option('woocommerce_catalog_rows');
$pa_color = ($query_data['pa_color']) ? explode(',',$query_data['pa_color']) : false;
$tax_query_pa_color = ($pa_color) ? array( array(
'taxonomy' => 'pa_color',
'field' => 'id',
'terms' => $pa_color
) ) : false;
$args = array(
'post_type' => ['product'],
'paged' => $paged,
'posts_per_page' => $posts_per_page,
'tax_query' => array(
'relation' => 'AND',
$tax_query_pa_color,
),
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
woocommerce_product_loop_start();
while ( $loop->have_posts() ) : $loop->the_post();
wc_get_template_part( 'content', 'product' );
endwhile; }
wp_reset_postdata();
die();
}
add_action('wp_ajax_muvre_filter', 'muvre_show_products');
add_action('wp_ajax_nopriv_muvre_filter', 'muvre_show_products');
Мне как раз и надо как-то при скролле дать знать, что "теперь я покрутил - подгружай страницу+1 от той, что сейчас".
function misha_loadmore_ajax_handler(){
global $woocommerce;
$pages = $wp_query->max_num_pages;
$posts_per_page = get_option('woocommerce_catalog_columns') * get_option('woocommerce_catalog_rows');
$args = array(
'post_type' => 'product',
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'ASC',
'posts_per_page' => $posts_per_page,
'paged' => $_GET['page'] + 1,
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
wc_get_template_part('content', 'product');
}
}
wp_reset_postdata();
die();
}
add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler');
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler');
Я пробовал вставить в success фильтра прямо весь скрипт loadmore, прямо с misha_loadmore_params. Пробовал console.log(data), и понял, что при прокрутке после фильтрации не ловится параметр 'query': misha_loadmore_params.posts. В loadmore он задается в localize script
wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );
wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php',
'posts' => json_encode( $wp_query->query_vars ),
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
'max_page' => $wp_query->max_num_pages
) );
wp_enqueue_script( 'my_loadmore' );
У фильтра такого нету, там где я его нашел. Я давно им пользуюсь, не хотелось бы другой, уже столько сделал в нем под себя, хочу еще сильнее идеализировать. Там просто
wp_enqueue_script( 'filter', get_template_directory_uri() . '/assets/js/filter.js', null, ['jquery'], true);
Как правильнее сделать? Как-то надо дать знать, что при прокрутке уже после фильтрации надо добавить html data после отфильтрованного списка товаров. Или тут надо тоже сделать localize script, как-то(
как???- я пробовал скопипастить с заменой имени, не прокатило ) задать ему параметр query, и вызывать уже не woocommerce_parems, a например filter_params?
Помогите пожалуйста разобраться, очень хочу продвинуться в знаниях.
Сложный
