updating news pages system

This commit is contained in:
Antoine M 2023-10-26 17:51:48 +02:00
parent c4bcfc3c79
commit fb4bdc673d
4 changed files with 186 additions and 62 deletions

View File

@ -0,0 +1,13 @@
body.acoustisque {
@apply bg-slate-800;
}
.entry-content.single-news-editor-content {
@apply mx-auto mt-8 px-4;
ul li::marker,
ol li::marker {
@apply text-purple-500;
}
ul li:before {
@apply !bg-secondary;
}
}

View File

@ -13,17 +13,16 @@ function filterNewsInit() {
const filterNewsToolbar = document.querySelector('.filters-toolbar--archive-news');
if (!filterNewsToolbar) return;
const filterButtons = filterNewsToolbar.querySelectorAll('.filter__action-button');
const filterButtons = filterNewsToolbar.querySelectorAll('.filters-toolbar__action-button');
if (!filterButtons) return;
filterButtons.forEach((button) => {
const termId = button.getAttribute('data-term-id');
button.addEventListener('click', hydrateNewsFeedByTypeId);
button.addEventListener('click', (e) => filterPosts(e));
});
}
async function hydrateNewsFeedByTypeId(e) {
const filterID = e.target.getAttribute('data-term-id');
async function hydrateNewsFeedByTypeId(filterID) {
let newCardsContent;
if (filterID === 'all') {
const response = await fetch(`/wp-json/homegrade-datas/v1/build/news`);
@ -37,6 +36,22 @@ async function hydrateNewsFeedByTypeId(e) {
container.innerHTML = newCardsContent;
}
async function filterPosts(e) {
const filterID =
e.target.getAttribute('data-term-id') ??
e.target.parentElement.getAttribute('data-term-id') ??
null;
console.log('filterID');
console.log(filterID);
const filterButtons = document.querySelectorAll('.filters-toolbar__action-button');
filterButtons.forEach((button) => {
button.classList.remove('filters-toolbar__action-button--active');
});
await hydrateNewsFeedByTypeId(filterID);
e.target.classList.add('filters-toolbar__action-button--active');
}
export default function archiveNewsInit() {
loadMoreNewsInit();
filterNewsInit();

63
single-post.php Normal file
View File

@ -0,0 +1,63 @@
<?php
get_header();
$args = array(
'meta_key' => '_wp_page_template',
'meta_value' => "template-news.php"
);
$relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null;
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<nav class="breadcrumbs_navigation" aria-label="breadcrumbs">
<ol>
<li>
<a href="<?php echo home_url() ?>" title="<?php echo __("Accueil", "homegrade-theme__texte-fonctionnel") ?>">
<img src="<?php echo get_template_directory_uri() . "/resources/img/pictogrammes/icon_house_dark.svg" ?>" alt="">
</a>
</li>
<li>
<a href="<?php echo get_the_permalink($relatedPageTemplatePage) ?>">
<?php echo __("News", "homegrade-theme__texte-fonctionnel") ?>
</a>
</li>
<li>
<a href="<?php echo get_the_permalink(get_the_id()) ?>" aria-current='location'>
<?php echo get_the_title(get_the_id()) ?>
</a>
</li>
</ol>
</nav>
<div class="post-news-page-container">
<?php /* --------
HEADING BOX
---------------*/ ?>
<?php
get_template_part("template-components/news-heading-box", null, array(
"news_type" => get_the_terms(get_the_ID(), 'news-type'),
"title" => get_the_title(),
"thumbnail" => get_the_post_thumbnail(get_the_ID(), "full", array('class' => 'news-heading-box__thumbnail')),
"published" => get_the_date()
));
?>
<div class="entry-content single-news-editor-content">
<?php
the_content();
?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php
get_footer();

View File

@ -10,23 +10,37 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
?>
<div class="template-archives template-archives--publications">
<?php /* --------
BREADCRUMB
---------------*/ ?>
<nav class="breadcrumbs_navigation" aria-label="breadcrumbs">
<ol>
<li><a href="<?php echo home_url() ?>">Home</a></li>
<li>
<a href="<?php echo home_url() ?>" title="<?php echo __("Accueil", "homegrade-theme__texte-fonctionnel") ?>">
<img src="<?php echo get_template_directory_uri() . "/resources/img/pictogrammes/icon_house_dark.svg" ?>" alt="">
</a>
</li>
<li><a href="<?php echo get_the_permalink($relatedPageTemplatePage) ?>" aria-current='location'>
<?php echo __("News", "homegrade-theme__texte-fonctionnel") ?>
</a></li>
</ol>
</nav>
</div>
<div class="heading-box ">
<img class="heading-box__page-icon" src="<?php echo $pageIcon['url'] ?>" alt="" />
<h1 class="heading-box__title"><?php echo get_the_title(get_queried_object_id()) ?></h1>
<p class="heading-box__description"> <?php echo __("Qu'y a-t-il de nouveau
chez Homegrade ?", "homegrade-theme__texte-fonctionnel") ?></p>
</div>
<?php /* --------
HEADING BOX
---------------*/ ?>
<?php
get_template_part("template-components/heading-box", null, array(
"pageIcon" => $pageIcon,
"title" => get_the_title(get_queried_object_id()),
"description" => __("Qu'y a-t-il de nouveau chez Homegrade ?", "homegrade-theme__texte-fonctionnel"),
));
?>
<?php /* --------
FILTERS
---------------*/ ?>
<ul class="filters-toolbar filters-toolbar--archive-news">
<?php
$news_types = get_terms(array(
@ -36,15 +50,33 @@ chez Homegrade ?", "homegrade-theme__texte-fonctionnel") ?></p>
?>
<li>
<button class="filter__action-button" data-term-id="all">Tous</button>
<button class="filters-toolbar__action-button" data-term-id="all">Tous</button>
</li>
<?php foreach ($news_types as $typeTerm) : ?>
<?php
$termIcon = get_field('news_type_icon', "news-type" . '_' . $typeTerm->term_id) ?? null;
?>
<li>
<button class="filter__action-button" data-term-id="<?php echo $typeTerm->term_id ?>"><?php echo $typeTerm->name ?></button>
<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>
</li>
<?php endforeach; ?>
</ul>
<?php /* -------------
POSTS CARDS GRID
--------------------*/ ?>
<section class="news-container">
<?php
$post_per_page = 12;
$args = array(
@ -54,10 +86,7 @@ $args = array(
);
$posts = new WP_Query($args);
?>
<section class="news-container">
<div class="card-grid-container">
@ -87,5 +116,9 @@ $posts = new WP_Query($args);
<?php endif; ?>
</section>
</div>
<?php
get_footer();