refining and developping faq

This commit is contained in:
Antoine M 2023-10-11 14:34:03 +02:00
parent 5c1748482d
commit 6616c511da
6 changed files with 154 additions and 83 deletions

View File

@ -1,4 +1,5 @@
<?php
$theme_namespace = 'homegrade-theme__texte-fonctionnel';
function getThematiqueFamilySlug($thematique_slug)
{
if (!$thematique_slug) {

View File

@ -72,3 +72,4 @@
@import './pages/template-archive-conseils.css';
@import './pages/template-archive-questions.css';
@import './pages/single-conseils.css';
@import './pages/questions-thematiques-(faq).css';

View File

@ -8,7 +8,28 @@ body {
font-size: 20px;
font-weight: bold;
}
details {
@apply bg-white shadowed rounded-2xl mb-4 px-8 py-6;
summary {
margin: 10px;
/* display: inline-block; */
@apply font-bold list-none flex justify-between items-center cursor-pointer;
.open-close-icon {
transition: transform 0.3s ease-in-out;
transform: translate(0, 0%);
display: flex;
border: 2px solid black;
justify-content: center;
align-items: center;
border-radius: 50%;
height: 26px;
width: 26px;
}
}
.content {
@apply mt-4;
}
}
details[open] summary .open-close-icon {
transform: translate(0, 0%) rotate(180deg);
}

View File

@ -0,0 +1,49 @@
.post-question-page {
ul.checkboxes {
list-style: none;
margin: 0;
padding: 0;
padding-left: 1em;
}
ul.checkboxes li {
list-style: none;
margin: 1px;
padding: 0;
}
[role='checkbox'] {
display: inline-block;
padding: 4px 8px;
cursor: pointer;
}
[role='checkbox']::before {
position: relative;
top: 1px;
left: -4px;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' style='forced-color-adjust: auto;'%3E%3Crect x='2' y='2' height='13' width='13' rx='2' stroke='currentcolor' stroke-width='1' fill-opacity='0' /%3E%3C/svg%3E");
}
[role='checkbox'][aria-checked='true']::before {
position: relative;
top: 1px;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' style='forced-color-adjust: auto;'%3E%3Crect x='2' y='2' height='13' width='13' rx='2' stroke='currentcolor' stroke-width='1' fill-opacity='0' /%3E%3Cpolyline points='4,8 7,12 12,5' fill='none' stroke='currentcolor' stroke-width='2' /%3E%3C/svg%3E");
}
[role='checkbox']:focus,
[role='checkbox']:hover {
padding: 2px 6px;
border: 2px solid #005a9c;
border-radius: 5px;
background-color: #def;
}
[role='checkbox']:hover {
cursor: pointer;
}
&__accordeons-container {
@apply max-w-screen-lg mx-auto px-4 py-12;
}
}

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="11.668" height="7.885" viewBox="0 0 11.668 7.885">
<path id="Tracé_3614" data-name="Tracé 3614" d="M0,8.855,5.478,4.427,0,0" transform="translate(10.261 1.406) rotate(90)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>

After

Width:  |  Height:  |  Size: 322 B

View File

@ -1,42 +1,36 @@
<?php get_header();
<?php
$thematique = get_queried_object();
$thematique_generale = get_queried_object()->parent ? get_term(get_queried_object()->parent, 'thematiques') : get_term(get_queried_object(), 'thematiques');
$thematiqueColorSlug = getThematiqueFamilySlug($thematique_generale->slug);
/************/
/* PAGE FAQ */
/************/
?>
<?php get_header(); ?>
$current_children_thematique = get_queried_object()->parent != 0 ? get_queried_object() : null;
$args = array(
'posts_per_page' => 1,
'post_type' => 'conseils',
'tax_query' => array(
array(
'slug' => 'locations',
<?php
$currentThematique = get_queried_object();
$mainThematique = getMainThematique($currentThematique);
$thematiqueColorSlug = getThematiqueFamilySlug($mainThematique->slug);
$sousThematiques = get_terms(array(
'child_of' => $mainThematique->term_id,
'taxonomy' => 'thematiques',
'field' => 'slug',
'terms' => get_queried_object()->slug,
// 'include_children' => false,
)
)
);
$query_current_thematique_posts = new WP_Query($args);
$thematique_related_page = $query_current_thematique_posts->posts[0];
$archiveQuestions = get_page_by_template('template-archive-questions.php')[0];
'hide_empty' => true,
));
?>
<nav class="breadcrumbs_navigation" aria-label="breadcrumbs">
<?php
$current_children_thematique = get_queried_object()->parent != 0 ? get_queried_object() : null;
$archiveQuestions = get_page_by_template('template-archive-questions.php')[0];
?>
<ol>
<li><a href="<?php echo home_url() ?>">Home</a></li>
<li><a href="<?php echo get_post_permalink($archiveQuestions) ?>"><?php echo $archiveQuestions->post_title ?></a></li>
<li>
<a href="<?php echo get_term_link($thematique_generale) ?>" aria-current='location'><?php echo $thematique_generale->name ?></a>
<a href="<?php echo get_term_link($mainThematique) ?>" aria-current='location'><?php echo $mainThematique->name ?></a>
</li>
<?php if ($current_children_thematique) : ?>
<li>
@ -47,24 +41,7 @@ $archiveQuestions = get_page_by_template('template-archive-questions.php')[0];
</ol>
</nav>
<div class="list_filters">
<?php if ($thematique->parent) : ?>
<?php
$sousThematiques = get_terms(array(
'child_of' => $thematique_generale->term_id,
'taxonomy' => 'thematiques',
'hide_empty' => true,
));
?>
<?php foreach ($sousThematiques as $sousThematique) : ?>
<button data-filter="<?php echo $sousThematique->slug ?>"><?php echo $sousThematique->name ?></button>
<?php endforeach; ?>
<?php endif; ?>
</div>
<div class="post-question-page <?php echo $thematiqueColorSlug ? "post-question-page--" . $mainThematique->slug : "" ?>"">
<?php get_template_part(
'template-components/posts-components/chapter-header',
@ -72,17 +49,33 @@ $archiveQuestions = get_page_by_template('template-archive-questions.php')[0];
array(
'ID' => get_queried_object_id(),
'title' => __("Les questions les plus fréquentes sur ", "homegrade-theme__texte-fonctionnel__faq-archive-questions") . get_queried_object()->name,
'sub-title' => $thematique->name,
'thematique' => $thematique,
'thematique_generale' => $thematique_generale,
'sub-title' => $currentThematique->name,
'thematique' => $currentThematique,
'thematique_generale' => $mainThematique,
'thematiqueColorSlug' => $thematiqueColorSlug,
)
); ?>
<section class=" post-question-page__accordeons-container ">
<?php if ($mainThematique && $sousThematiques) : ?>
<div class=" thematiques_filters">
<h3><?php echo __("Filtrer par catégories", $theme_namespace) ?></h3>
<ul class="thematiques_filters__list">
<?php foreach ($sousThematiques as $sousThematique) : ?>
<li data-filter="<?php echo $sousThematique->slug ?>">
<input type="checkbox" title="<?php echo $sousThematique->name ?>" name="veggy01" id="veggy01" />
<label for="veggy01"><?php echo $sousThematique->name ?></label></p>
<!-- <div role="checkbox" aria-checked="false" tabindex="0"><?php echo $sousThematique->name ?></div> -->
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<div class="post-question-page-container <?php echo $thematiqueColorSlug ? "post-question-page--" . $thematiqueColorSlug : "" ?>"">
<?php
$query_args = array(
'post_type' => 'questions',
'posts_per_page' => -1,
@ -90,34 +83,37 @@ $archiveQuestions = get_page_by_template('template-archive-questions.php')[0];
array(
'taxonomy' => 'thematiques',
'field' => 'term_id',
'terms' => $thematique_generale->term_id,
'terms' => $mainThematique->term_id,
)
)
);
$questions = new WP_Query($query_args);
$relatedTaxQuestions = new WP_Query($query_args);
?>
<?php if ($questions->have_posts()) : while ($questions->have_posts()) : $questions->the_post(); ?>
<h2 aria-live=" polite"><?php echo __("Nombre de résultats", 'homegrade-theme__texte-fonctionnel') . " : " . count($relatedTaxQuestions->posts) ?></h2>
<?php if ($relatedTaxQuestions->have_posts()) : while ($relatedTaxQuestions->have_posts()) : $relatedTaxQuestions->the_post(); ?>
<details class=" question">
<summary>
<?php the_title(); ?>
<!-- <h2><?php the_title(); ?></h2> -->
<div class="open-close-icon">
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/chevron_down.svg' ?>" class="open-close-cta" alt="" />
</div>
</summary>
<div class="content">
<div class="content entry-content">
<?php the_content(); ?>
</div>
</details>
<?php endwhile ?>
<?php endif; ?>
</section>
</div>
</div>
<?php
get_footer();