src/Develey/BornBundle/Resources/views/Snippet/job-popup-modal.html.twig line 1

Open in your IDE?
  1. {% set textblock = pimcore_textarea('textblock', {
  2.     'width': 800,
  3.     'height': 100,
  4.     'placeholder': 'Text ...'
  5. }) %}
  6. {% set delay = pimcore_input('delay', {
  7.     'width': 152,
  8.     'placeholder': '3 (default)'
  9. }) %}
  11. {% if document.getProperty('mailJobPopup') != null and document.getProperty('mailJobPopup') is not empty %}
  12.     {% set email = document.getProperty('mailJobPopup') %}
  13. {% else %}
  14.     {% set email = null %}
  15. {% endif %}
  17. {% if editmode %}
  18.     {% set image = pimcore_image('image', {
  19.         'width': 800,
  20.         'height': 450
  21.     }) %}
  23.     <div class="flex-col offset-bottom-single">
  24.         <div class="col xs-12">
  25.             <span class="hint"><big>Job-Popup</big><small><br/><br/></small><strong>Bild:</strong>&nbsp; ( 16:9 )</span>
  26.             <div>{{ image | raw }}</div>
  27.         </div>
  28.         <div class="col xs-12">
  29.             <span class="hint"><strong>Text:</strong></span>
  30.             <div>{{ textblock | raw }}</div>
  31.         </div>
  32.         <div class="col xs-12">
  33.             <span class="hint"><strong>Verzögerung:</strong><br/><small>Nach wie viel Sekunden soll das Popup öffnen?<br/>( Default 3s / nur ganze Sekunden! )<br/>&nbsp;</small></span>
  34.             <div>{{ delay | raw }}</div>
  35.             <div>&nbsp;</div>
  36.         </div>
  37.         <div class="col xs-12">
  38.             <span class="hint"><strong>E-Mail:</strong><br/><span
  39.                         style="color:#666"><small>aus der Page-Property "mailJobPopup"<br/>&nbsp;</small></span></span>
  40.             {% if email is empty %}
  41.                 <div style="color:red">Bitte Page-Property setzten! (s.u.)</div>
  42.             {% else %}
  43.                 <div style="color:#666">{{ email | raw }}</div>
  44.             {% endif %}
  45.             <div>&nbsp;</div>
  46.         </div>
  47.         <div class="col xs-12" style="color:#002a44">
  48.             &nbsp;<br/>Dieses Snippet muss in die Page-Property "snippetJobPopup" vom Typ "Document" gezogen werden. Diese Property kann auf Root des
  49.             Sprachbaumes liegen.<small><br/><br/></small>
  50.             Das Popup wird dargestellt, wenn auf der Seite eine Page-Property "showJobPopup" vom Typ "Checkbox" gesetzt ist. Bitte diese Property nicht
  51.             vererben!<small><br/><br/></small>
  52.             Die Mail wird an die E-MailAdresse in der Page-Property "mailJobPopup" vom Typ "Text" gesendet. Diese Property kann ebenfalls auf Root des
  53.             Sprachbaumes liegen.<br/><br/>&nbsp;
  54.         </div>
  55.     </div>
  56. {% else %}
  57.     {% set image = pimcore_image('image', {
  58.         'thumbnail': 'jobPopup',
  59.         'disableWidthHeightAttributes':  true,
  60.         'cacheBuster': true,
  61.         'imgAttributes': {
  62.             'class': 'job-popup_img',
  63.         },
  64.     }) %}
  66.     {% set delayHtml = '3000' %}
  67.     {% if delay.getData() is not empty %}
  68.         {% set delayHtml = delay.getData() ~ '000' %}
  69.     {% endif %}
  71.     {% if email is not empty %}
  72.         <div class="job-popup">
  73.             <div class="bb-flex-1 js-job-popup_close"></div>
  74.             <div class="bb-flex-col">
  75.                 <div class="bb-flex-1 js-job-popup_close"></div>
  76.                 <div class="job-popup_box">
  77.                     {% if image.getId() != null %}
  78.                         <div>{{ image | raw }}</div>
  79.                         <div class="job-popup_closer js-job-popup_close">
  80.                             <svg xmlns="http://www.w3.org/2000/svg" width="38px" height="38px" viewBox="0 0 24 24">
  81.                                 <path d="M0 0h24v24H0z" fill="none"></path>
  82.                                 <path fill="currentColor"
  83.                                       d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
  84.                             </svg>
  85.                         </div>
  86.                     {% endif %}
  87.                     <div class="job-popup_body">
  88.                         {% if textblock.getData() is not empty %}
  89.                             <div class="bb-pb-2 text-center">{{ textblock.getData() | raw }}</div>
  90.                         {% endif %}
  92.                         <div class="job-popup_form active">
  93.                             <form>
  94.                                 <div class="form-field job-popup_field-gender">
  95.                                     <label for="gender" class="required">Anrede</label>
  96.                                     <select class="job-popup_field" id="gender" name="gender">
  97.                                         <option value="">Bitte wählen ...</option>
  98.                                         <option value="male">Herr</option>
  99.                                         <option value="female">Frau</option>
  100.                                         <option value="divers">Divers</option>
  101.                                     </select>
  102.                                     <div class="job-popup_error">Bitte Anrede auswählen.</div>
  103.                                 </div>
  104.                                 <div class="form-field job-popup_field-firstname">
  105.                                     <label class="required" for="firstname">Vorname</label>
  106.                                     <input class="job-popup_field" id="firstname" name="firstname" type="text" autocomplete="given-name"/>
  107.                                     <div class="job-popup_error">Bitte Vorname angeben.</div>
  108.                                 </div>
  109.                                 <div class="form-field job-popup_field-lastname">
  110.                                     <label class="required" for="lastname">Nachname</label>
  111.                                     <input class="job-popup_field" id="lastname" name="lastname" type="text" autocomplete="family-name"/>
  112.                                     <div class="job-popup_error">Bitte Nachname angeben.</div>
  113.                                 </div>
  114.                                 <div class="form-field job-popup_field-email">
  115.                                     <label class="required" for="email">E-Mail</label>
  116.                                     <input class="job-popup_field" id="email" name="email" type="email" autocomplete="email"/>
  117.                                     <div class="job-popup_error">Bitte E-Mail-Adresse angeben.</div>
  118.                                 </div>
  119.                                 <div class="form-field job-popup_field-phone">
  120.                                     <label class="required" for="phone">Telefon</label>
  121.                                     <input class="job-popup_field" id="phone" name="phone" type="text" autocomplete="tel"/>
  122.                                     <div class="job-popup_error">Bitte Telefon-Nummer angeben.</div>
  123.                                 </div>
  124.                                 <div class="form-field job-popup_field-recall">
  125.                                     <label for="recall" class="required">Gewünschter Kontakt</label>
  126.                                     <select class="job-popup_field" id="recall" name="recall">
  127.                                         <option value="phone">per Telefon</option>
  128.                                         <option value="email">per E-Mail</option>
  129.                                     </select>
  130.                                     <div class="job-popup_error">Bitte gewünschte Kontaktaufnahme wählen.</div>
  131.                                 </div>
  132.                                 <div class="form-field job-popup_field-message">
  133.                                     <label class="required" for="message">Gewünschte Stelle / Nachricht</label>
  134.                                     <textarea class="job-popup_field" id="message" name="message" type="message"></textarea>
  135.                                     <div class="job-popup_error">Bitte eine Nachricht eingeben.</div>
  136.                                 </div>
  137.                                 <div class="checkout-confirm-container agreement-check job-popup_field-confirm">
  138.                                     <input class="job-popup_field job-popup_checkbox" type="checkbox" name="confirm" id="confirm">
  139.                                     <label for="confirm">
  140.                                         <span>Ich habe die
  141.                                         {% if document.getProperty('dsPageJobPopup') != null and document.getProperty('dsPageJobPopup') is not empty %}
  142.                                             <a href="{{ document.getProperty('dsPageJobPopup').getFullPath() | raw }}" target="_blank">Datenschutzerklärung</a>
  143.                                         {% else %}Datenschutzerklärung{% endif %}
  144.                                         zur Kenntnis genommen.
  145.                                         </span>
  146.                                     </label>
  147.                                     <div class="job-popup_error">Bitte der Datenschutz&shy;erklärung zustimmen.</div>
  148.                                 </div>
  149.                                 <div class="job-popup_field-send">
  150.                                     <div class="job-popup_error">Ihre E-Mail konnte nicht gesendet werden.</div>
  151.                                 </div>
  152.                                 <div class="bb-pt-4">
  153.                                     <div class="job-popup_btn js-job-popup_send" role="button">Senden</div>
  154.                                 </div>
  155.                             </form>
  156.                         </div>
  157.                         <div class="job-popup_success text-center">
  158.                             {{ 'job.popup.success.hint' | trans }}
  159.                             <br/><br/>
  160.                             <div class="job-popup_btn job-popup_btn-m-0  js-job-popup_close" role="button">{{ 'Schließen' | trans }}</div>
  161.                         </div>
  163.                     </div>
  164.                 </div>
  165.                 <div class="bb-flex-1 js-job-popup_close"></div>
  166.             </div>
  167.             <div class="bb-flex-1 js-job-popup_close"></div>
  168.         </div>
  169.         <script>
  170.           let jobPopupRequest = false
  171.           window.onload = function () {
  172.             $(document).on('click', '.js-job-popup_close', function () {
  173.               $('body').removeClass('job-popup_open')
  174.             }).on('click', '.js-job-popup_send', function () {
  175.               if (jobPopupRequest) {
  176.                 return
  177.               }
  178.               $('.job-popup_body').addClass('job-popup_request')
  179.               jobPopupRequest = true
  180.               let jobPopupValid = true
  181.               $('.job-popup_has-error').removeClass('job-popup_has-error')
  182.               $('.job-popup_field').map(function () {
  183.                 if ($(this).hasClass('job-popup_checkbox')) {
  184.                   if ($(this)[0].checked !== true) {
  185.                     $('.job-popup_field-' + $(this)[0].name).addClass('job-popup_has-error')
  186.                     jobPopupValid = false
  187.                   }
  188.                 } else {
  189.                   if ($(this)[0].value.length < 3) {
  190.                     $('.job-popup_field-' + $(this)[0].name).addClass('job-popup_has-error')
  191.                     jobPopupValid = false
  192.                   }
  193.                 }
  194.               })
  195.               if (jobPopupValid) {
  196.                 let data = {}
  197.                 $('.job-popup_field').map(function () {
  198.                   if ($(this).hasClass('job-popup_checkbox')) {
  199.                     data[$(this)[0].name] = $(this)[0].checked
  200.                   } else {
  201.                     data[$(this)[0].name] = $(this)[0].value
  202.                   }
  203.                 })
  204.                 data['brand'] = 'Born'
  205.                 data['recipients'] = '{{ document.getProperty('mailJobPopup') }}'
  206.                 $.ajax({
  207.                   type: 'post',
  208.                   url: '/api/send-job-popup-mail',
  209.                   data: JSON.stringify(data),
  210.                   dataType: 'json',
  211.                   success: function (response) {
  212.                     if (response.success === false) {
  213.                       if (response.errors.length > 0) {
  214.                         response.errors.map(function (item) {
  215.                           $('.job-popup_field-' + item).addClass('job-popup_has-error')
  216.                         })
  217.                       }
  218.                       if (response.sendFailed) {
  219.                         $('.job-popup_field-send').addClass('job-popup_has-error')
  220.                       }
  221.                     } else {
  222.                       $('.job-popup_form').removeClass('active')
  223.                       $('.job-popup_success').addClass('active')
  224.                     }
  225.                     $('.job-popup_body').removeClass('job-popup_request')
  226.                     jobPopupRequest = false
  227.                   },
  228.                   error: function (response) {
  229.                     $('.job-popup_field-send').addClass('job-popup_has-error')
  230.                     $('.job-popup_body').removeClass('job-popup_request')
  231.                     jobPopupRequest = false
  232.                   }
  233.                 })
  234.               } else {
  235.                 $('.job-popup_body').removeClass('job-popup_request')
  236.                 jobPopupRequest = false
  237.               }
  238.             })
  239.             window.setTimeout(() => {
  240.               $('body').addClass('job-popup_open')
  241.             }, {{ delayHtml | raw }})
  242.           }
  243.         </script>
  244.     {% endif %}
  245. {% endif %}