Cannot read properties of null (reading 'firstChild') - фильтр для категорий WP

Пытаюсь реализовать фильтр по категориям для интернет магазина на Wordpress, в котором при нажатии на кнопку должны выводиться товары по категориям. Собственно, сами кнопки работают, однако в коде происходит затык с данной ошибкой: Cannot read properties of null (reading 'firstChild')

Вот сам js:

;(function() {
  var catalogSection = document.querySelector('.section-catalog');

    if (catalogSection === null) {
        return;
    }
    
    var removeChildren = function(item) {
        while (item.firstChild) {
            item.removeChild(item.firstChild);
        }
    };

    var updateChildren = function(item, children) {
        console.log(children);
        removeChildren(item);
        for (var i = 0; i < children.length; i += 1) {
            item.appendChild(children[i]);
        }

    };
    
    
    var catalog = catalogSection.querySelector('.catalog');
    var catalogNav = catalogSection.querySelector('.catalog-nav');
    var catalogItems = catalogSection.querySelectorAll('.catalog__item');
    
    catalogNav.addEventListener('click', function (e) {
        var target = e.target;
        var item = myLib.closestItemByClass(target, 'catalog-nav__btn');
    
        
        if (item === null || item.classList.contains('is-active')){
            return;
        }
        
        e.preventDefault();
        var filterValue = item.getAttribute('data-filter');
        var previousBtnActive = catalogNav.querySelector('.catalog-nav__btn.is-active');
        console.log(filterValue);
        console.log(previousBtnActive);
        
        previousBtnActive.classList.remove('is-active'); /* убираем активный класс у прошлой кнопки*/
        item.classList.add('is-active'); /* делаем активной текущую кнопку */
        
        if (filterValue === 'all') {
            updateChildren(catalog, catalogItems);
            return;
        }
        
        var filteredItems = [];
        for (var i = 0; i < catalogItems.lenght; i +=1){
            var current = catalogItems[i];
            if (current.getAttribute('data-category') === filterValue) {
                filteredItems.push(current);
            }
        }
        
        updateChildren(catalog, filteredItems);
    });
})();

При выводе в консоль console.log(children) выдает пустой массив для всех фильтров, кроме изначального all

Также код вывода категорий и товаров, если нужно:

<!-- Выбор жанра начало -->
<nav class="catalog-nav">
                    
<?php
    $catalog_category = carbon_get_post_meta($page_id, 'catalog_nav'); 
    $catalog_category_id = wp_list_pluck ($catalog_category, 'id');

    $catalog_category_items = get_terms([
        'include' => $catalog_category_id,
    ]);
?>
                    
<button class="catalog-nav__btn is-active" type="button" data-filter="all">Все</button>
<?php foreach($catalog_category_items as $item) : ?>
    <button class="catalog-nav__btn" type="button" data-filter="<?php echo $item->slug; ?>"> <?php echo $item->name; ?> </button>
<?php endforeach; ?>
                    
</nav> 
<!-- Выбор жанра конец -->

<!-- каталог начало -->
<?php 
    $catalog_products2 = carbon_get_post_meta($page_id, 'main_catalog_products');
    $catalog_products_ids2 = wp_list_pluck ($catalog_products2, 'id');
                    
    $catalog_products_query_args2 = [
        'post_type' => 'product',
        'post__in'  => $catalog_products_ids2
        ];
    $catalog_products_query2 = new WP_Query( $catalog_products_query_args2 );
?>
            
                
<?php if ( $catalog_products_query2->have_posts() ) : ?>
    <div class="main-catalog__cont"> 

        <?php while ( $catalog_products_query2->have_posts() ) : $catalog_products_query2->the_post(); ?>
            <?php echo get_template_part('product-content'); ?> <!-- вывод товара -->
        <?php endwhile; ?>

                    
        <?php wp_reset_postdata(); ?> <!-- сброси инфы о посте -->
    </div> 
<?php endif; ?>
<!-- каталог конец -->

Пробовал обернуть цикл while в removeChild в if(item), ошибка пропадает, но массив для категорией все еще передается пустым. Уже нет никаких идей, возможно, я просто не вижу ошибку, поэтому буду признателен за помощь


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