custom/static-plugins/shopping-experiences/src/Resources/views/storefront/element/cms-element-simple-contact-form.html.twig line 1

Open in your IDE?
  1. {% block simple_contact_form %}
  2.     {% set config = element.fieldConfig.elements %}
  3.     {% set confirmationText = element.translated.config.confirmationText.value|replace({'\n': '<br>'}) %}
  5.     <div id="simpleContactForm" class="cms-element-{{ element.type }}">
  6.         <div class="row">
  7.             <div class="col-lg-12">
  8.                 <div class="card simple-contact-form-box-content">
  9.                     <div class="card-body">
  10.                         <div class="simple-contact-form-text">
  11.                             {% block simple_contact_form_text %}
  12.                                 {% if config.headline != '' %}<h4
  13.                                         class="simple-contact-form-headline simple-headline-dot-sm">{{ config.headline.value }}</h4>{% endif %}
  14.                                 {% if config.text != '' %}<p>{{ config.text.value }}</p>{% endif %}
  15.                             {% endblock %}
  16.                         </div>
  17.                         {% block simple_contact_form_input %}
  18.                         {% block simple_contact_form_fields %}
  19.                         <div class="form-row">
  20.                             <div class="col-md-6">
  21.                                 {% block simple_contact_form_input_first_name %}
  22.                                     {% sw_include '@Storefront/storefront/element/simple-contact-form/form-input.html.twig'
  23.                                         with {
  24.                                         fieldName: 'firstName',
  25.                                         required: true,
  26.                                         placeholder: 'wexo-cms.elements.simple-contact-form.fields.name'|trans
  27.                                     } %}
  28.                                 {% endblock %}
  29.                             </div>
  31.                             <div class="col-md-6">
  32.                                 {% block simple_contact_form_input_email %}
  33.                                     {% sw_include '@Storefront/storefront/element/simple-contact-form/form-input.html.twig'
  34.                                         with {
  35.                                         fieldName: 'email',
  36.                                         type: 'email',
  37.                                         required: true,
  38.                                         placeholder: 'wexo-cms.elements.simple-contact-form.fields.mail'|trans
  39.                                     } %}
  40.                                 {% endblock %}
  41.                             </div>
  43.                             <div class="col-12">
  44.                                 {% block simple_contact_form_input_comment %}
  45.                                     {% sw_include '@Storefront/storefront/element/simple-contact-form/form-input.html.twig'
  46.                                         with {
  47.                                         fieldName: 'comment',
  48.                                         required: true,
  49.                                         input: 'textarea',
  50.                                         placeholder: 'wexo-cms.elements.simple-contact-form.fields.comment'|trans
  51.                                     } %}
  52.                                 {% endblock %}
  53.                             </div>
  54.                         </div>
  55.                     </div>
  56.                     {% endblock %}
  58.                     {% block simple_contact_form_submit %}
  59.                         <div class="d-flex justify-content-center">
  60.                             <button type="submit"
  61.                                     class="btn simple-btn-hover-icon-primary simple-contact-form-submit simple-icon-arrows-white"
  62.                                     onclick="submitContactForm(this)">
  63.                                 {{ "wexo-cms.elements.simple-contact-form.submit"|trans }}
  64.                             </button>
  65.                         </div>
  66.                     {% endblock %}
  67.                     <div style="position: absolute; left: -5000px;" aria-hidden="true">
  68.                         <input type="text"
  69.                                id="contactFormValidator"
  70.                                name="b_d41cb534d0e79c26d3eea7815_38067263f9"
  71.                                tabindex="-1" value="">
  72.                     </div>
  73.                     <div class="clear"></div>
  74.                     {% endblock %}
  75.                     {% block contact_form_alerts %}
  76.                         <div class="d-none" id="contact-form-error">
  77.                             {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  78.                                 type: "danger",
  79.                                 content: "wexo-cms.elements.simple-contact-form.error"|trans
  80.                             } %}
  81.                         </div>
  82.                     {% endblock %}
  83.                 </div>
  84.             </div>
  85.         </div>
  86.         <script>
  87.             function submitContactForm(elm) {
  88.                 let placeholder = "placeholder";
  89.                 let mail = document.getElementById("form-email");
  90.                 let validate = document.getElementById("contactFormValidator");
  91.                 if (elm && document.getElementById("form-email")) {
  92.                     let mailData = {};
  93.                     mailData.salutationId = "{{ config('WexoShoppingExperiences.config.salutationId') }}"
  94.                     if (!mailData.salutationId || mailData.salutationId == '') {
  95.                         //SalutationId for value not_specified
  96.                         mailData.salutationId = "07ed1e41549f40999a8f8d3522126a57";
  97.                     }
  98.                     document.getElementById("form-firstName") ? mailData.firstName = document.getElementById("form-firstName").value : placeholder;
  99.                     mailData.lastName = placeholder;
  100.                     mailData.cvr = placeholder;
  101.                     mailData.email = mail.value;
  102.                     mailData.phone = placeholder;
  103.                     mailData.subject = placeholder;
  104.                     document.getElementById("form-comment") ? mailData.comment = document.getElementById("form-comment").value : placeholder;
  105.                     mailData.slotId = "{{ element.id }}";
  107.                     let showError = function () {
  108.                         let error = document.getElementById("contact-form-error");
  109.                         let classes = error.className;
  110.                         error.classList.remove("d-none");
  111.                         setTimeout(() => {
  112.                             error.style.opacity = 1;
  113.                         }, 1);
  114.                         setTimeout(() => {
  115.                             if (error) {
  116.                                 error.className = classes;
  117.                                 error.style.opacity = 0;
  118.                             }
  119.                         }, 4000);
  120.                     }
  121.                     if (mail.value.length > 0 && validate.value === '') {
  123.                         let contactFormCall = Wtheme.api.post("/store-api/contact-form", JSON.stringify(mailData), function () {
  124.                             if (contactFormCall.status === 200 || contactFormCall.status === 204 || contactFormCall.status === 202) {
  125.                                 document.getElementById("simpleContactForm").innerHTML = "<div class='confirm-message'>{{ confirmationText|raw }}</div>";
  126.                             } else {
  127.                                 showError();
  128.                             }
  129.                         });
  130.                     } else {
  131.                         showError();
  132.                     }
  133.                 }
  134.             }
  135.         </script>
  136.     </div>
  137. {% endblock %}