templates/includes/shared/contact-widget.html.twig line 1

Open in your IDE?
  1. {% use 'includes/editmode-layout.html.twig' %}
  3. {{ block('editmode_header') }}
  5.     {% if editmode %}
  6.         Data voor het groene zwevende contactblokje rechtsonderin:
  7.         {{ pimcore_input('title', { placeholder: 'Titel' }) }}
  8.         {{ pimcore_input('subtitle', { placeholder: 'Subtitel' }) }}
  9.         {{ pimcore_input('phone', { placeholder: 'Telefoonnummer' }) }}
  10.         {{ pimcore_link('link') }}
  11.     {% else %}
  12.         <section
  13.             class="contact-widget"
  14.             x-data="{ show: false }"
  15.             :class="{ 'contact-widget--opened': show }"
  16.         >
  17.             <div class="contact-widget__top">
  18.                 <div 
  19.                     class="absolute flex items-center justify-center w-6 h-6 text-gray-400 right-4 top-4 " 
  20.                     @click="show = false"
  21.                 >
  22.                     <span class="block w-4 h-4">
  23.                         <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path fill="currentColor" d="M443.6 387.1 312.4 255.4l131.5-130c5.4-5.4 5.4-14.2 0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4-3.7 0-7.2 1.5-9.8 4L256 197.8 124.9 68.3c-2.6-2.6-6.1-4-9.8-4-3.7 0-7.2 1.5-9.8 4L68 105.9c-5.4 5.4-5.4 14.2 0 19.6l131.5 130L68.4 387.1c-2.6 2.6-4.1 6.1-4.1 9.8 0 3.7 1.4 7.2 4.1 9.8l37.4 37.6c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1L256 313.1l130.7 131.1c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1l37.4-37.6c2.6-2.6 4.1-6.1 4.1-9.8-.1-3.6-1.6-7.1-4.2-9.7z"/></svg>
  24.                     </span>
  25.                 </div>
  26.                 <div class="contact-widget__texts">
  27.                     <h4 class="mb-2 text-lg">{{ pimcore_input('title').data ?: ('Heeft u nog vragen?'|trans) }}</h4>
  28.                     <p class="text-gray-800">{{ pimcore_input('subtitle').data ?: ('Onze experts staan voor u klaar.'|trans) }}</p>
  29.                 </div>
  30.                 <div class="flex items-center">
  31.                     <div
  32.                         class="flex flex-row contact-widget__first-button"
  33.                         @click="show = !show"
  34.                     >
  35.                         <span class="contact-widget__icon">
  36.                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="currentColor" fill-rule="evenodd" d="m19.243 13.03-4-1a1.004 1.004 0 0 0-1.075.416l-2.56 3.84a17.084 17.084 0 0 1-7.894-7.894l3.84-2.56a1 1 0 0 0 .416-1.074l-1-4A1 1 0 0 0 6 0H1a1 1 0 0 0-1 1c.012 10.489 8.511 18.988 19 19a1 1 0 0 0 1-1v-5a1 1 0 0 0-.757-.97Z"/></svg>
  37.                         </span>
  38.                     </div>
  39.                     <a href="tel:{{ (pimcore_input('phone').data ?: pimcore_website_config('phone_number', null, request.locale)) | phone }}" class="font-bold hover:underline">
  40.                         {{ pimcore_input('phone').data ?: pimcore_website_config('phone_number', null, request.locale) }}
  41.                     </a>
  42.                 </div>
  43.             </div>
  44.             <span
  45.                 class="flex items-center cursor-pointer contact-widget__second-button rounded-bl-md bg-green hover:bg-green-400"
  46.                 @click="show = !show"
  47.             >
  48.                 <span class="text-white contact-widget__icon">
  49.                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17"><path fill="currentColor" fill-rule="evenodd" d="M2 14.5V6.04l7.594 3.375a.999.999 0 0 0 .812 0L18 6.039V14.5H2Zm16-12v1.35l-8 3.555-8-3.554V2.5h16Zm2 1.98V1.5a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V4.48Z"/></svg>
  50.                 </span>
  52.                 {{ pimcore_link('link', {
  53.                     class: ' flex flex-row font-bold text-white group',
  54.                     textPrefix: '',
  55.                     textSuffix: '
  56.                         <span class="flex items-center justify-center w-6 h-6 ml-3 bg-white rounded-full shadow-md text-blue group-hover:bg-blue group-hover:text-white">
  57.                                 <svg class="h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  58.                                     <path fill="currentColor" fill-rule="currentColor" d="m6.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L6.406.343A1.206 1.206 0 0 0 4.657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L10.731 8l-6.008 5.806a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"></path>
  59.                                 </svg>
  60.                             </span>',
  61.                     })
  62.                 }}
  63.             </span>
  64.         </section>
  65.     {% endif %}
  67. {{ block('editmode_footer') }}