moving acf blocks to plugin
This commit is contained in:
parent
fde50094bb
commit
075e722a6d
|
|
@ -1,43 +0,0 @@
|
|||
#block-aides-financieres {
|
||||
.section_titling {
|
||||
@apply max-w-screen-md;
|
||||
}
|
||||
.card-large-content {
|
||||
@apply lg:grid grid-cols-2 gap-12;
|
||||
|
||||
&__renolution-details {
|
||||
/* .logo_renolution { */
|
||||
.renolution__logo {
|
||||
@apply p-6 mb-8 bg-white shadowed w-fit rounded-3xl;
|
||||
}
|
||||
.renolution__title {
|
||||
@apply text-lg font-bold text-secondary pb-3;
|
||||
}
|
||||
.cta {
|
||||
@apply mt-8;
|
||||
}
|
||||
.renolution__guide-external-links {
|
||||
@apply grid grid-cols-2 gap-12 pt-6;
|
||||
.question_title {
|
||||
@apply text-black font-bold pt-6 pb-2;
|
||||
}
|
||||
.question_explanation {
|
||||
@apply text-sm;
|
||||
}
|
||||
.question_url {
|
||||
@apply block text-sm text-black font-bold mt-2 py-2;
|
||||
&:hover {
|
||||
@apply text-secondary;
|
||||
}
|
||||
img {
|
||||
@apply inline-block ml-1 -mt-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__renolution-illustration-picture {
|
||||
@apply ml-auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<?php
|
||||
$subtitle = get_field('subtitle');
|
||||
$renolution_datas = get_field('renolution_datas');
|
||||
?>
|
||||
|
||||
|
||||
<section id="block-aides-financieres" class="card-large-content-container">
|
||||
|
||||
<div class="section_titling">
|
||||
<h2 class="section_titling__title"><?php echo __("Aides financières", 'homegrade-theme__texte-fonctionnel') ?></h2>
|
||||
<p class="section_titling__subtitle"><?php echo $subtitle ?></p>
|
||||
</div>
|
||||
<div class="card-large-content">
|
||||
<div class="card-large-content__renolution-details">
|
||||
<div class="renolution__logo">
|
||||
<img src='<?php echo get_template_directory_uri() ?>/resources/img/logos/logo-renolution-monochrome.svg' alt=''>
|
||||
</div>
|
||||
|
||||
<h3 class="renolution__title"><?php echo $renolution_datas['title'] ?></h3>
|
||||
<p><?php echo $renolution_datas['description'] ?></p>
|
||||
<a class="cta cta--primary cta--button" href="<?php echo $renolution_datas['button']['url'] ?>" target="<?php echo $renolution_datas['button']['target'] ?>"><?php echo $renolution_datas['button']['title'] ?></a>
|
||||
<div class="renolution__guide-external-links">
|
||||
<div class="introduire-demande">
|
||||
<img src='<?php echo get_template_directory_uri() ?>/resources/img/pictogrammes/pictogramme-demande.svg' alt=''>
|
||||
<h4 class="question_title"><?php echo $renolution_datas['demande_title'] ?></h4>
|
||||
<p class="question_explanation"><?php echo $renolution_datas['demande_description'] ?></p>
|
||||
<a class="question_url" href="<?php echo $renolution_datas['demande_lien']['url'] ?>" target="<?php echo $renolution_datas['demande_lien']['target'] ?>">
|
||||
<?php echo $renolution_datas['demande_lien']['title'] ?>
|
||||
<img class="icon" src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/icone-external-link.svg' alt=''>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class=" estimation-prime">
|
||||
<img src='<?php echo get_template_directory_uri() ?>/resources/img/pictogrammes/pictogramme-formulaire.svg' alt=''>
|
||||
<h4 class="question_title"><?php echo $renolution_datas['prime_title'] ?></h4>
|
||||
<p class="question_explanation"><?php echo $renolution_datas['prime_description'] ?></p>
|
||||
<a class="question_url" href="<?php echo $renolution_datas['prime_lien']['url'] ?>" target="<?php echo $renolution_datas['prime_lien']['target'] ?>">
|
||||
<?php echo $renolution_datas['prime_lien']['title'] ?>
|
||||
<img class="icon" src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/icone-external-link.svg' alt=''>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<img class="card-large-content__renolution-illustration-picture" src='<?php echo get_template_directory_uri() ?>/resources/img/illustrations/illustration-aides-financieres-homepage.svg' alt=''>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"name": "acf/aides-financieres",
|
||||
"title": "Aides Financières",
|
||||
"category": "homegrade-page-home",
|
||||
"multiple": false,
|
||||
"icon": {
|
||||
"foreground": "#DF1E1E",
|
||||
"src": "schedule"
|
||||
},
|
||||
"keywords": [
|
||||
"aides financières",
|
||||
"aide",
|
||||
"Financières",
|
||||
"Renolution"
|
||||
],
|
||||
"acf": {
|
||||
"mode": "auto",
|
||||
"renderTemplate": "aides-financieres.php"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
{
|
||||
"name": "acf/demarches-administratives",
|
||||
"title": "Démarches Administratives",
|
||||
"category": "homegrade-page-home",
|
||||
"multiple": false,
|
||||
"icon": {
|
||||
"foreground": "#DF1E1E",
|
||||
"src": "schedule"
|
||||
},
|
||||
"keywords": [
|
||||
"Couverture",
|
||||
"home",
|
||||
"Accueil",
|
||||
"Section d'accueil",
|
||||
"Header"
|
||||
],
|
||||
"supports": {
|
||||
"align": [
|
||||
"full"
|
||||
]
|
||||
},
|
||||
"acf": {
|
||||
"mode": "auto",
|
||||
"renderTemplate": "demarches-administratives.php"
|
||||
},
|
||||
"align": "full"
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
#block-demarches-administratives {
|
||||
&.card-large-content-container--has-illustration {
|
||||
@apply pt-64;
|
||||
}
|
||||
|
||||
.card-large-content--has-illustration {
|
||||
@apply pt-28;
|
||||
}
|
||||
.card-large-content__top-illustration {
|
||||
transform: translate(-50%, -70%);
|
||||
}
|
||||
.card-large-content__links-container {
|
||||
@apply grid-cols-1
|
||||
md:grid-cols-2
|
||||
lg:grid-cols-4
|
||||
gap-x-12;
|
||||
.card-large-content__link {
|
||||
/* @apply flex flex-col; */
|
||||
.cta {
|
||||
@apply self-end px-6 w-full text-center md:w-fit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<?php
|
||||
$block_titling = get_field('block_titling_description_datas');
|
||||
$demarches_administratives_links = get_field('demarches_administratives_links');
|
||||
|
||||
// echo '<pre>';
|
||||
// print_r($demarches_administratives_links);
|
||||
// echo '</pre>';
|
||||
|
||||
?>
|
||||
|
||||
|
||||
<section id="block-demarches-administratives" class="card-large-content-container card-large-content-container--has-illustration">
|
||||
|
||||
<div class="card-large-content card-large-content--has-illustration">
|
||||
<img class="card-large-content__top-illustration" src='<?php echo get_template_directory_uri() ?>/resources/img/illustrations/illustration-que-fait-homegrade-pour-vous.svg' alt=''>
|
||||
<div class="section_titling">
|
||||
<h2 class="section_titling__title"><?php echo $block_titling['title'] ?></h2>
|
||||
<p class="section_titling__subtitle"><?php echo $block_titling['subtitle'] ?></p>
|
||||
<p class="section_titling__description"><?php echo $block_titling['description'] ?></p>
|
||||
</div>
|
||||
<div class="card-large-content__links-container">
|
||||
<?php foreach ($demarches_administratives_links as $link_datas) : ?>
|
||||
<?php
|
||||
$linked_page = $link_datas['linked_page'];
|
||||
$page_icon = get_field('page_icon', $linked_page->ID);
|
||||
?>
|
||||
<div class="card-large-content__link">
|
||||
<?php
|
||||
// echo '<pre>';
|
||||
// print_r($link);
|
||||
// print_r($linked_page);
|
||||
// print_r($page_icon);
|
||||
// echo '</pre>';
|
||||
?>
|
||||
<img class="card-large-content__link__page_icon" src="<?php echo $page_icon['url'] ?>" alt="">
|
||||
<h3 class="card-large-content__link__title"><?php echo $linked_page->post_title ?></h3>
|
||||
<p class="card-large-content__link__excerpt"><?php echo $linked_page->post_excerpt ?></p>
|
||||
|
||||
<a class="cta cta--button cta--shadowed" href="<?php echo get_permalink($linked_page->ID) ?>"><?php echo $link_datas['button_text'] ?></a>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
{
|
||||
"name": "acf/home-header",
|
||||
"title": "Section d'accueil",
|
||||
"category": "homegrade-page-home",
|
||||
"multiple": false,
|
||||
"icon": {
|
||||
"foreground": "#DF1E1E",
|
||||
"src": "schedule"
|
||||
},
|
||||
"keywords": [
|
||||
"Couverture",
|
||||
"home",
|
||||
"Accueil",
|
||||
"Section d'accueil",
|
||||
"Header"
|
||||
],
|
||||
"supports": {
|
||||
"align": [
|
||||
"full"
|
||||
]
|
||||
},
|
||||
"acf": {
|
||||
"mode": "auto",
|
||||
"renderTemplate": "home-header.php"
|
||||
},
|
||||
"align": "full"
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
.home-header {
|
||||
@apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20
|
||||
mb-24;
|
||||
isolation: isolate;
|
||||
|
||||
/* relative */
|
||||
/* bg-red-100 */
|
||||
/* aspect-ratio: 1.5; */
|
||||
|
||||
/* min-height: 80vh; */
|
||||
/* background-color: #fbfff5a6; */
|
||||
&__titling {
|
||||
@apply max-w-[580px]
|
||||
relative
|
||||
z-10
|
||||
lg:absolute
|
||||
mb-[-100px]
|
||||
lg:mb-0;
|
||||
}
|
||||
&__title {
|
||||
@apply text-3xl md:text-4xl font-medium pb-6 pt-16;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__scroll-down-indicator {
|
||||
@apply bg-primary rounded-full flex justify-center items-center mt-6;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
&__arrow {
|
||||
animation: bouncingArrow 1s infinite alternate cubic-bezier(0.01, 0.61, 0.67, 0.99);
|
||||
/* cubic-bezier(0.01, 0.61, 0.39, 1); */
|
||||
/* cubic-bezier(0.18, 0.89, 0.3, 1); */
|
||||
}
|
||||
}
|
||||
|
||||
&__fresque {
|
||||
@apply w-full;
|
||||
z-index: -1;
|
||||
@apply bg-purple-50;
|
||||
img {
|
||||
@apply w-full h-full max-h-full object-contain;
|
||||
/* object-position: 100% 100%; */
|
||||
@screen lg {
|
||||
/* object-position: 100% 0%; */
|
||||
}
|
||||
}
|
||||
@media (max-aspect-ratio: 16 / 9) {
|
||||
img {
|
||||
/* @apply bg-red-100; */
|
||||
}
|
||||
}
|
||||
@media (min-aspect-ratio: 16 / 9) {
|
||||
img {
|
||||
/* @apply bg-green-100; */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes bouncingArrow {
|
||||
0% {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<?php
|
||||
$home_header = get_field('home_header_datas');
|
||||
|
||||
?>
|
||||
|
||||
|
||||
<section class="home-header header_top">
|
||||
<div class="home-header__titling">
|
||||
<h1 class="home-header__title">
|
||||
<?php echo $home_header['title'] ?>
|
||||
</h1>
|
||||
<p><?php echo $home_header['description'] ?></p>
|
||||
<a class="home-header__scroll-down-indicator" href="#section-show-thematiques">
|
||||
<img class="home-header__scroll-down-indicator__arrow" src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/arrow-down-white.svg' alt=''>
|
||||
</a>
|
||||
</div>
|
||||
<div class="home-header__fresque">
|
||||
<img src="<?php echo get_template_directory_uri() . '/resources/img/illustrations/illustration-accueil-thematiques.jpg' ?>" alt="">
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"name": "acf/latest-news",
|
||||
"title": "Dernières News",
|
||||
"category": "homegrade-page-home",
|
||||
"multiple": false,
|
||||
"icon": {
|
||||
"foreground": "#DF1E1E",
|
||||
"src": "welcome-widgets-menus"
|
||||
},
|
||||
"keywords": [
|
||||
"News",
|
||||
"dernières",
|
||||
"actus",
|
||||
"latest"
|
||||
],
|
||||
"acf": {
|
||||
"mode": "auto",
|
||||
"renderTemplate": "latest-news.php"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.section_latest_news {
|
||||
@apply py-24;
|
||||
.section_titling {
|
||||
@apply max-w-md mx-auto;
|
||||
}
|
||||
.articles_container {
|
||||
@apply grid
|
||||
grid-cols-1
|
||||
sm:grid-cols-2
|
||||
xl:grid-cols-4
|
||||
max-w-screen-2xl
|
||||
px-8
|
||||
py-16
|
||||
gap-8
|
||||
mx-auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<?php
|
||||
$block_titling_datas = get_field('block_titling_datas');
|
||||
?>
|
||||
|
||||
<section class="section_latest_news">
|
||||
<div class="section_titling">
|
||||
<h2 class="section_titling__title"><?php echo $block_titling_datas['title'] ?></h2>
|
||||
<p class="section_titling__subtitle"><?php echo $block_titling_datas['subtitle'] ?></p>
|
||||
</div>
|
||||
|
||||
<div class="articles_container">
|
||||
<?php
|
||||
|
||||
$args = array(
|
||||
'posts_per_page' => 4,
|
||||
'post_type' => 'post',
|
||||
'orderby' => 'post_date',
|
||||
'order' => 'DESC',
|
||||
'post_status' => 'publish' // Show only the published posts
|
||||
);
|
||||
$recentNewsPosts = new WP_Query($args);
|
||||
|
||||
// echo '<pre>';
|
||||
// print_r($recentNewsPosts);
|
||||
// echo '</pre>';
|
||||
|
||||
?>
|
||||
|
||||
<?php if ($recentNewsPosts->have_posts()) : while ($recentNewsPosts->have_posts()) : $recentNewsPosts->the_post(); ?>
|
||||
<?php
|
||||
$post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail'));
|
||||
$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_thumbnail' => $post_thumbnail,
|
||||
'news_type' => $news_type,
|
||||
'post_date' => $post_date,
|
||||
)
|
||||
);
|
||||
?>
|
||||
<?php endwhile ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<?php
|
||||
$args = array(
|
||||
'meta_key' => '_wp_page_template',
|
||||
'meta_value' => "template-archive-news.php"
|
||||
);
|
||||
$relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null;
|
||||
?>
|
||||
<a id="see-all-news" class="cta cta--button cta--outline cta--button cta--centered cta--see-all" href="<?php echo get_the_permalink($relatedPageTemplatePage) ?>">
|
||||
<?php echo __("Lire les autres articles", "homegrade-theme__texte-fonctionnel__publications-archive-brochures") ?>
|
||||
</a>
|
||||
|
||||
|
||||
</section>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"name": "acf/questions-frequentes",
|
||||
"title": "Questions Fréquentes",
|
||||
"category": "homegrade-page-home",
|
||||
"multiple": false,
|
||||
"icon": {
|
||||
"foreground": "#DF1E1E",
|
||||
"src": "schedule"
|
||||
},
|
||||
"keywords": [
|
||||
"Questions Fréquentes"
|
||||
],
|
||||
"acf": {
|
||||
"mode": "auto",
|
||||
"renderTemplate": "questions-frequentes.php"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
#block-questions-frequentes {
|
||||
@apply py-28 px-8;
|
||||
}
|
||||
|
||||
.questions-frequentes-grid {
|
||||
@apply grid md:grid-cols-2 lg:grid-cols-3 gap-8 gap-x-8 max-w-screen-xl mx-auto;
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<?php
|
||||
$block_titling = get_field('block_titling_description_datas');
|
||||
|
||||
if (!function_exists('get_automatic_post')) {
|
||||
function get_automatic_post($post_thematique)
|
||||
{
|
||||
$automatic_query_args = array(
|
||||
'post_per_page' => 1,
|
||||
'post_status' => 'publish',
|
||||
'post_type' => 'questions',
|
||||
'include_children' => true,
|
||||
'tax_query' => array(
|
||||
array(
|
||||
'taxonomy' => 'thematiques',
|
||||
'field' => 'slug',
|
||||
'terms' => $post_thematique->slug,
|
||||
'include_children' => true,
|
||||
)
|
||||
)
|
||||
|
||||
);
|
||||
$posts = new WP_Query($automatic_query_args);
|
||||
return $posts->posts[0] ?? null;
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<section id="block-questions-frequentes">
|
||||
<div class="section_titling">
|
||||
<h2 class="section_titling__title"><?php echo __("Les questions les plus fréquentes", 'homegrade-theme__texte-fonctionnel') ?></h2>
|
||||
<p class="section_titling__subtitle"><?php echo __("Simplifions votre recherche !", 'homegrade-theme__texte-fonctionnel') ?></p>
|
||||
</div>
|
||||
<div class="questions-frequentes-grid">
|
||||
<?php
|
||||
$thematique_terms = get_terms(array(
|
||||
'taxonomy' => 'thematiques',
|
||||
'hide_empty' => false,
|
||||
'parent' => 0
|
||||
));
|
||||
|
||||
foreach ($thematique_terms as $key => $thematique) {
|
||||
if (
|
||||
$thematique->slug === "renovation-circulaire"
|
||||
|| $thematique->slug === "circulaire-renovatie"
|
||||
|| $thematique->slug === "au-quotidien"
|
||||
|| $thematique->slug === "dagelijks"
|
||||
|| $thematique->slug === "aides-financieres"
|
||||
|| $thematique->slug === "financiele-steun"
|
||||
) continue;
|
||||
|
||||
// $thematique_datas = get_term_by('slug', $thematique->slug, 'thematiques');
|
||||
|
||||
$manual_data = get_field($thematique->slug . '_manual_data');
|
||||
$post_datas = $manual_data ? $manual_data : get_automatic_post($thematique);
|
||||
|
||||
get_template_part(
|
||||
'template-components/cards/card-frequent-question',
|
||||
null,
|
||||
array(
|
||||
'thematique' => $thematique,
|
||||
'post_ID' => $post_datas->ID,
|
||||
'post_title' => $post_datas->post_title,
|
||||
'post_excerpt' => $post_datas->post_excerpt,
|
||||
// 'post_url' => $post_datas->post_excerpt,
|
||||
)
|
||||
);
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
{
|
||||
"name": "acf/show-thematiques",
|
||||
"title": "Thématiques",
|
||||
"category": "homegrade-page-home",
|
||||
"multiple": false,
|
||||
"icon": {
|
||||
"foreground": "#DF1E1E",
|
||||
"src": "schedule"
|
||||
},
|
||||
"keywords": [
|
||||
"Thématiques"
|
||||
],
|
||||
"acf": {
|
||||
"mode": "auto",
|
||||
"renderTemplate": "show-thematiques.php"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
.swiper-content {
|
||||
@apply lg:px-24 relative max-w-screen-2xl mx-auto;
|
||||
/* @apply bg-fuchsia-100; */
|
||||
}
|
||||
.swiper-container {
|
||||
height: auto;
|
||||
@apply px-3 overflow-hidden;
|
||||
/* @apply bg-yellow-50; */
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
@apply pt-24 pb-16 w-full flex-col lg:flex-row gap-y-20;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
@apply h-auto;
|
||||
.card-thematique {
|
||||
@apply h-full;
|
||||
}
|
||||
}
|
||||
|
||||
.thematique-button-next,
|
||||
.thematique-button-prev {
|
||||
@apply absolute top-1/2 z-50 opacity-80 hidden lg:block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply opacity-100;
|
||||
filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%)
|
||||
contrast(117%);
|
||||
}
|
||||
&:focus {
|
||||
@apply rounded-full;
|
||||
}
|
||||
}
|
||||
.thematique-button-next {
|
||||
@apply right-0 transform;
|
||||
}
|
||||
.thematique-button-prev {
|
||||
@apply left-0;
|
||||
}
|
||||
.swiper-pagination {
|
||||
@apply hidden lg:block;
|
||||
}
|
||||
.swiper-pagination-bullet {
|
||||
@apply w-3 h-3 mx-2 opacity-100 bg-white !border-2 !border-solid border-black opacity-80;
|
||||
}
|
||||
.swiper-pagination-bullet:focus {
|
||||
outline-offset: 4px;
|
||||
}
|
||||
.swiper-pagination-bullet-active {
|
||||
@apply bg-secondary !border-secondary opacity-100;
|
||||
}
|
||||
|
||||
/* .swiper-slide {
|
||||
background-color: red !important;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
} */
|
||||
.section-show-thematiques {
|
||||
@apply pt-8 pb-8 px-8 md:px-16;
|
||||
.thematiques-container {
|
||||
@apply grid
|
||||
grid-cols-3
|
||||
gap-8
|
||||
gap-y-32
|
||||
max-w-screen-xl
|
||||
mx-auto
|
||||
pt-16;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
const cardThematiques = document.querySelectorAll('.swiper-slide .card-thematique');
|
||||
|
||||
function swiperCheckBreakpoints() {
|
||||
const hasSwiper = thematiquesSwiper.__swiper__ === true;
|
||||
|
||||
if (window.innerWidth < 960 && hasSwiper) {
|
||||
thematiquesSwiper.destroy(true, true);
|
||||
}
|
||||
if (window.innerWidth >= 960 && !hasSwiper) {
|
||||
initiateSwiper();
|
||||
}
|
||||
}
|
||||
|
||||
function initiateSwiper() {
|
||||
thematiquesSwiper = new Swiper('.swiper-container', {
|
||||
grabCursor: false,
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
a11y: {
|
||||
enabled: true,
|
||||
prevSlideMessage: textTranslations.previousSlide,
|
||||
nextSlideMessage: textTranslations.nextSlide,
|
||||
slideRole: '',
|
||||
slideLabelMessage: textTranslations.slideLabel,
|
||||
},
|
||||
// loop: true,
|
||||
// centeredSlides: true,
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.thematique-button-next',
|
||||
prevEl: '.thematique-button-prev',
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
renderBullet: function (index, className) {
|
||||
const ariaLabel = cardThematiques[index].getAttribute('data-taxonomy');
|
||||
|
||||
// return `<button class="${className}" aria-label="${ariaLabel}"></button>`;
|
||||
return `<div class="${className}" test tabindex="-1" aria-label="Aller à la slide ${index}"></div>`;
|
||||
},
|
||||
},
|
||||
breakpoints: {
|
||||
// when window width is >= 320px
|
||||
|
||||
// when window width is >= 480px
|
||||
320: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
// when window width is >= 640px
|
||||
1100: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
},
|
||||
// a11y: false,
|
||||
});
|
||||
}
|
||||
initiateSwiper();
|
||||
swiperCheckBreakpoints();
|
||||
|
||||
window.addEventListener('resize', swiperCheckBreakpoints);
|
||||
});
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<?php
|
||||
$block_titling_datas = get_field('block_titling_datas');
|
||||
|
||||
|
||||
$terms = get_terms(array(
|
||||
'taxonomy' => 'thematiques',
|
||||
'parent' => 0,
|
||||
'hide_empty' => false,
|
||||
));
|
||||
|
||||
?>
|
||||
|
||||
<section id="section-show-thematiques" class="section-show-thematiques">
|
||||
|
||||
<div class="section_titling">
|
||||
<h2 class="section_titling__title"><?php echo $block_titling_datas['title'] ?></h2>
|
||||
<p class="section_titling__subtitle"><?php echo $block_titling_datas['subtitle'] ?></p>
|
||||
</div>
|
||||
|
||||
<div class="swiper-content">
|
||||
<button class="thematique-button-prev" aria-label="Thématique précédente">
|
||||
<img src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/slider-next-left.svg' alt=''>
|
||||
</button>
|
||||
|
||||
|
||||
<!-- Slider main container -->
|
||||
<div class="swiper-container">
|
||||
<!-- If we need pagination -->
|
||||
|
||||
|
||||
<!-- Additional required wrapper -->
|
||||
<div class="swiper-wrapper">
|
||||
<!-- Slides -->
|
||||
<!-- <div class="swiper-slide">Slide 1</div>
|
||||
<div class="swiper-slide">Slide 2</div>
|
||||
<div class="swiper-slide">Slide 3</div> -->
|
||||
|
||||
<?php foreach ($terms as $term) : ?>
|
||||
<?php if (
|
||||
$term->slug === "renovation-circulaire"
|
||||
|| $term->slug === "circulaire-renovatie"
|
||||
|| $term->slug === "au-quotidien"
|
||||
|| $term->slug === "dagelijks"
|
||||
|| $term->slug === "aides-financieres"
|
||||
|| $term->slug === "financiele-steun"
|
||||
|
||||
) continue; ?>
|
||||
<div class="swiper-slide">
|
||||
<?php
|
||||
get_template_part(
|
||||
'template-components/cards/card-conseils-thematique',
|
||||
null,
|
||||
array(
|
||||
'thematique' => $term,
|
||||
)
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
||||
</div>
|
||||
<button class="thematique-button-next" aria-label="Thématique suivante">
|
||||
<img src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/slider-next-right.svg' alt=''>
|
||||
</button>
|
||||
<div class="swiper-pagination" tabindex="-1"></div>
|
||||
|
||||
|
||||
<!-- scrollbar -->
|
||||
<!-- <div class="swiper-scrollbar"></div> -->
|
||||
</div>
|
||||
<!-- If we need navigation buttons -->
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
Loading…
Reference in New Issue
Block a user