Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

functionnality load more news first proto

Browse Source
This commit is contained in:
Antoine M 2024-09-19 10:00:36 +02:00
parent 7803ec88eb
commit 75ec1b14b7
4 changed files with 259 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
includes/api.php
View File

@ -4,35 +4,6 @@
add_action('rest_api_init', function () {
/* ---------------------------
SHIPPING ROUTES
---------------------------*/
// Handle exclusion parameters like http://homegrade.local/wp-json/homegrade-datas/v1/questions-thematiques/29?excluded_ids=1314,1305,1301
// register_rest_route('homegrade-datas/v1', '/questions-thematiques/(?P<thematiqueId>\d+)', array(
// 'methods' => 'GET',
// 'callback' => 'get_questions_posts_per_thematique_id',
// 'permission_callback' => '__return_true',
// 'args' => array(
// 'excluded_ids' => array(
// 'sanitize_callback' => 'sanitize_text_field',
// ),
// ),
// ));
// // * SHIP ALL NEWS
// register_rest_route('homegrade-datas/v1', '/news', array(
// 'methods' => 'GET',
// 'callback' => 'get_news',
// 'permission_callback' => '__return_true',
// ));
// // * SHIP NEWS BY TYPE
// register_rest_route('homegrade-datas/v1', '/news/type/(?P<typeId>\d+)', array(
// 'methods' => 'GET',
// 'callback' => 'get_news_posts_per_type_id',
// 'permission_callback' => '__return_true',
// ));
/* ----------------
BUILDING ROUTES
-----------------*/
@ -40,18 +11,22 @@ add_action('rest_api_init', function () {
// ################ NEWS ################
// * BUILD ALL NEWS CARDS
register_rest_route('homegrade-datas/v1/build', '/news', array(
register_rest_route('homegrade-datas/v1/build', '/news/all', array(
'methods' => 'GET',
'callback' => 'build_news_posts_feed_all',
'permission_callback' => '__return_true',
));
// * BUILD MORE NEWS CARDS
register_rest_route('homegrade-datas/v1/build', '/news/more', array(
'methods' => 'GET',
'callback' => 'build_news_posts_more_posts',
'permission_callback' => '__return_true',
));
// * BUILD NEWS CARDS BY NEWS TYPE
register_rest_route('homegrade-datas/v1/build', '/news/type/(?P<typeId>\d+)', array(
'methods' => 'GET',
'callback' => 'build_news_posts_feed_per_type_id',
'permission_callback' => '__return_true',
));
// ################ PUBLICATIONS ################
@ -100,7 +75,11 @@ add_action('rest_api_init', function () {
function build_news_posts_feed_all($request)
{
$currentLanguage = $request->get_param('current-page-language') ?? 'fr';
do_action('wpml_switch_language', $currentLanguage);
$args = array(
"status" => "publish",
"post_type" => "post",
"posts_per_page" => -1,
);
@ -129,6 +108,8 @@ function build_news_posts_feed_all($request)
$response_data = array(
'html_template' => $html_template,
'total_posts_found' => $newsPostsDatas->found_posts,
'active_page' => 1,
'max_num_pages' => 1,
);
$response = new WP_REST_Response($response_data);
@ -138,12 +119,19 @@ function build_news_posts_feed_all($request)
}
function build_news_posts_feed_per_type_id($request)
{
$currentLanguage = $request->get_param('current-page-language') ?? 'fr';
$activePage = $request->get_param('active-page') ?? 1;
$postsPerPage = esc_html($request->get_param('posts-per-page')) ?? 8;
do_action('wpml_switch_language', $currentLanguage);
$typeId = esc_html($request['typeId']);
if (!$typeId || (!is_numeric($typeId))) return;
$args = array(
"status" => "publish",
"post_type" => "post",
"posts_per_page" => -1,
"posts_per_page" => $postsPerPage,
"tax_query" => array(
array(
@ -178,6 +166,71 @@ function build_news_posts_feed_per_type_id($request)
$response_data = array(
'html_template' => $html_template,
'total_posts_found' => $newsPostsDatas->found_posts,
'active_page' => 1,
'max_num_pages' => $newsPostsDatas->max_num_pages,
);
$response = new WP_REST_Response($response_data);
$response->set_status(200);
return $response;
}
function build_news_posts_more_posts($request)
{
$currentLanguage = esc_html($request->get_param('current-page-language')) ?? 'fr';
$previousActivePage = esc_html($request->get_param('active-page')) ?? 1;
$activeTermID = esc_html($request->get_param('active-term-id'));
$postsPerPage = esc_html($request->get_param('posts-per-page')) ?? 12;
$activePage = is_numeric($previousActivePage) ? $previousActivePage + 1 : 1;
$taxQuery = $activeTermID && is_numeric($activeTermID) ? array(
array(
'taxonomy' => 'news_type',
'field' => 'term_id',
'terms' => $activeTermID
)
) : null;
do_action('wpml_switch_language', $currentLanguage);
$args = array(
"status" => "publish",
"post_type" => "post",
"posts_per_page" => $postsPerPage,
"paged" => $activePage,
"tax_query" => $taxQuery
);
$newsPostsDatas = new WP_Query($args);
ob_start();
foreach ($newsPostsDatas->posts as $key => $post) {
$post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail card-post__thumbnail')) ?? null;
$news_type = get_the_terms($post->ID, "news_type") ?? null;
get_template_part(
'template-components/cards/card-news',
null,
array(
'card_variant' => 'activite',
'post_ID' => $post->ID,
'post_title' => get_the_title($post->ID),
'post_thumbnail' => $post_thumbnail,
'news_type' => $news_type,
)
);
}
$html_template = ob_get_clean();
$response_data = array(
'html_template' => $html_template,
'total_posts_found' => $newsPostsDatas->found_posts,
'active_page' => $activePage,
'max_num_pages' => $newsPostsDatas->max_num_pages,
);
@ -460,6 +513,34 @@ function build_faq_details_rows_all_from_one_thematique(WP_REST_Request $request
/* ---------------------------
SHIPPING ROUTES
---------------------------*/
// Handle exclusion parameters like http://homegrade.local/wp-json/homegrade-datas/v1/questions-thematiques/29?excluded_ids=1314,1305,1301
// register_rest_route('homegrade-datas/v1', '/questions-thematiques/(?P<thematiqueId>\d+)', array(
// 'methods' => 'GET',
// 'callback' => 'get_questions_posts_per_thematique_id',
// 'permission_callback' => '__return_true',
// 'args' => array(
// 'excluded_ids' => array(
// 'sanitize_callback' => 'sanitize_text_field',
// ),
// ),
// ));
// // * SHIP ALL NEWS
// register_rest_route('homegrade-datas/v1', '/news', array(
// 'methods' => 'GET',
// 'callback' => 'get_news',
// 'permission_callback' => '__return_true',
// ));
// // * SHIP NEWS BY TYPE
// register_rest_route('homegrade-datas/v1', '/news/type/(?P<typeId>\d+)', array(
// 'methods' => 'GET',
// 'callback' => 'get_news_posts_per_type_id',
// 'permission_callback' => '__return_true',
// ));
// function get_news($request)
// {
// $args = array(

3
resources/css/pages/template-archives-news.css
View File

@ -5,4 +5,7 @@
.card-grid-container[isLoading] {
@apply opacity-30;
}
.load-news {
@apply mx-auto w-fit gap-8 flex pb-16;
}
}

149
resources/js/archive-template-news.js
View File

@ -1,3 +1,6 @@
// #########################
// ### FILTER POSTS
// #########################
async function filterPosts(e) {
const filterID =
e.target.getAttribute('data-term-id') ??
@ -22,21 +25,45 @@ async function filterPosts(e) {
e.target.classList.add('filters-toolbar__action-button--active');
e.target.setAttribute('aria-pressed', 'true');
updateActivePageNumber(1);
}
async function hydrateNewsFeedByTypeId(filterID, termName) {
let newCardsDatas;
if (filterID === 'all') {
const response = await fetch(`/wp-json/homegrade-datas/v1/build/news`);
newCardsDatas = await response.json();
} else {
const response = await fetch(`/wp-json/homegrade-datas/v1/build/news/type/${filterID}`);
newCardsDatas = await response.json();
async function loadMorePosts(e) {
const newsContainer = document.querySelector('.news-container .card-grid-container');
newsContainer.setAttribute('isLoading', true);
await hydrateNewsFeedWithNextPosts();
newsContainer.removeAttribute('isLoading');
}
let container = document.querySelector('.card-grid-container');
container.innerHTML = newCardsDatas.html_template;
updateSearchResultsAmount(newCardsDatas.total_posts_found, termName);
// ###################################
// ### UPDATE INDICATORS AND DISPLAY
// ###################################
function updateActivePageNumber(activePage) {
const filtersToolbar = document.querySelector('.filters-toolbar--archive-news');
filtersToolbar.setAttribute('data-active-page', activePage);
}
function updateHasMorePosts(activePage, maxNumPages) {
const filtersToolbar = document.querySelector('.filters-toolbar--archive-news');
filtersToolbar.setAttribute('data-has-more-posts', activePage < maxNumPages);
}
function checkLoadMoreButtonsVisibility() {
const loadMoreButton = document.querySelector('#load-more-news');
const loadAllButton = document.querySelector('#load-all-news');
const filtersToolbar = document.querySelector('.filters-toolbar--archive-news');
const hasMorePosts = filtersToolbar.getAttribute('data-has-more-posts') === 'true';
if (hasMorePosts) {
loadMoreButton.removeAttribute('hidden');
loadAllButton.removeAttribute('hidden');
return;
}
loadAllButton.setAttribute('hidden', 'true');
loadMoreButton.setAttribute('hidden', 'true');
}
function updateSearchResultsAmount(totalPostsFound, termName) {
@ -57,6 +84,95 @@ function updateSearchResultsAmount(totalPostsFound, termName) {
return;
}
}
function updateToolbarActiveFilter(termId) {
const filterToolbar = document.querySelector('.filters-toolbar--archive-news');
if (!filterToolbar) return;
filterToolbar.setAttribute('data-active-news-term', termId);
}
// #########################
// ### HYDRATATION
// #########################
async function hydrateNewsFeedByTypeId(filterID, termName) {
const currentLanguage = document.querySelector('body').getAttribute('current-language');
const filtersToolbar = document.querySelector('.filters-toolbar--archive-news');
const postsPerPage = filtersToolbar.getAttribute('data-posts-per-page') ?? 12;
const activePage = filtersToolbar.getAttribute('data-active-page');
let newCardsDatas;
if (filterID === 'all') {
// const response = await fetch(
// `/wp-json/homegrade-datas/v1/build/news/all?current-page-language=${currentLanguage}&active-page=${activePage}&posts-per-page=${postsPerPage}`
// );
const response = await fetch(
`/wp-json/homegrade-datas/v1/build/news/more?current-page-language=${currentLanguage}&active-page=${0}&posts-per-page=${postsPerPage}`
);
newCardsDatas = await response.json();
} else {
// const response = await fetch(
// `/wp-json/homegrade-datas/v1/build/news/type/${filterID}?current-page-language=${currentLanguage}&active-page=${activePage}&posts-per-page=${postsPerPage}`
// );
const response = await fetch(
`/wp-json/homegrade-datas/v1/build/news/more?current-page-language=${currentLanguage}&active-page=${0}&active-term-id=${filterID}&posts-per-page=${postsPerPage}`
);
newCardsDatas = await response.json();
}
let container = document.querySelector('.card-grid-container');
container.innerHTML = newCardsDatas.html_template;
updateToolbarActiveFilter(filterID);
updateSearchResultsAmount(newCardsDatas.total_posts_found, termName);
updateHasMorePosts(newCardsDatas.active_page, newCardsDatas.max_num_pages);
console.log(newCardsDatas.active_page, newCardsDatas.max_num_pages);
checkLoadMoreButtonsVisibility();
}
async function hydrateNewsFeedWithAllPosts() {
const currentLanguage = document.querySelector('body').getAttribute('current-language');
const activeNewsTermId =
document
.querySelector('.filters-toolbar--archive-news')
.getAttribute('data-active-news-term') ?? null;
const response = await fetch(
`/wp-json/homegrade-datas/v1/build/news/all?current-page-language=${currentLanguage}`
);
newsDatas = await response.json();
const newsGrid = document.querySelector('.news-container .card-grid-container');
newsGrid.innerHTML = newsDatas.html_template;
updateHasMorePosts(newsDatas.active_page, newsDatas.max_num_pages);
checkLoadMoreButtonsVisibility();
}
async function hydrateNewsFeedWithNextPosts() {
const currentLanguage = document.querySelector('body').getAttribute('current-language');
const filtersToolbar = document.querySelector('.filters-toolbar--archive-news');
const activePage = filtersToolbar.getAttribute('data-active-page') ?? 1;
const postsPerPage = filtersToolbar.getAttribute('data-posts-per-page') ?? 12;
const activeNewsTermId = filtersToolbar.getAttribute('data-active-news-term') ?? 'all';
const response = await fetch(
`/wp-json/homegrade-datas/v1/build/news/more?current-page-language=${currentLanguage}&active-page=${activePage}&active-term-id=${activeNewsTermId}&posts-per-page=${postsPerPage}`
);
newsDatas = await response.json();
const newsGrid = document.querySelector('.news-container .card-grid-container');
newsGrid.innerHTML += newsDatas.html_template;
updateActivePageNumber(newsDatas.active_page);
updateHasMorePosts(newsDatas.active_page, newsDatas.max_num_pages);
checkLoadMoreButtonsVisibility();
}
// #########################
// ### INIT
// #########################
function filterNewsInit() {
const filterNewsToolbar = document.querySelector('.filters-toolbar--archive-news');
if (!filterNewsToolbar) return;
@ -69,15 +185,16 @@ function filterNewsInit() {
button.addEventListener('click', (e) => filterPosts(e));
});
}
function loadMoreNewsInit() {
const loadAllButton = document.querySelector('#load-all-news');
const loadMoreButton = document.querySelector('#load-more-news');
if (!loadMoreButton) return;
function loadMoreNews() {
console.log('loadMoreNews');
}
// if (!loadAllButton) return;
loadAllButton.addEventListener('click', hydrateNewsFeedWithAllPosts);
loadMoreButton.addEventListener('click', loadMoreNews);
// if (!loadMoreButton) return;
loadMoreButton.addEventListener('click', loadMorePosts);
}
export default function archiveNewsInit() {

14
template-archive-news.php
View File

@ -8,14 +8,16 @@ $args = array(
$relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null;
$pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
$post_per_page = 24;
$posts_per_page = 4;
$args = array(
"post_type" => "post",
"status" => "publish",
"posts_per_page" => $post_per_page,
"posts_per_page" => $posts_per_page,
// "paged" => 1,
);
$posts = new WP_Query($args);
?>
<div class="template-archives template-archives--news">
<?php /* --------
@ -51,7 +53,7 @@ $posts = new WP_Query($args);
<?php /* --------
FILTERS
---------------*/ ?>
<div class="filters-toolbar filters-toolbar--archive-news">
<div class="filters-toolbar filters-toolbar--archive-news" data-active-news-term='all' data-active-page="1" data-posts-per-page="<?php echo $posts_per_page ?>" data-has-more-posts="true">
<p class="filters-toolbar__posts-results-amount filter-disable" role="status">
<span class="results-amount">
<?php echo $posts->found_posts ?>
@ -131,9 +133,11 @@ $posts = new WP_Query($args);
?>
</div>
<?php if ($posts->max_num_pages > 1) : ?>
<button id="load-more-news" class="cta cta--outline cta--button mx-auto mb-32"><?php echo __("Charger Plus", "homegrade-theme__texte-fonctionnel") ?></button>
<div class="load-news">
<button id="load-all-news" class="cta cta--outline cta--button"><?php echo __("Charger Tout", "homegrade-theme__texte-fonctionnel") ?></button>
<button id="load-more-news" class="cta cta--outline cta--button"><?php echo __("Charger Plus", "homegrade-theme__texte-fonctionnel") ?></button>
</div>
<?php endif; ?>
</section>