templates/bundles/BitBagSyliusCmsPlugin/Shop/FrequentlyAskedQuestion/index.html.twig line 1

Open in your IDE?
  1. {% extends '@SyliusShop/layout.html.twig' %}
  3. {% import '@SyliusUi/Macro/messages.html.twig' as messages %}
  5. {% block banner %}
  6.     {{ render(url('odiseo_sylius_banner_plugin_shop_partial_banner', {'template': '@SyliusShop/Banner/_banner-faq.html.twig'})) }}
  7. {% endblock %}
  9. {% block content %}
  10.     <div class="container">
  11.         <div id="bitbag-faqs" class="faq">
  12.             {% if sections|length > 0 %}
  13.                 {% for section in sections %}
  14.                     <h2 class="faq__category" data-aos="fade-up">{{ section.name }}</h2>
  16.                     {# if section.description is not null #}
  17.                         {#<div class="faq__description"></div>#}
  18.                     {# endif #}
  20.                     {% if section.frequentlyAskedQuestions|length > 0 %}
  21.                         <div class="faq__items">
  22.                             {% for frequentlyAskedQuestion in section.frequentlyAskedQuestions %}
  23.                                 <div class="faq__item" data-aos="fade-up">
  24.                                     {% include '@BitBagSyliusCmsPlugin/Shop/FrequentlyAskedQuestion/Index/_show.html.twig' %}
  25.                                 </div>
  26.                                 {% if loop.index == (loop.length/2)|round %}
  27.                                     <div class="break" style="break-after: column;"></div>
  28.                                 {% endif %}
  29.                             {% endfor %}
  30.                         </div>
  31.                     {% else %}
  32.                         {{ messages.info('sylius.ui.no_results_to_display') }}
  33.                     {% endif %}
  34.                 {% endfor %}
  35.             {% else %}
  36.                 {{ messages.info('sylius.ui.no_results_to_display') }}
  37.             {% endif %}
  38.         </div>
  39.         <div class="citation" data-aos="fade-up">
  40.             <div class="container">
  41.                 <!-- @TODO Hardcoded content -->
  42.                 <p>{{ 'sylius.faq.cant_find_answer'|trans|raw }}</p>
  43.                 <a class="button button--secondary button--medium" href="{{ bitbag_cms_get_link_for_code('contact') }}" title="{{ 'sylius.faq.contact_us'|trans|e('html_attr') }}">{{ 'sylius.faq.information_inquiry'|trans }}</a>
  44.             </div>
  45.         </div>
  46.     </div>
  48.     <!-- ============================= RESULTATS RECHERCHE ============================= -->
  49.     <!-- Page Resultats recherche -->
  51.     <div class="search-results" style="display: none;">
  52.         <div class="container">
  53.              <!-- @TODO - Insérer fil d'ariane ici -->
  54.             <h1 class="page__title">
  55.                 <span class="page__tagline">Votre recherche</span>
  56.                 résultats de recherche
  57.             </h1>
  58.             <h3 class="header-underline">Résultats de recherche : «terme» <span class="c-dark">(19)</span></h3>
  59.             <div class="search-results__items">
  60.                 <a href="#0" class="search-results__item" data-aos="fade-up">
  61.                     <img class="search-results__image" src="http://placehold.it/400x300?text=1" alt="">
  62.                     <div class="search-results__content">
  63.                         <span class="search-results__category">Actualités</span>
  64.                         <h2 class="search-results__title">Titre du résultat</h2>
  65.                         <div class="search-results__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe corrupti rerum exercitationem ullam debitis numquam amet, facere fugiat repudiandae ipsum error ab quibusdam hic tempore accusantium quaerat tempora laboriosam officiis.</div>
  66.                     </div>
  67.                 </a>
  68.                 <a href="#0" class="search-results__item" data-aos="fade-up">
  69.                     <img class="search-results__image" src="http://placehold.it/400x300?text=2" alt="">
  70.                     <div class="search-results__content">
  71.                         <span class="search-results__category">Produits</span>
  72.                         <h2 class="search-results__title">Titre du résultat</h2>
  73.                         <div class="search-results__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe corrupti</div>
  74.                     </div>
  75.                 </a>
  76.                 <a href="#0" class="search-results__item" data-aos="fade-up">
  77.                     <img class="search-results__image" src="http://placehold.it/400x300?text=3" alt="">
  78.                     <div class="search-results__content">
  79.                         <span class="search-results__category">Produits</span>
  80.                         <h2 class="search-results__title">Titre du résultat</h2>
  81.                         <div class="search-results__description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe corrupti rerum exercitationem ullam debitis numquam amet, facere fugiat repudiandae ipsum error ab quibusdam hic tempore accusantium quaeratrum exercitationem ullam debitis numquam amet, facere fugiat repudiandae ipsum error ab quibusdam hic tempore accusantium quaeratrum exercitationem ullam debitis numquam amet, facere fugiat repudiandae ipsum error ab quibusdam hic tempore accusantium quaerat tempora laboriosam officiis.</div>
  82.                     </div>
  83.                 </a>
  84.             </div>
  85.         </div>
  86.         <div class="citation" data-aos="fade-up">
  87.             <div class="container">
  88.                 <p>    «&nbsp;Découvrez la boutique en ligne de la Maison Mons<br> Fromagers & Affineurs depuis 1&nbsp;»</p>
  89.                 <a href="#0" class="button button--secondary">Acheter maintenant</a>
  90.             </div>
  91.         </div>
  92.     </div>
  94.     {% if resources|length > 0 %}
  95.         <script type="application/ld+json">
  96.         {
  97.           "@context": "https://schema.org",
  98.           "@type": "FAQPage",
  99.           "mainEntity": [
  100.             {% for frequentlyAskedQuestion in resources %}
  101.                 {
  102.                     "@type": "Question",
  103.                     "name": "{{ frequentlyAskedQuestion.question }}",
  104.                     "acceptedAnswer": {
  105.                         "@type": "Answer",
  106.                         "text": "{{ frequentlyAskedQuestion.answer|striptags|escape }}"
  107.                     }
  108.                 }{% if not loop.last %},{% endif %}
  109.             {% endfor %}
  110.           ]
  111.         }
  112.         </script>
  113.     {% endif %}
  114.     <script type="text/javascript">
  115.         const faqItemsTitles = document.querySelectorAll('.faq__title')
  116.         faqItemsTitles.forEach((item) => {
  117.             item.addEventListener("click", (e) => {
  118.                 e.target.parentElement.classList.toggle('is-active');
  119.             });
  120.         });
  121.     </script>
  122. {% endblock %}