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 <?php
$theme_namespace = 'homegrade-theme__texte-fonctionnel';
function getThematiqueFamilySlug($thematique_slug) function getThematiqueFamilySlug($thematique_slug)
{ {
if (!$thematique_slug) { if (!$thematique_slug) {

View File

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

View File

@ -8,7 +8,28 @@ body {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
summary {
margin: 10px; details {
/* display: inline-block; */ @apply bg-white shadowed rounded-2xl mb-4 px-8 py-6;
summary {
@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'); /* PAGE FAQ */
$thematiqueColorSlug = getThematiqueFamilySlug($thematique_generale->slug); /************/
?>
<?php get_header(); ?>
$current_children_thematique = get_queried_object()->parent != 0 ? get_queried_object() : null; <?php
$currentThematique = get_queried_object();
$mainThematique = getMainThematique($currentThematique);
$args = array( $thematiqueColorSlug = getThematiqueFamilySlug($mainThematique->slug);
'posts_per_page' => 1, $sousThematiques = get_terms(array(
'post_type' => 'conseils', 'child_of' => $mainThematique->term_id,
'tax_query' => array( 'taxonomy' => 'thematiques',
array( 'hide_empty' => true,
'slug' => 'locations', ));
'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];
?> ?>
<nav class="breadcrumbs_navigation" aria-label="breadcrumbs"> <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> <ol>
<li><a href="<?php echo home_url() ?>">Home</a></li> <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_post_permalink($archiveQuestions) ?>"><?php echo $archiveQuestions->post_title ?></a></li>
<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> </li>
<?php if ($current_children_thematique) : ?> <?php if ($current_children_thematique) : ?>
<li> <li>
@ -47,24 +41,7 @@ $archiveQuestions = get_page_by_template('template-archive-questions.php')[0];
</ol> </ol>
</nav> </nav>
<div class="list_filters"> <div class="post-question-page <?php echo $thematiqueColorSlug ? "post-question-page--" . $mainThematique->slug : "" ?>"">
<?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>
<?php get_template_part( <?php get_template_part(
'template-components/posts-components/chapter-header', 'template-components/posts-components/chapter-header',
@ -72,52 +49,71 @@ $archiveQuestions = get_page_by_template('template-archive-questions.php')[0];
array( array(
'ID' => get_queried_object_id(), 'ID' => get_queried_object_id(),
'title' => __("Les questions les plus fréquentes sur ", "homegrade-theme__texte-fonctionnel__faq-archive-questions") . get_queried_object()->name, 'title' => __("Les questions les plus fréquentes sur ", "homegrade-theme__texte-fonctionnel__faq-archive-questions") . get_queried_object()->name,
'sub-title' => $thematique->name, 'sub-title' => $currentThematique->name,
'thematique' => $thematique, 'thematique' => $currentThematique,
'thematique_generale' => $thematique_generale, 'thematique_generale' => $mainThematique,
'thematiqueColorSlug' => $thematiqueColorSlug, '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>
<div class="post-question-page-container <?php echo $thematiqueColorSlug ? "post-question-page--" . $thematiqueColorSlug : "" ?>"">
<?php
$query_args = array( <ul class="thematiques_filters__list">
'post_type' => 'questions', <?php foreach ($sousThematiques as $sousThematique) : ?>
'posts_per_page' => -1, <li data-filter="<?php echo $sousThematique->slug ?>">
'tax_query' => array( <input type="checkbox" title="<?php echo $sousThematique->name ?>" name="veggy01" id="veggy01" />
array( <label for="veggy01"><?php echo $sousThematique->name ?></label></p>
'taxonomy' => 'thematiques',
'field' => 'term_id',
'terms' => $thematique_generale->term_id,
) <!-- <div role="checkbox" aria-checked="false" tabindex="0"><?php echo $sousThematique->name ?></div> -->
) </li>
); <?php endforeach; ?>
$questions = new WP_Query($query_args); </ul>
</div>
?>
<?php if ($questions->have_posts()) : while ($questions->have_posts()) : $questions->the_post(); ?>
<details class=" question">
<summary>
<?php the_title(); ?>
<!-- <h2><?php the_title(); ?></h2> -->
</summary>
<div class="content">
<?php the_content(); ?>
</div>
</details>
<?php endwhile ?>
<?php endif; ?> <?php endif; ?>
</div> <?php
$query_args = array(
'post_type' => 'questions',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'thematiques',
'field' => 'term_id',
'terms' => $mainThematique->term_id,
)
)
);
$relatedTaxQuestions = new WP_Query($query_args);
?>
<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(); ?>
<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 entry-content">
<?php the_content(); ?>
</div>
</details>
<?php endwhile ?>
<?php endif; ?>
</section>
</div> </div>
<?php <?php
get_footer(); get_footer();