templates/front/promotions/promotions.html.twig line 1

Open in your IDE?
  1. {% extends "front/_common/_base.html.twig" %}
  2. {% block linkcanonical %}
  3.     <link rel="canonical" href="{{ absolute_url(path('promotions')) }}">
  4. {% endblock %}
  5. {% block cssadicional %}{% endblock %}
  6. {% block classbody %}{% endblock %}
  7. {% block content %}
  8.     <section class="promociones">
  9.         <div class="promociones_banner">
  10.             <div class="promociones_container ww_center">
  11.                 <h2>{{ sd.title }}</h2>
  12.             </div>
  13.         </div>
  14.         {% if promotions|length > 0 %}
  15.             <div class="promociones_wrap_items ww_center">
  16.                 {% for item in promotions %}
  17.                     <a href="" class="promociones_itm" data-img="{{ asset(item.image|image_path) }}" data-promotion="{{ item.title }}">
  18.                         <figure class="promociones_image">
  19.                             <img src="{{ asset(item.image|image_path) }}" width="50" height="" alt="{{ item.title }}">
  20.                         </figure>
  21.                     </a>
  22.                 {% endfor %}
  23.             </div>
  24.         {% else %}
  25.             <div class="promociones_mensaje">
  26.                 <figure>
  27.                     <img src="{{ asset(sd.noDataIcon|image_path) }}" width="" alt="{{ sd.noDataIcon|split_alt }}">
  28.                 </figure>
  29.                 <h2>{{ sd.noDataMessage|nl2br ?: 'No hay promociones disponibles. Pronto tendremos más novedades.' }}</h2>
  30.             </div>
  31.         {% endif %}
  32.     </section>
  33.     {% if promotions|length > 0 %}
  34.         <div class="popup_promociones">
  35.             <div class="popup_promociones_container ww_center">
  36.                 <span class="popup_promociones_close icon-add"></span>
  37.                 <div class="popup_promociones_left">
  38.                     <figure>
  39.                         <img id="promotion_image" width="585" alt="">
  40.                     </figure>
  41.                     <div class="popup_text_promociones">
  42.                         <p>{{ sd.formNotes|nl2br }}</p>
  43.                     </div>
  44.                 </div>
  45.                 <div class="popup_promociones_form">
  46.                     <h2>{{ sd.formTitle }}</h2>
  47.                     <p>{{ sd.formText|nl2br }}</p>
  48.                     {{ form_start(form, {'attr': {'id': 'formPromociones'}}) }}
  49.                         {% include 'front/templates/form_utm_fields.html.twig' %}
  50.                         {{ form_widget(form.promotion) }}
  51.                         {{ form_widget(form.typePerson) }}
  52.                         {{ form_widget(form.documentType) }}
  53.                         {{ form_widget(form.documentNumber) }}
  54.                         <ul>
  55.                             <li>
  56.                                 <div class="popup_promociones_input_radio">
  57.                                     <div class="popup_promociones_input_label">
  58.                                         <input checked type="radio" name="form_type" class="checkedInput validate[required]" value="Empresa" id="form_promotion_legal_person">
  59.                                         <label for="form_promotion_legal_person"><span></span>Soy empresa</label>
  60.                                     </div>
  61.                                     <div class="popup_promociones_input_label">
  62.                                         <input type="radio" name="form_type" class="checkedInput validate[required]" value="Persona natural" id="form_promotion_natural_person">
  63.                                         <label for="form_promotion_natural_person"><span></span>Soy Persona Natural</label>
  64.                                     </div>
  65.                                 </div>
  66.                             </li>
  67.                             <li class="popup_promociones_column liNoneInputs">
  68.                                 <div class="popup_promociones_inputs">
  69.                                     <select class="validate[required] inputEffect elementHidden" id="form_promotion_document_types">
  70.                                         <option value="" disabled selected></option>
  71.                                         {% for item in forms.documentTypes %}
  72.                                             <option value="{{ item.title }}">{{ item.title }}</option>
  73.                                         {% endfor %}
  74.                                     </select>
  75.                                     <label for="form_promotion_document_types">Tipo de documento*</label>
  76.                                 </div>
  77.                                 <div class="popup_promociones_inputs">
  78.                                     <input type="text" class="validate[required] inputEffect elementHidden form_promotion_document_number" id="form_promotion_document_number_natural_person">
  79.                                     <label for="form_promotion_document_number_natural_person">Número de documento*<span class="icon-arrow_drop_down"></span></label>
  80.                                 </div>
  81.                             </li>
  82.                             <li class="popup_promociones_column liNoneInputsEmpresa">
  83.                                 <div class="popup_promociones_inputs">
  84.                                     <input type="text" class="validate[required] inputEffect elementHiddenEmpresa form_promotion_document_number" id="form_promotion_document_number_legal_person">
  85.                                     <label for="form_promotion_document_number_legal_person">RUC*</label>
  86.                                 </div>
  87.                                 <div class="popup_promociones_inputs">
  88.                                     {{ form_widget(form.company, {'attr': {'class': 'validate[required] inputEffect elementHiddenEmpresa'}}) }}
  89.                                     <label for="form_promotion_company">Empresa*</label>
  90.                                 </div>
  91.                             </li>
  92.                             <li class="popup_promociones_column">
  93.                                 <div class="popup_promociones_inputs">
  94.                                     {{ form_widget(form.name, {'attr': {'class': 'inputEffect validate[required]'}}) }}
  95.                                     <label for="form_promotion_name">Nombres*</label>
  96.                                 </div>
  97.                                 <div class="popup_promociones_inputs">
  98.                                     {{ form_widget(form.department, {'attr': {'class': 'inputEffect validate[required]'}}) }}
  99.                                     <label for="form_promotion_department">Departamento*</label>
  100.                                 </div>
  101.                             </li>
  102.                             <li class="popup_promociones_column">
  103.                                 <div class="popup_promociones_inputs">
  104.                                     {{ form_widget(form.phone, {'attr': {'class': 'inputEffect validate[required, custom[phone]]'}}) }}
  105.                                     <label for="form_promotion_phone">Teléfono*</label>
  106.                                 </div>
  107.                                 <div class="popup_promociones_inputs">
  108.                                     {{ form_widget(form.email, {'attr': {'class': 'inputEffect validate[required, custom[email]]'}}) }}
  109.                                     <label for="form_promotion_email">Correo Electrónico*</label>
  110.                                 </div>
  111.                             </li>
  112.                         </ul>
  113.                         <div class="popup_promociones_obligatorio">
  114.                             <p>* Campos obligatorios</p>
  115.                         </div>
  116.                         <div class="contacto_check popup_promociones_check">
  117.                             <input type="checkbox" id="inputCheck" class="validate[required]" name="">
  118.                             <label for="inputCheck">
  119.                                 <span class="contacto_check_active"></span>
  120.                                 <p>Acepto los <a href="{{ path('terms_and_conditions') }}" target="_blank">Términos y Condiciones</a></p>
  121.                             </label>
  122.                         </div>
  123.                         <div class="popup_promociones_btn">
  124.                             <button class="btnPromocion btn btn_blue" id="btnPromocion">Enviar</button>
  125.                         </div>
  126.                     {{ form_end(form) }}
  127.                 </div>
  128.             </div>
  129.         </div>
  130.     {% endif %}
  131. {% endblock %}
  132. {% block jsfinal %}
  133.     <script src="{{ asset('static/js/validationform/jquery.validationEngine-es.js') }}"></script>
  134.     <script src="{{ asset('static/js/validationform/staff.validationEngine.js') }}"></script>
  135.     {% if promotions|length > 0 %}
  136.         <script type="text/javascript">
  137.             const elementImage = document.getElementById('promotion_image');
  138.             let navPopup = document.querySelectorAll('.promociones_itm');
  139.             navPopup.forEach((item) => {
  140.                 item.addEventListener('click', (e) => {
  141.                     e.preventDefault();
  142.                     elementImage.src = item.getAttribute('data-img');
  143.                     document.querySelector('.popup_promociones').classList.add('active');
  144.                 })
  145.                 document.querySelector('body').style.overflow = 'hidden'
  146.             })
  147.             document.querySelector('.popup_promociones_close').addEventListener('click', () => {
  148.                 document.querySelector('.popup_promociones').classList.remove('active');
  149.                 document.querySelector('body').style.overflow = 'auto'
  150.                 elementImage.src = null;
  151.             })
  152.             let InputChecked = document.querySelectorAll('.checkedInput');
  153.             let elementDivHidden = document.querySelectorAll('.elementHidden');
  154.             let elementHiddenEmpresa = document.querySelectorAll('.elementHiddenEmpresa');
  155.             InputChecked.forEach((item) => {
  156.                 item.addEventListener('change', () => {
  157.                     if (item.value === 'Empresa') {
  158.                         elementDivHidden.forEach((el) => {
  159.                             el.disabled = true
  160.                             el.closest('.liNoneInputs').classList.remove('is_active');
  161.                         })
  162.                         elementHiddenEmpresa.forEach((el) => {
  163.                             el.disabled = false
  164.                             el.closest('.liNoneInputsEmpresa').classList.remove('is_empresa');
  165.                         })
  166.                     } else {
  167.                         elementDivHidden.forEach((el) => {
  168.                             el.disabled = false
  169.                             el.closest('.liNoneInputs').classList.add('is_active');
  170.                         })
  171.                         elementHiddenEmpresa.forEach((el) => {
  172.                             el.disabled = true
  173.                             el.closest('.liNoneInputsEmpresa').classList.add('is_empresa');
  174.                         })
  175.                     }
  176.                 })
  177.             })
  178.             const popupPromotionFields = $(".popup_promociones_inputs input, .popup_promociones_inputs select");
  179.             $(popupPromotionFields).focusin(function() {
  180.                 $(this).addClass('border');
  181.             });
  182.             $(popupPromotionFields).focusout(function() {
  183.                 if ($(this).val() === "") {
  184.                     $(this).removeClass('border');
  185.                 };
  186.             });
  187.             $(popupPromotionFields).each(function() {
  188.                 if ($(this).val() != "") {
  189.                     $(this).addClass('border');
  190.                 }
  191.             });
  192.             $('#form_promotion_legal_person').on('change', function () {
  193.                 $('#form_promotion_typePerson').val($(this).val());
  194.                 $('#form_promotion_document_types').val('');
  195.                 $('#form_promotion_document_number_natural_person').val('');
  196.                 $('#form_promotion_document_number_legal_person').val('');
  197.                 $('#form_promotion_documentType').val('RUC');
  198.                 $('#form_promotion_documentNumber').val('');
  199.                 $('#form_promotion_company').val('');
  200.             })
  201.             $('#form_promotion_natural_person').on('change', function () {
  202.                 $('#form_promotion_typePerson').val($(this).val());
  203.                 $('#form_promotion_document_types').val('');
  204.                 $('#form_promotion_document_number_natural_person').val('');
  205.                 $('#form_promotion_document_number_legal_person').val('');
  206.                 $('#form_promotion_documentType').val('');
  207.                 $('#form_promotion_documentNumber').val('');
  208.             })
  209.             $('.promociones_itm').on('click', function () {
  210.                 $('#form_promotion_promotion').val($(this).data('promotion'));
  211.             })
  212.             $('#form_promotion_legal_person').trigger('change');
  213.             $('.form_promotion_document_number').on('keyup', function () {
  214.                 $('#form_promotion_documentNumber').val($(this).val());
  215.             })
  216.             $('#form_promotion_document_types').on('change', function () {
  217.                 $('#form_promotion_documentType').val($(this).val());
  218.             })
  219.             const form_promotion = $('#formPromociones');
  220.             const form_promotion_button = $('#btnPromocion');
  221.             form_promotion.validationEngine('attach', {
  222.                 promptPosition: "topLeft",
  223.                 autoHidePrompt: true,
  224.                 autoHideDelay: 3000,
  225.                 binded: false,
  226.                 scroll: false
  227.             });
  228.             form_promotion_button.on('click', function (event) {
  229.                 event.preventDefault();
  230.                 const valid = form_promotion.validationEngine('validate');
  231.                 $(this).attr('disabled', true);
  232.                 if (valid) {
  233.                     form_promotion.submit();
  234.                 } else {
  235.                     $(this).attr('disabled', false);
  236.                 }
  237.             });
  238.         </script>
  239.     {% endif %}
  240. {% endblock %}