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), ошибка пропадает, но массив для категорией все еще передается пустым. Уже нет никаких идей, возможно, я просто не вижу ошибку, поэтому буду признателен за помощь