Woocommerce. Витрина с ajax подгрузкой категорий и товаров

Question

Доброго времени суток!

Буду благодарен за помощь или подсказку верного направления. Используется крайний WP и Woo, тема Storefront. Задача следующая: на странице витрины (любая страница) нужно вывести все товары, которые разбиты на категории. Т.е. Категория столы: стол 1, стол 2, стол 3..., ниже Категория стулья: стул 1, стул 2,... и т.д. В связи с тем, что товаров много, сайт грузится по 10-15 сек на ПК и до 1 мин на телефонах. Просьба не писать, что это глупо, не круто и пр. Есть задача, она такая, я понимаю, что это не идеал, тем не менее такие магазины есть и грузятся достаточно быстро. Хочу реализовать следующее, или-или а) загрузка витрины с 4 товарами в каждой категории, после первого скролла ajax грузит следующие 4-8-12 шт в каждой категории б) загрузить первую категорию полностью, а последующие подгружаются после скролла.

Пробовал разные варианты. В итоге обычный ajax запрос, который работает с постами, не работает с товарами.

Так вывожу все товары по категориям:

<?php 
$args_tax = array(
   'taxonomy'     => 'product_cat',
   'hierarchical' => 0,
   'hide_empty'   => 1,
 );
 $all_categories = get_categories( $args_tax );
 foreach ($all_categories as $cat) {
   echo '<h2>' . $cat->name . '</h2>';
   $args_prod = array(
        'post_type'      => 'product',
        'posts_per_page' => -1,
        'product_cat' => $cat -> slug,
        'order' => 'ASC',
   );
   $loop = new WP_Query( $args_prod );
   woocommerce_product_loop_start();
   while ( $loop->have_posts() ) : $loop->the_post();
       wc_get_template_part( 'content', 'product' );
   endwhile;
 wp_reset_query(); ?>

Если я правильно понимаю, то в случае (а) (загрузка 4 товаров в каждой категории, а потом подгрузка после скролла), мне нужно указать в args_prod - posts_per_page=4 и подключить ajax. Но проблема в том, что $loop->max_num_pages всегда равен 1 (даже если товаров 30, а posts_per_page=4), в скрипте

<script>
var ajaxurl = "<?php echo site_url() ?>/wp-admin/admin-ajax.php";
var products_query = "<?php serialize($loop->query_vars) ?>";</script>

получаю ошибку "SyntaxError: Unexpected identifier". И дальше ajax не работает, т.к. изначальный query не правильный. Буду благодарен за подсказку, как правильно написать в данном случае?

В варианте (б) (загрузить первую категорию, а после скролла остальные), в args_tax добавлял number=1, а в запросах offset=1, но тоже не совсем понимаю как правильно написать запрос к БД.

У кого какие мысли, как можно заставить работать? Заранее спасибо!

Update.

В шаблон страницы добавляем кнопку <div id="loadmore"Загрузить ещё</div>

В скрипты обработчик:

jQuery(function($){
    $('#loadmore').click(function(){
        $(this).text('Загружаются...');
        var data = {
            'action': 'loadmore',
            'query': products_query,
        };
        $.ajax({
            url:ajaxurl,
            data:data,
            type:'POST',
            success:function(data){
                if( data ) { 
                    let btn = '#loadmore';
                    let wrapper = '#showcase';
                    $(btn).text('Показать ещё');
                    $(wrapper).append(data);
                }
                    
            }
        });
    });
});

В function.php

function loadmore_posts(){

$args = unserialize( stripslashes( $_POST['query'] ) );

query_posts( $args );

if( have_posts() ) :

  woocommerce_product_loop_start();

    while( have_posts() ): the_post();

       wc_get_template_part( 'content', 'product' );

    endwhile;

  woocommerce_product_loop_end(); 

wp_reset_postdata();

endif;
die();
}

add_action('wp_ajax_loadmore', 'loadmore_posts');
add_action('wp_ajax_nopriv_loadmore', 'loadmore_posts');

БЛОГ НА HUSL

Woocommerce. Витрина с ajax подгрузкой категорий и товаров

Ответы (0 шт):