Друзья, всем привет!
Прошу помощи от знатоков, ибо второй день не могу понять причину ошибок и в принципе неработы кода.
Если подробнее, то начну с вылезающей ошибки, сейчас браузер ругается на то, что не удается прочитать свойства null (чтение 'append') не могу понять куда искать:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'append')
А теперь по порядку:
- сайт делаю на WP,
- карточки вывожу через ACF,
- для эксперимента в настройках CMS (настройки->чтение) ограничил показ не более 2-х записей (всего их 12шт), пагинация срабатывает правильно.
Сам скрипт кнопки:
// все начальные переменные
let postContainer = document.querySelector('.posts-wrapper'),
loadMore_btn = document.querySelector('#load_more_posts'),
totalPages = document.querySelector('.load-more').getAttribute('data-totalpages'),
currentPage = 1,
url = document.location.href,
fetchUrl = url.match(/[?]/) ? url + '&paged=' : url + '?paged=',//проверка структуры постоянных ссылок
parser = new DOMParser();//анализатор DOM
console.log(totalPages, url)
if( currentPage == totalPages ) {
//запустить, если есть только 1 страница
loadMore_btn.classList.add('end-page')
loadMore_btn.disabled = true
loadMore_btn.innerHTML = 'No more posts'
}else if( currentPage < totalPages ){
//выполнить, если имеется более 1 страницы
loadMore_btn.disabled = false
//прослушиватель событий для кнопки "загрузить больше"
loadMore_btn.addEventListener( 'click', loadMorePosts )
}
/**
* @callback loadMorePosts
* асинхронная функция для функции выборки с ожиданием
*/
async function loadMorePosts(){
//увеличиваю номер страницы для каждого клика
currentPage++
//изменение текста кнопки во время загрузки
this.innerHTML = 'Сейчас поищу...'
//функция выборки и возвращаемые данные
let data = await ( await fetch( fetchUrl + currentPage ).catch( errorHandle ) ).text(),
//DOMParser для преобразования текстовой строки в узлы HTML
htmlData = parser.parseFromString( data, 'text/html' ),
//записи, которые будут добавлены
posts = htmlData.querySelectorAll('.change-img')
for( let i = 0; i<posts.length; i++ ){
//первоначально добавляю класс "скрыть" к сообщениям для эффекта затухания
posts[i].classList.add('hide')
//затем добавляю его в контейнер
postContainer.append( posts[i] )
}
/*********** fadein effect ***********/
//выбераю все скрытые записи
let hiddenPosts = postContainer.querySelectorAll('.hide'),
//тайм-аут и видимые сообщения
// переход css исчезнет в
timer = setTimeout( function(){
Array.prototype.map.call( hiddenPosts, function(el){
el.classList.remove('hide')
el.classList.add('show')
})
}, 300)
/*********** fadein effect ends ***********/
if( currentPage == totalPages ){
//если больше нет страницы,
//отключаю кнопку
this.classList.add('end-page')
this.disabled = true
this.innerHTML = 'Загружены все карточки'
}else{
//если страниц больше,
//текст кнопки
this.innerHTML = 'Загрузить еще'
}
}
/**
* @callback errorHandle
* @param err to handle errors //для обработки ошибок
*/
function errorHandle(err){
console.warn(err)
}
Файл вывода всех записей:
<div class="row">
<div class="col md 12">
<div class="rotate-block">
<?php
// Произвольное поле по которому будет сортировка
$the_key = 'Date';
$args = array(
'meta_key' => $the_key,
// Сортируем по значению цифры в произвольном поле
'orderby' => 'meta_value_num',
// Сортируем от большего к меньшему
'order' => 'DESC',
// Исключаем категории
'cat' => ''
);
global $wp_query;
query_posts(
array_merge(
$wp_query->query,
$args
)
);
?>
<?php if (have_posts()) : ?>
<?php
while (have_posts()) :
the_post();
get_template_part('template-parts/content-cards', 'cards');
endwhile;
?>
<?php
//ссылки на страницы WordPress по умолчанию пагинация
// echo paginate_links();
//загрузить дополнительную кнопку для JS fetch API
printf(
'<div class="load-more" data-totalpages="%s"><button id="load_more_posts">%s</button></div>',
esc_attr($wp_query->max_num_pages),
esc_html__('Загрузить еще', 'text-doamin')
);
?>
<?php
the_posts_pagination(array(
/* 'show_all' => false, // показаны все страницы участвующие в пагинации
'end_size' => 2, // количество страниц на концах
'mid_size' => 2, // количество страниц вокруг текущей
'prev_text' => '',
'next_text' => '',
'before_page_number' => false,
'type' => 'list', ));*/
?>
<?php // Если нет карточек контента, шаблон "Сообщения не найдены".
else :
get_template_part('template-parts/content-cards', 'none');
?>
<?php endif; ?>
</div>
</div>
</div>
Ну и файл самой карточки (не знаю поможет ли разобраться):
<div class="change-img">
<div class="front-side-img">
<img src="<?php the_field('Image'); ?>" alt="<?php the_field('alt_img'); ?>">
</div>
<div class="back-side-img">
<div class="back-side__info">
<h3 class="back-side__title">г.
<span class="back-side__span">
<?php the_field('Sity'); ?>
</span>
</h3>
<span class="back-side__aderss">адрес:
<span class="back-side__span">
<?php the_field('Address'); ?>
</span>
</span>
<span class="back-side__data">дата:
<span class="back-side__span">
<?php the_field('Date'); ?>
</span>
</span>
<span class="back-side__prise"> стоимость участия:
<span class="back-side__span">
<?php the_field('Cost_of_participation'); ?> руб.
</span>
</span>
<?php if (get_field('filsave')) : ?>
<a href=" <?php the_field('filsave'); ?>" target="_blank" class="back-side__polojenie"><?php the_field('my_link'); ?></a>
<?php endif; ?>
<a href="<?php the_field('polelinks'); ?>" target="_blank" class=" btn-primary btn-outline btn-merop"><?php the_field('namelink'); ?></a>
</div>
</div>
</div>
Подскажите плизз, если возможно, где я ошибся?
Что поправить?
Спасибо.
