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

introducing page news features

Browse Source
This commit is contained in:
Antoine M 2023-10-26 09:50:51 +02:00
parent cf00e9c662
commit b51c3da78d
6 changed files with 295 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
includes/api.php
View File

@ -1,12 +1,14 @@
<?php
/* --------------------------------------
SHIP QUESTIONS POSTS PER THEMATIQUE
--------------------------------------*/
// Handle exclusion parameters like http://homegrade.local/wp-json/homegrade-datas/v1/questions-thematiques/29?excluded_ids=1314,1305,1301
add_action('rest_api_init', function () {
register_rest_route('homegrade-datas/v1', '/questions-thematiques/(?P<id>\d+)', array(
/* ---------------------------
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',
'args' => array(
@ -15,17 +17,186 @@ add_action('rest_api_init', function () {
),
),
));
// * SHIP ALL NEWS
register_rest_route('homegrade-datas/v1', '/news', array(
'methods' => 'GET',
'callback' => 'get_news',
));
// * 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',
));
/* ----------------
BUILDING ROUTES
-----------------*/
register_rest_route('homegrade-datas/v1/build', '/news', array(
'methods' => 'GET',
'callback' => 'build_news_posts_feed_all',
));
// * 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',
));
});
function build_card($request)
{
$cardId = $request['cardId'];
$test = get_template_part(
'template-components/cards/card-news',
null,
array(
'card_variant' => 'activite',
'post_ID' => $cardId,
'post_title' => get_the_title($cardId),
// 'post_thumbnail' => $post_thumbnail,
// 'news_type' => $news_type,
)
);
$response = new WP_REST_Response($test);
$response->set_status(200);
return $response;
}
function get_news($request)
{
$args = array(
"status" => "publish",
"post_type" => "questions",
"posts_per_page" => -1,
);
$newsPosts = get_posts($args);
$response = new WP_REST_Response($newsPosts);
$response->set_status(200);
return $response;
}
/* ----------------
NEWS BY TYPE ID
-----------------*/
function get_news_posts_per_type_id($request)
{
$typeId = $request['typeId'];
$args = array(
"post_type" => "post",
"posts_per_page" => -1,
"tax_query" => array(
array(
'taxonomy' => 'news-type',
'field' => 'term_id',
'terms' => $typeId
)
)
);
$newsPostsDatas = get_posts($args);
$response = new WP_REST_Response($newsPostsDatas);
$response->set_status(200);
return $response;
}
function build_news_posts_feed_all($request)
{
$args = array(
"post_type" => "post",
"posts_per_page" => -1,
);
$newsPostsDatas = get_posts($args);
ob_start();
foreach ($newsPostsDatas 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;
write_log($news_type);
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 = new WP_REST_Response($html_template);
$response->set_status(200);
return $response;
}
function build_news_posts_feed_per_type_id($request)
{
$typeId = esc_html($request['typeId']);
if (!$typeId || (!is_numeric($typeId))) return;
$args = array(
"post_type" => "post",
"posts_per_page" => -1,
"tax_query" => array(
array(
'taxonomy' => 'news-type',
'field' => 'term_id',
'terms' => $typeId
)
)
);
$newsPostsDatas = get_posts($args);
ob_start();
foreach ($newsPostsDatas 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 = new WP_REST_Response($html_template);
$response->set_status(200);
return $response;
}
function get_questions_posts_per_thematique_id($request)
{
$excluded_ids = $request->get_param('excluded_ids');
$excludedArray = explode(',', $excluded_ids);
$id = $request['id'];
$thematiqueId = $request['thematiqueId'];
$args = array(
// "exclude" => array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10),
"post_type" => "questions",
"posts_per_page" => -1,
"post__not_in" => $excludedArray,
@ -33,7 +204,7 @@ function get_questions_posts_per_thematique_id($request)
array(
'taxonomy' => 'thematiques',
'field' => 'term_id',
'terms' => $id
'terms' => $thematiqueId
)
)
);

2
resources/js/app.js
View File

@ -3,6 +3,7 @@ import menuInit from './menus';
import singleConseil from './single-conseil';
import SchemaBulletPointsInit from './schema-bullet-points';
import taxonomyThematiqueFaqInit from './taxonomy-thematique-(faq)';
import archiveNewsInit from './archive-template-news';
// window.addEventListener('load', function () {});
window.addEventListener('DOMContentLoaded', (event) => {
@ -11,4 +12,5 @@ window.addEventListener('DOMContentLoaded', (event) => {
singleConseil();
editorInit();
taxonomyThematiqueFaqInit();
archiveNewsInit();
});

45
resources/js/archive-template-news.js Normal file
View File

@ -0,0 +1,45 @@
function loadMoreNewsInit() {
const loadMoreButton = document.querySelector('#load-more-news');
if (!loadMoreButton) return;
function loadMoreNews() {
console.log('loadMoreNews');
}
loadMoreButton.addEventListener('click', loadMoreNews);
}
function filterNewsInit() {
const filterNewsToolbar = document.querySelector('.filters-toolbar--archive-news');
if (!filterNewsToolbar) return;
const filterButtons = filterNewsToolbar.querySelectorAll('.filter__action-button');
if (!filterButtons) return;
filterButtons.forEach((button) => {
const termId = button.getAttribute('data-term-id');
button.addEventListener('click', hydrateNewsFeedByTypeId);
});
}
async function hydrateNewsFeedByTypeId(e) {
const filterID = e.target.getAttribute('data-term-id');
let newCardsContent;
if (filterID === 'all') {
const response = await fetch(`/wp-json/homegrade-datas/v1/build/news`);
newCardsContent = await response.json();
} else {
const response = await fetch(`/wp-json/homegrade-datas/v1/build/news/type/${filterID}`);
newCardsContent = await response.json();
}
let container = document.querySelector('.card-grid-container');
container.innerHTML = newCardsContent;
}
export default function archiveNewsInit() {
loadMoreNewsInit();
filterNewsInit();
const cardNewsElements = document.querySelectorAll('.card-news');
}

15
template-components/cards/card-news.css
View File

@ -1,5 +1,17 @@
.card-news {
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0px);
}
}
@apply bg-white shadow-lg rounded-3xl relative;
animation: fadeIn 0.6s ease-in-out;
&__thumbnail {
@apply rounded-t-3xl
@ -7,7 +19,8 @@
object-cover;
}
&__inner {
@apply p-8 h-full;
@apply p-8;
/* @apply h-full ; */
}
&__heading {
@apply flex flex-col-reverse;

9
template-components/cards/card-news.php
View File

@ -3,7 +3,8 @@ $post_ID = $args['post_ID'];
$card_variant = $args['card_variant'];
$post_thumbnail = $args['post_thumbnail'];
$post_title = $args['post_title'];
$post_tags = $args['post_tags'] ?? null;
$news_type = $args['news_type'] ?? null;
?>
@ -14,12 +15,12 @@ $post_tags = $args['post_tags'] ?? null;
<div class="card-news__inner">
<div class="card-news__heading">
<h3 class="card-news__title"><?php echo $post_title ?></h3>
<?php if ($post_tags) : ?>
<p class="card-news__tag"><?php echo $post_tags[0]->name ?></p>
<?php if ($news_type) : ?>
<p class="card-news__tag"><?php echo $news_type[0]->name ?></p>
<?php endif; ?>
</div>
<a href="#" class="cta cta--read-more cta--with-arrow-button cta--streched ">
<a href="<?php echo get_the_permalink($post_ID) ?>" class="cta cta--read-more cta--with-arrow-button cta--streched ">
<!-- cta-read-more -->
<span><?php echo __("Lire l'article", 'homegrade-theme__texte-fonctionnel') ?></span>
<span class="sr-only"><?php echo $post_title ?></span>

50
template-news.php
View File

@ -19,35 +19,53 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
</ol>
</nav>
</div>
<div class="heading-box">
<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>
<div class="filters-toolbar">
<ul class="filters-toolbar filters-toolbar--archive-news">
<?php
$news_types = get_terms(array(
'taxonomy' => 'news-type',
'hide_empty' => true,
));
</div>
?>
<li>
<button class="filter__action-button" data-term-id="all">Tous</button>
</li>
<?php foreach ($news_types as $typeTerm) : ?>
<li>
<button class="filter__action-button" data-term-id="<?php echo $typeTerm->term_id ?>"><?php echo $typeTerm->name ?></button>
</li>
<?php endforeach; ?>
</ul>
<?php
$post_per_page = 12;
$args = array(
"post_type" => "post",
"status" => "publish"
"status" => "publish",
"posts_per_page" => $post_per_page,
);
$posts = new WP_Query($args);
?>
<div class="card-container">
?>
<section class="news-container">
<div class="card-grid-container">
<?php
foreach ($posts->posts as $key => $post) {
$post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail card-post__thumbnail')) ?? null;
$post_tags = get_the_tags($post->ID) ?? null;
$news_type = get_the_terms($post->ID, "news-type") ?? null;
get_template_part(
'template-components/cards/card-news',
null,
@ -56,12 +74,18 @@ $posts = new WP_Query($args);
'post_ID' => $post->ID,
'post_title' => $post->post_title,
'post_thumbnail' => $post_thumbnail,
'post_tags' => $post_tags,
'news_type' => $news_type,
)
);
}
?>
</div>
</div>
<?php if ($posts->max_num_pages > 1) : ?>
<button id="load-more-news" class="cta cta--outline cta--button mx-auto mb-32">Charger Plus</button>
<?php endif; ?>
</section>
<?php
get_footer();