{% extends "front/_common/_base.html.twig" %}{% block linkcanonical %} <link rel="canonical" href="{{ absolute_url(path('promotions')) }}">{% endblock %}{% block cssadicional %}{% endblock %}{% block classbody %}promociones_page{% endblock %}{% block content %} <section class="promociones"> <div class="promociones_banner"> <div class="promociones_banner_content ww_center"> <div class="promociones_banner_miga"> <ul> <li><a href="{{ path('home') }}">Inicio</a></li> <li><a class="active">Promociones</a></li> </ul> </div> <h2 class="promociones_banner_title">{{ sd.title }}</h2> </div> </div> <div class="promociones_block ww_center"> {% if promotions|length > 0 %} <div class="promociones_wrap_items ww_center"> {% for item in promotions %} <a href="" class="promociones_itm" data-img="{{ asset(item.image|image_path) }}" data-promotion="{{ item.title }}"> <figure class="promociones_image"> <img src="{{ asset(item.image|image_path) }}" width="50" height="" alt="{{ item.title }}"> </figure> <div class="promociones_btn_link"> <span>Registrarme</span> </div> </a> {% endfor %} </div> {% else %} <div class="promociones_mensaje"> <figure> <img src="{{ asset(sd.noDataIcon|image_path) }}" width="" alt="{{ sd.noDataIcon|split_alt }}"> </figure> <h2>{{ sd.noDataMessage|nl2br ?: 'No hay promociones disponibles. Pronto tendremos más novedades.' }}</h2> </div> {% endif %} </div> </section> {% if promotions|length > 0 %} <div class="popup_promociones"> <div class="popup_promociones_container ww_center"> <span class="popup_promociones_close icon-add"></span> <div class="popup_promociones_left"> <figure> <img id="promotion_image" width="585" alt=""> </figure> <div class="popup_text_promociones"> <p>{{ sd.formNotes|nl2br }}</p> </div> </div> <div class="popup_promociones_form"> <h2>{{ sd.formTitle }}</h2> <p>{{ sd.formText|nl2br }}</p> {{ form_start(form, {'attr': {'id': 'formPromociones'}}) }} {% include 'front/templates/form_utm_fields.html.twig' %} {{ form_widget(form.promotion) }} {{ form_widget(form.typePerson) }} {{ form_widget(form.documentType) }} {{ form_widget(form.documentNumber) }} <ul> <li> <div class="popup_promociones_input_radio"> <div class="popup_promociones_input_label"> <input checked type="radio" name="form_type" class="checkedInput validate[required]" value="Empresa" id="form_promotion_legal_person"> <label for="form_promotion_legal_person"><span></span>Soy empresa</label> </div> <div class="popup_promociones_input_label"> <input type="radio" name="form_type" class="checkedInput validate[required]" value="Persona natural" id="form_promotion_natural_person"> <label for="form_promotion_natural_person"><span></span>Soy Persona Natural</label> </div> </div> </li> <li class="popup_promociones_column liNoneInputs"> <div class="popup_promociones_inputs"> <select class="validate[required] inputEffect elementHidden" id="form_promotion_document_types"> <option value="" disabled selected></option> {% for item in forms.documentTypes %} <option value="{{ item.title }}">{{ item.title }}</option> {% endfor %} </select> <label for="form_promotion_document_types">Tipo de documento*</label> </div> <div class="popup_promociones_inputs"> <input type="text" class="validate[required] inputEffect elementHidden form_promotion_document_number" id="form_promotion_document_number_natural_person"> <label for="form_promotion_document_number_natural_person">Número de documento*<span class="icon-arrow_drop_down"></span></label> </div> </li> <li class="popup_promociones_column liNoneInputsEmpresa"> <div class="popup_promociones_inputs"> <input type="text" class="validate[required] inputEffect elementHiddenEmpresa form_promotion_document_number" id="form_promotion_document_number_legal_person"> <label for="form_promotion_document_number_legal_person">RUC*</label> </div> <div class="popup_promociones_inputs"> {{ form_widget(form.company, {'attr': {'class': 'validate[required] inputEffect elementHiddenEmpresa'}}) }} <label for="form_promotion_company">Empresa*</label> </div> </li> <li class="popup_promociones_column"> <div class="popup_promociones_inputs"> {{ form_widget(form.name, {'attr': {'class': 'inputEffect validate[required]'}}) }} <label for="form_promotion_name">Nombres*</label> </div> <div class="popup_promociones_inputs"> {{ form_widget(form.department, {'attr': {'class': 'inputEffect validate[required]'}}) }} <label for="form_promotion_department">Departamento*</label> </div> </li> <li class="popup_promociones_column"> <div class="popup_promociones_inputs"> {{ form_widget(form.phone, {'attr': {'class': 'inputEffect validate[required, custom[phone]]'}}) }} <label for="form_promotion_phone">Teléfono*</label> </div> <div class="popup_promociones_inputs"> {{ form_widget(form.email, {'attr': {'class': 'inputEffect validate[required, custom[email]]'}}) }} <label for="form_promotion_email">Correo Electrónico*</label> </div> </li> </ul> <div class="popup_promociones_obligatorio"> <p>* Campos obligatorios</p> </div> <div class="contacto_check popup_promociones_check"> <input type="checkbox" id="inputCheck" class="validate[required]" name=""> <label for="inputCheck"> <span class="contacto_check_active"></span> <p>Acepto los <a href="{{ path('terms_and_conditions') }}" target="_blank">Términos y Condiciones</a></p> </label> </div> <div class="popup_promociones_btn"> <button class="btnPromocion btn btn_blue" id="btnPromocion">Enviar</button> </div> {{ form_end(form) }} </div> </div> </div> {% endif %}{% endblock %}{% block jsfinal %} <script src="{{ asset('static/js/validationform/jquery.validationEngine-es.js') }}"></script> <script src="{{ asset('static/js/validationform/staff.validationEngine.js') }}"></script> <script type="text/javascript"> const elementImage = document.getElementById('promotion_image'); let navPopup = document.querySelectorAll('.promociones_itm'); navPopup.forEach((item) =>{ item.addEventListener('click', (e)=>{ e.preventDefault(); elementImage.src = item.getAttribute('data-img'); document.querySelector('.popup_promociones').classList.add('active'); document.querySelector('.promociones_page').classList.add('is_active') }) }) document.querySelector('.popup_promociones_close').addEventListener('click', ()=>{ document.querySelector('.popup_promociones').classList.remove('active'); document.querySelector('.promociones_page').classList.remove('is_active'); elementImage.src = null; }) let InputChecked = document.querySelectorAll('.checkedInput'); let elementDivHidden = document.querySelectorAll('.elementHidden'); let elementHiddenEmpresa = document.querySelectorAll('.elementHiddenEmpresa'); InputChecked.forEach((item) => { item.addEventListener('change', () => { if (item.value === 'Empresa') { elementDivHidden.forEach((el) => { el.disabled = true el.closest('.liNoneInputs').classList.remove('is_active'); }) elementHiddenEmpresa.forEach((el) => { el.disabled = false el.closest('.liNoneInputsEmpresa').classList.remove('is_empresa'); }) } else { elementDivHidden.forEach((el) => { el.disabled = false el.closest('.liNoneInputs').classList.add('is_active'); }) elementHiddenEmpresa.forEach((el) => { el.disabled = true el.closest('.liNoneInputsEmpresa').classList.add('is_empresa'); }) } }) }) efectInput = function (inputName, efectInput) { const inputs = document.getElementsByClassName(inputName); for (let i = 0; i < inputs.length; i++) { inputs[i].addEventListener('change', function () { if (this.value) { this.nextElementSibling.classList.add(efectInput) } else { this.nextElementSibling.classList.remove(efectInput) } }) inputs[i].addEventListener('keyup', function () { if (this.value === "") { this.nextElementSibling.classList.remove(efectInput) } else { this.nextElementSibling.classList.add(efectInput) } }) } }; efectInput('inputEffect', 'fijar') $('#form_promotion_legal_person').on('change', function () { $('#form_promotion_typePerson').val($(this).val()); $('#form_promotion_document_types').val(''); $('#form_promotion_document_number_natural_person').val(''); $('#form_promotion_document_number_legal_person').val(''); $('#form_promotion_documentType').val('RUC'); $('#form_promotion_documentNumber').val(''); $('#form_promotion_company').val(''); }) $('#form_promotion_natural_person').on('change', function () { $('#form_promotion_typePerson').val($(this).val()); $('#form_promotion_document_types').val(''); $('#form_promotion_document_number_natural_person').val(''); $('#form_promotion_document_number_legal_person').val(''); $('#form_promotion_documentType').val(''); $('#form_promotion_documentNumber').val(''); }) $('.promociones_itm').on('click', function () { $('#form_promotion_promotion').val($(this).data('promotion')); }) $('#form_promotion_legal_person').trigger('change'); $('.form_promotion_document_number').on('keyup', function () { $('#form_promotion_documentNumber').val($(this).val()); }) $('#form_promotion_document_types').on('change', function () { $('#form_promotion_documentType').val($(this).val()); }) const form_promotion = $('#formPromociones'); const form_promotion_button = $('#btnPromocion'); form_promotion.validationEngine('attach', { promptPosition: "topLeft", autoHidePrompt: true, autoHideDelay: 3000, binded: false, scroll: false }); form_promotion_button.on('click', function (event) { event.preventDefault(); const valid = form_promotion.validationEngine('validate'); if (valid) { form_promotion.submit(); } }); </script>{% endblock %}