templates/vitrine/pages/faq.html.twig line 1

Open in your IDE?
  1. {% extends 'vitrine/base.html.twig' %}
  2. {% import 'vitrine/macros/svg_illustration_macros.twig' as svg %}
  4. {% block title "FAQ" %}
  5. {% block description %}{% trans %}Découvrez tout l'univers du spa à la bière{% endtrans %}{% endblock %}
  7. {% block main %}
  8.     <section class="max-w-none relative h-max pt-28 overflow-hidden -z-50">
  9.         <div class="w-full h-[70vh] md:top-28 top-24 inset-0 z-0">
  10.             <img src="{{asset('/vitrine/images/heros/faq.jpg')}}" class="w-full h-full object-cover">
  11.             <div class="absolute w-full h-full top-0 pt-28 left-0 flex justify-center items-end">
  12.                 <div class="h-full p-4 mb-3 flex justify-center items-center flex-col gap-8">
  13.                     <p class="font-semibold text-7xl text-white">
  14.                         FAQ
  15.                     </p>
  16.                 </div>
  17.             </div>
  18.         </div>
  19.     </section>
  20.     
  21.     <div class="w-full flexcol items-center z-10 relative ">
  22.         {# Section FAQ #}
  23.         <section class="w-screen overflow-visible flexcol gap-10 md:gap-20 md:mt-0 mt-8">
  24.             <div class="flexcol">
  25.                 <h2>
  26.                     FAQ
  27.                 </h2>
  28.                 <h1 class="h-max md:text-6xl text-4xl font-thin font-openSans text-vitrineWhiteOpacity">
  29.                     {% trans %}Foire aux <span class="font-bold">questions</span>{% endtrans %}
  30.                 </h1>
  31.             </div>
  32.             <div class="w-full hidden md:flex justify-end relative">
  33.                 <input class="search bg-vitrineBlackOpacity border-none outline-none focus:outline-none px-4 py-4 w-[calc(50%-8px)]" type="text" placeholder="{% trans %}Écrivez votre question ici...{% endtrans %}">
  34.                 <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-vitrineWhiteOpacity" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  35.                     <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
  36.                 </svg>
  37.             </div>
  38.             <div class="flex flex-col md:flex-row gap-10 md:gap-4">
  39.                 <div class="flexcol md:w-1/2">
  40.                     <div class="h-full relative">
  41.                         <div class="sticky top-32">
  42.                             <ul class="flexcol text-2xl pl-10 relative">
  43.                                 {% for category, items in faqData %}
  44.                                     <li class="flex items-center gap-4 relative">
  45.                                         <img class="ul-bulle hidden absolute top-1/2 -translate-y-1/2 -left-10 transition duration-700" src="{{asset('vitrine/images/bulles/moyenne-bulle.svg')}}" alt="Illustration bulle" aria-hidden="true">
  46.                                         <a href="#" class="category-link" data-category="{{ category | lower | replace({' ': '-'}) }}">
  47.                                             {{ category|trans }}
  48.                                         </a>
  49.                                     </li>
  50.                                 {% endfor %}
  51.                             </ul>
  52.                             <div class="h-[70dvh] md:block hidden -z-10 relative overflow-hidden">
  53.                                 {{ svg.illustration('faq', true) }}
  54.                             </div>
  55.                         </div>
  56.                     </div>
  57.                 </div>
  58.                 <div class="w-full md:hidden flex justify-end relative">
  59.                     <input class="search bg-vitrineBlackOpacity border-none outline-none focus:outline-none px-4 py-4 w-full" type="text" placeholder="{% trans %}Écrivez votre question ici...{% endtrans %}">
  60.                     <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-vitrineWhiteOpacity" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  61.                         <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
  62.                     </svg>
  63.                 </div>
  64.                 <div class="flexcol gap-8 md:w-1/2 flexcol">
  65.                     {% for category, items in faqData %}
  66.                         <div id="{{ category | lower | replace({' ': '-'}) }}" class="faq-category flexcol">
  67.                             {% for item in items %}
  68.                                 <div class="flexcol toggle-response cursor-pointer bg-vitrineBlackOpacity p-4 pr-10 relative">
  69.                                     <svg class="toggle-response-svg  absolute top-4 right-4 w-5 h-5 text-vitrineOrange rotate-45 z-20 transition duration-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
  70.                                         <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
  71.                                     </svg>
  72.                                     <h3 class="text-wrap">
  73.                                         {{ item.question|trans }}
  74.                                     </h3>
  75.                                     <p class="hidden response">
  76.                                         {{ item.response|trans }}
  77.                                     </p>
  78.                                 </div>
  79.                             {% endfor %}
  80.                         </div>
  81.                     {% endfor %}
  82.                 </div>
  83.             </div>
  84.         </section>
  85.         {% include "vitrine/layout/footer.html.twig" %}
  86.         
  87.     </div>
  88.     <script>
  89.         document.addEventListener("DOMContentLoaded", function() {
  90.             const categories = document.querySelectorAll('.faq-category');
  91.             const links = document.querySelectorAll('.category-link');
  92.             const bulleImages = document.querySelectorAll('.ul-bulle');
  93.             const searchInputs = document.querySelectorAll('.search'); // Sélectionne toutes les barres de recherche
  94.         
  95.             // Afficher les catégories
  96.             function displayCategories(selectedCategory) {
  97.                 links.forEach((link, linkIndex) => {
  98.                     link.classList.remove('text-vitrineOrange');
  99.                     link.classList.remove('font-semibold');
  100.                     bulleImages[linkIndex].classList.add('hidden'); // Initialise toutes les bulles à hidden
  101.                 });
  102.         
  103.                 categories.forEach(category => category.style.display = 'none'); // Cache toutes les catégories
  104.         
  105.                 if (selectedCategory === 'tout') {
  106.                     categories.forEach(category => {
  107.                         category.style.display = 'flex';
  108.                         if (category.id === 'tout') {
  109.                             category.style.display = 'none'; // Cache la catégorie "tout" dans tout les cas opur éciter un décalage dans l'affichage
  110.                         }
  111.                     });
  112.                 } else {
  113.                     document.getElementById(selectedCategory).style.display = 'flex'; // Affiche la catégorie sélectionnée
  114.                 }
  115.         
  116.                 const activeLink = document.querySelector(`[data-category="${selectedCategory}"]`); // Récupère le lien actif
  117.                 const activeLinkIndex = Array.from(links).indexOf(activeLink);  // Récupère l'index du lien actif
  118.         
  119.                 activeLink.classList.add('text-vitrineOrange');
  120.                 activeLink.classList.add('font-semibold');
  121.                 bulleImages[activeLinkIndex].classList.remove('hidden'); // Affiche la bulle pour la catégorie sélectionnée
  122.             }
  123.         
  124.             // Recherche
  125.             searchInputs.forEach(input => {
  126.                 input.addEventListener('input', function() {
  127.                     const searchValue = this.value.toLowerCase();
  128.         
  129.                     categories.forEach(category => {
  130.                         const questions = category.querySelectorAll('h3');
  131.                         const responses = category.querySelectorAll('.response');
  132.                         let categoryHasMatch = false; // Vérifie si la catégorie a une correspondance
  133.         
  134.                         questions.forEach((question, questionIndex) => {
  135.                             const questionText = question.textContent.toLowerCase();
  136.                             const responseText = responses[questionIndex].textContent.toLowerCase();
  137.                             if (questionText.includes(searchValue) || responseText.includes(searchValue)) { // Vérifie si la question ou la réponse contient la recherche
  138.                                 question.parentElement.style.display = 'flex';
  139.                                 categoryHasMatch = true; // La catégorie a une correspondance
  140.                             } else {
  141.                                 question.parentElement.style.display = 'none';
  142.                             }
  143.                         });
  144.         
  145.                         if (searchValue === '') {
  146.                             category.style.display = 'flex';
  147.                             questions.forEach(question => {
  148.                                 question.parentElement.style.display = 'flex';
  149.                             });
  150.                         } else {
  151.                             category.style.display = categoryHasMatch ? 'flex' : 'none'; // Affiche la catégorie si elle a une correspondance
  152.                         }
  153.                     });
  154.                 });
  155.             });
  156.         
  157.             // Affiche la catégorie par défaut
  158.             const initialCategory = 'tout'; // Categorie par default
  159.             displayCategories(initialCategory);
  160.         
  161.             // L'événement click sur les liens
  162.             links.forEach(link => {
  163.                 link.addEventListener('click', function(event) {
  164.                     event.preventDefault();
  165.                     const selectedCategory = this.getAttribute('data-category');
  166.                     displayCategories(selectedCategory);
  167.                 });
  168.             });
  169.         
  170.             // Toggle response
  171.             const toggleResponseContainers = document.querySelectorAll('.toggle-response');
  172.         
  173.             toggleResponseContainers.forEach(responseContainer => {
  174.                 responseContainer.addEventListener('click', function() {
  175.                     const response = this.querySelector('.response');
  176.                     const svg = this.querySelector('.toggle-response-svg');
  177.                     response.classList.toggle('hidden');
  178.         
  179.                     svg.classList.toggle('rotate-0');
  180.                     svg.classList.toggle('text-vitrineWhiteOpacity');
  181.                 });
  182.             });
  183.         });
  184.     </script>
  185. {% endblock %}