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

Adapting filter toolbars to handle results amount

Browse Source
This commit is contained in:
Antoine M 2023-11-17 12:57:06 +01:00
parent 5c947839b5
commit 154db8cae5
3 changed files with 110 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
resources/css/components/filters-toolbar.css
View File

@ -1,17 +1,33 @@
.filters-toolbar {
@apply flex
flex-row
justify-start
md:justify-center
lg:justify-start
flex-wrap
container
mx-auto
gap-x-4 gap-y-3 p-0 py-8;
@apply py-8;
ul {
@apply flex
flex-row
justify-start
md:justify-center
lg:justify-start
flex-wrap
container
mx-auto
gap-x-4 gap-y-3 p-0;
}
li {
@apply h-auto;
}
&__posts-results-amount {
@apply pb-4;
.results-filter-name {
@apply font-bold;
}
&.filter-disable {
.results-filter-name,
.results-for {
@apply hidden sr-only;
}
}
}
&__action-button {
@apply bg-white shadowed py-4 px-4 rounded-xl
font-bold

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

@ -3,30 +3,54 @@ async function filterPosts(e) {
e.target.getAttribute('data-term-id') ??
e.target.parentElement.getAttribute('data-term-id') ??
null;
const termName =
e.target.getAttribute('data-term-name') ??
e.target.parentElement.getAttribute('data-term-name') ??
null;
const filterButtons = document.querySelectorAll('.filters-toolbar__action-button');
filterButtons.forEach((button) => {
button.classList.remove('filters-toolbar__action-button--active');
});
await hydrateNewsFeedByTypeId(filterID);
await hydrateNewsFeedByTypeId(filterID, termName);
e.target.classList.add('filters-toolbar__action-button--active');
}
async function hydrateNewsFeedByTypeId(filterID) {
let newCardsContent;
async function hydrateNewsFeedByTypeId(filterID, termName) {
let newCardsDatas;
if (filterID === 'all') {
const response = await fetch(`/wp-json/homegrade-datas/v1/build/news`);
newCardsContent = await response.json();
newCardsDatas = await response.json();
} else {
const response = await fetch(`/wp-json/homegrade-datas/v1/build/news/type/${filterID}`);
newCardsContent = await response.json();
newCardsDatas = await response.json();
}
let container = document.querySelector('.card-grid-container');
container.innerHTML = newCardsContent;
container.innerHTML = newCardsDatas.html_template;
updateSearchResultsAmount(newCardsDatas.total_posts_found, termName);
}
function updateSearchResultsAmount(totalPostsFound, termName) {
const searchResultsComponent = document.querySelector('.filters-toolbar__posts-results-amount');
if (termName !== 'all') {
searchResultsComponent.querySelector('.results-amount').innerHTML = totalPostsFound;
searchResultsComponent.querySelector('.results-filter-name').innerHTML = '"' + termName + '"';
searchResultsComponent.classList.add('filter-active');
searchResultsComponent.classList.remove('filter-disable');
return;
}
if (termName === 'all') {
searchResultsComponent.classList.remove('filter-active');
searchResultsComponent.classList.add('filter-disable');
searchResultsComponent.querySelector('.results-amount').innerHTML = totalPostsFound;
searchResultsComponent.querySelector('.results-filter-name').innerHTML = termName;
return;
}
}
function filterNewsInit() {
const filterNewsToolbar = document.querySelector('.filters-toolbar--archive-news');
if (!filterNewsToolbar) return;

87
template-archive-news.php
View File

@ -8,6 +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 = 12;
$args = array(
"post_type" => "post",
"status" => "publish",
"posts_per_page" => $post_per_page,
);
$posts = new WP_Query($args);
?>
<div class="template-archives template-archives--news">
<?php /* --------
@ -38,38 +48,59 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
));
?>
<?php /* --------
FILTERS
---------------*/ ?>
<ul class="filters-toolbar filters-toolbar--archive-news">
<?php
$news_types = get_terms(array(
'taxonomy' => 'news_type',
'hide_empty' => false,
));
<div class="filters-toolbar filters-toolbar--archive-news">
<p class="filters-toolbar__posts-results-amount filter-disable" role="status">
<span class="results-amount">
<?php echo $posts->found_posts ?>
</span>
<span class="results-text">
<?php echo __("résultat(s)", "homegrade-theme__texte-fonctionnel"); ?>
</span>
?>
<li>
<button class="filters-toolbar__action-button" data-term-id="all">Tous</button>
</li>
<?php foreach ($news_types as $typeTerm) : ?>
<span class="results-for">
<?php echo __("pour", "homegrade-theme__texte-fonctionnel") . " : "; ?>
</span>
<span class="results-filter-name">
<?php echo __("categorie", "homegrade-theme__texte-fonctionnel"); ?>
</span>
</p>
<ul>
<?php
$termIcon = get_field('news_type_icon', "news_type" . '_' . $typeTerm->term_id) ?? null;
$news_types = get_terms(array(
'taxonomy' => 'news_type',
'hide_empty' => false,
));
?>
<li>
<button class="filters-toolbar__action-button" data-term-id="<?php echo $typeTerm->term_id ?>">
<?php if ($termIcon) : ?>
<img class="icon" src="<?php echo $termIcon['url'] ?>" alt='' />
<?php endif; ?>
<?php echo $typeTerm->name ?>
</button>
<button class="filters-toolbar__action-button" data-term-id="all" data-term-name="all">Tous</button>
</li>
<?php endforeach; ?>
</ul>
<?php foreach ($news_types as $typeTerm) : ?>
<?php
$termIcon = get_field('news_type_icon', "news_type" . '_' . $typeTerm->term_id) ?? null;
?>
<li>
<button class="filters-toolbar__action-button" data-term-id="<?php echo $typeTerm->term_id ?>" data-term-name="<?php echo $typeTerm->name ?>">
<?php if ($termIcon) : ?>
<img class="icon" src="<?php echo $termIcon['url'] ?>" alt='' />
<?php endif; ?>
<?php echo $typeTerm->name ?>
</button>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php /* -------------
@ -77,16 +108,6 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
--------------------*/ ?>
<section class="news-container">
<?php
$post_per_page = 12;
$args = array(
"post_type" => "post",
"status" => "publish",
"posts_per_page" => $post_per_page,
);
$posts = new WP_Query($args);
?>
<div class="card-grid-container">