templates/includes/blocks/calendly-form.html.twig line 1

  1. {% set contact = content.calendlyFormContact %}
  2. {% set socials = sulu_resolve_contact(contact.Id).socialMediaProfiles %}
  3. {% set widgetUniqueId = 'calendly_form_' ~ random(1000000000, 9999999999) %}
  4. {% for key, name in socials %}
  5.     {% if 'calendly' in name.username  %}
  6.         {% set calendlyLink = name.username %}
  7.         <div class="contact-form {{ content.top }} {{ content.bottom }}" data-widget-id="{{ widgetUniqueId }}" x-data="calendlyform(
  8.           '{{ calendlyLink }}', '{{ widgetUniqueId }}')" id="calendlyForm_{{ widgetUniqueId }}">
  9.             <div class="contact-form__container">
  10.                 <div class="contact-form__title" x-ref="title">
  11.                     {% if content.calendlyFormPagina %}
  12.                     {% if content.calendlyFormSeoHeadlinePagina %}<{{ content.calendlyFormSeoHeadlinePagina }}>{% endif %}
  13.                         <div class="pagina" >
  14.                             {{ content.calendlyFormPagina }}
  15.                         </div>
  16.                     {% if content.calendlyFormSeoHeadlinePagina %}</{{ content.calendlyFormSeoHeadlinePagina }}>{% endif %}
  17.                     {% endif %}
  18.                    <div {% if content.calendlyFormTitleMobile %} class="desktop-only"{% endif %}>
  19.                        {{ content.calendlyFormHeadline|raw }}
  20.                    </div>
  21.                 </div>
  22.                 {% if content.calendlyFormTitleMobile %}
  23.                     <div class="contact-form__title mobile-only"
  24.                          x-ref="mobiletitle">
  25.                         {{ content.calendlyFormHeadline|raw }}
  26.                     </div>
  27.                 {% endif %}
  28.                 <div class="contact-form__text" x-ref="text">
  29.                     {{ content.calendlyFormText | raw }}
  30.                 </div>
  31.                 {% if content.calendlyFormContact %}
  32.                     {% set contact = content.calendlyFormContact %}
  33.                     <div class="contact-form__person" x-ref="person">
  34.                         {% if contact.avatar %}
  35.                             {% set image = sulu_resolve_media(contact.avatar, app.request.locale) %}
  36.                             <div class="contact-form__person-media">
  37.                                 <img class="contact-form__person-image" src ="{{ image|thumbnailUrl('320x') }}" alt="{{ contact.fullName|default(image.description|striptags) }}" sizes="200px">
  38.                             </div>
  39.                         {% endif %}
  40.                         <div class="contact-form__person-info">
  41.                             <div class="contact-form__person-name">{{ contact.firstName }} {{ contact.lastName }}</div>
  42.                             <div class="contact-form__person-text">
  43.                                 {{ contact.position.position }}<br>
  44.                                 <a href="tel:{{ contact.mainPhone }}">{{ contact.mainPhone }}</a><br>
  45.                                 <a href="mailto:{{ contact.mainEmail }}">{{ contact.mainEmail }}</a>
  46.                             </div>
  47.                         </div>
  48.                     </div>
  49.                 {% endif %}
  50.                 <div class="contact-form__form" x-ref="form" x-show="formTabActive">
  51.                     {{ include('/includes/calendlyForm.html.twig', {
  52.                         idSuffix: widgetUniqueId
  53.                     }) }}
  54.                 </div>
  55.                 <div
  56.                         class="contact-form__calendly-form modal__modal"
  57.                         x-ref="calendlyWidget"
  58.                         x-show="calendlyTabActive"
  59.                         data-calendly-url="{{ calendlyLink ~ ( '?' in calendlyLink ? '&' : '?') ~ 'hide_gdpr_banner=1' }}"
  60.                         data-asset-url="https://assets.calendly.com/assets/external/widget.js"
  61.                         @calendlyassetsloaded.window="initCalendlyWidget"
  62.                         @message.window="messageReceived"
  63.                 >
  64.                     <div class="modal-card modal-card--transparent">
  65.                         <!-- Calendly Inline-Widget Beginn -->
  66.                         <div class="calendly-widget-inline" :class="calendlyWidgetLoaded && 'calendly-widget-loaded'" style="min-width:320px;height:700px;" x-ref="calendlyWidgetAnchor"></div>
  67.                         <!-- Calendly Inline-Widget Ende -->
  68.                     </div>
  69.                     <div class="modal__close" @click="closeCalendly">
  70.                         <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  71.                             <path d="M13.5 2.5L2.5 13.5" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round"
  72.                                   stroke-linejoin="round"/>
  73.                             <path d="M2.5 2.5L13.5 13.5" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round"
  74.                                   stroke-linejoin="round"/>
  75.                         </svg>
  76.                     </div>
  77.                 </div>
  78.             </div>
  79.         </div>
  80.     {% endif %}
  81. {% endfor %}