templates/areas/faq-brick/view.html.twig line 1

Open in your IDE?
  1. {% set withContact = showContact | default('true') == 'true' %}
  2. {% set container = containerSize | default('container') %}
  4. {# Defined as EditableDialogBoxInterface field #}
  5. {% set faqObjects = faqObjects ?? pimcore_relations('frequently-asked-questions').getElements() %}
  7. {% embed 'app/area-brick-layout.html.twig' %}
  8.     {% block content %}
  9.         {% if editmode and faqObjects is empty %}
  10.             <div class="container text-center text-red">
  11.                 <h2>Nog geen vragen gekoppeld, dit brick is momenteel niet zichtbaar.</h2>
  12.             </div>
  13.         {% elseif faqObjects is not empty %}
  14.             <section class="delay-200">
  15.             <div class="{{ container }} {{ containerClass | default() }} flex flex-wrap py-10 md:py-20">
  16.                 <div class="w-full {% if withContact %} md:w-1/2 {% endif %}">
  17.                     {% if showAutoNotice ?? true %}
  18.                         {% include 'areas/faq-brick/partials/editmode/_no-objects-found.html.twig' %}
  19.                     {% endif %}
  23.                     {% if faqObjects is not empty %}
  24.                         <h2 class="mb-4 text-2xl md:mb-10 mb:text-3xl">{{ "Veelgestelde vragen"|trans }}</h2>
  25.                         {% for faq in faqObjects %}
  26.                             <div class="px-4 mb-2 bg-white rounded-md shadow md:px-6 md:mb-3" x-data="{ open: false }">
  27.                                 <div
  28.                                     class="flex items-center justify-between py-6 cursor-pointer"
  29.                                     @click="open = !open"
  30.                                 >
  31.                                     <h3 class="mb-0 text-lg leading-tight">{{ faq.question }}</h3>
  32.                                     <span
  33.                                         class="flex items-center justify-center w-8 h-8 transition-all duration-500 bg-blue-200 rounded-full shrink-0"
  34.                                         :class="{ 'rotate-180' : !open }"
  35.                                     >
  36.                                         <svg class="w-4 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 10">
  37.                                             <path fill="#0072BB" fill-rule="evenodd" d="M.39 7.64 7.12.676c.24-.248.575-.388.926-.388.35 0 .685.14.925.388l6.732 6.964a1.206 1.206 0 0 1-.068 1.748l-.114.09a1.297 1.297 0 0 1-1.669-.154L8.045 3.316 2.239 9.323a1.295 1.295 0 0 1-1.783.065A1.205 1.205 0 0 1 .389 7.64H.39Z"/>
  38.                                         </svg>
  39.                                     </span>
  40.                                 </div>
  41.                                 <div class="block overflow-hidden transition-all duration-700 max-h-0"
  42.                                     :style="open ? `max-height:  ${ $el.scrollHeight + 24 }px` : ``"
  43.                                     :class="{ 'pb-6' : open }"
  44.                                 >
  45.                                     <p>{{ faq.answer|raw }}</p>
  46.                                 </div>
  47.                             </div>
  48.                         {% endfor %}
  49.                     {% endif %}
  50.                 </div>
  51.                 {% if withContact == 'true' %}
  52.                 <div class="flex flex-col w-full mt-8 md:flex-row md:mt-0 md:w-1/2 lg:pl-36">
  53.                     {% include 'includes/partials/_contact-snippet.html.twig' %}
  54.                 </div>
  55.                 {% endif %}
  56.             </div>
  57.         </section>
  58.         {% endif %}
  59.     {% endblock %}
  60. {% endembed %}
  62. {% if faqObjects is not empty %}
  63.   <script type="application/ld+json">
  64.     {
  65.       "@context": "https://schema.org",
  66.       "@type": "FAQPage",
  67.       "mainEntity": [
  68.         {% for faq in faqObjects %}
  69.           {
  70.             "@type": "Question",
  71.             "name": "{{ faq.question }}",
  72.             "acceptedAnswer": {
  73.               "@type": "Answer",
  74.               "text": "{{ faq.answer | raw | escape }}"
  75.             }
  76.           }{% if not loop.last %},{% endif %}
  77.         {% endfor %}
  78.       ]
  79.     }
  80.   </script> 
  81. {% endif %}