Symfony Profiler

{% extends "front/_common/_base.html.twig" %}
{% block linkcanonical %}
<link rel="canonical" href="{{ absolute_url(path('promos')) }}">
{% if info.captchaShow %}
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : '{{ info.captchaSite }}'
});
};
</script>
{% endif %}
{% endblock %}
{% block cssadicional %}{% endblock %}
{% block classbody %}{% endblock %}
{% block content %}
<section class="b30">
<article class="b30_ctn wancho">
<div class="general_breadcrumbs">
<ul>
<li><a href="{{ path('home') }}">INICIO</a></li>
<li><a href="" aria-selected="true">PROMOCIONES</a></li>
</ul>
</div>
<div class="main_title_layout">
{% if home.mainPrefix %}
<h2>{{ home.mainPrefix }}</h2>
{% endif %}
{% if home.mainTitle %}
<h1 class="general_title">{{ home.mainTitle }}</h1>
{% endif %}
</div>
<ul class="b30_list">

{% for item in promos %}
<li
class="b30_item"
data-promo="{{ item.description|base64_encode }}"
data-title="{{ item.title }}"
>
<picture><img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}" /></picture>
</li>
{% endfor %}
</ul>
</article>
</section>

<div class="promociones_popup">
<a href="" id="closePopup" class="icon-close1"></a>
<div class="promocion_popup_ctn">
<div class="promo_info">
<img src="" alt="promo" />
</div>
<div class="promo_form">
{% if home.formPrefix %}
<small>{{ home.formPrefix }}</small>
{% endif %}
{% if home.formTitle %}
<p>{{ home.formTitle }}</p>
{% endif %}
<div class="general_form">
{{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
{{ form_widget(form.utmSource, {'attr': {'class': 'form_utmsource'}}) }}
{{ form_widget(form.utmMedium, {'attr': {'class': 'form_utmmedium'}}) }}
{{ form_widget(form.utmCampaign, {'attr': {'class': 'form_utmcampaign'}}) }}
{{ form_widget(form.utmContent, {'attr': {'class': 'form_utmcontent'}}) }}
{{ form_widget(form.utmTerm, {'attr': {'class': 'form_utmterm'}}) }}
{{ form_widget(form.gclid, {'attr': {'class': 'gclid'}}) }}
<fieldset class="radioGroup">
<div>
<input type="radio" name="tipo" id="empresa" checked />
<label for="empresa">Soy empresa</label>
</div>
<div>
<input type="radio" name="tipo" id="natural" />
<label for="natural">Soy persona natural</label>
</div>
</fieldset>
<fieldset class="formGroup" id="empresaGroup">
<div class="fInput">
<label for="ruc">RUC*</label>
{{ form_widget(form.ruc, {'attr': {'class':'validate[required, maxSize[15]] validKeypress', 'data-maxChar':'15', 'data-expression':'number'}}) }}
</div>
<div class="fInput">
<label for="empresa">Empresa</label>
{{ form_widget(form.factory, {'attr': {'class':'validate[required, maxSize[255]] validKeypress', 'data-maxChar':'15', 'data-expression':'text'}}) }}
</div>
</fieldset>
{# Nuevo fieldset, borrar comentario al integrar #}
<fieldset class="formGroup" id="personaGroup" style="display: none">
<div class="fInput fSelect">
{{ form_widget(form.docType, {'attr': {'class':'', 'data-validation-placeholder':'Tipo De Documento'}}) }}
</div>
<div class="fInput">
<label for="ruc">DNI*</label>
{{ form_widget(form.docNum, {'attr': {'class':'', 'data-maxChar':'10', 'data-expression':'number'}}) }}
</div>
</fieldset>
{# Nuevo fieldset, borrar comentario al integrar #}
<fieldset class="formGroup">
<div class="fInput">
<label for="nombre">Nombres</label>
{{ form_widget(form.name, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
</div>
<div class="fInput">
<label for="apellidos">Apellidos</label>
{{ form_widget(form.lastname, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
</div>
</fieldset>
<fieldset class="formGroup">
<div class="fInput">
<label for="telefono">Teléfono</label>
{{ form_widget(form.phone, {'attr': {'class':'validate[required, maxSize[15]] validKeypress', 'type': 'tel', 'data-maxChar':'15', 'data-expression':'number'}}) }}
</div>
<div class="fInput">
<label for="correo">Correo Electrónico*</label>
{{ form_widget(form.email, {'attr': {'class':'validate[required, maxSize[100]] validKeypress', 'type': 'email', 'data-maxChar':'100', 'data-expression':'email'}}) }}
</div>
</fieldset>
<fieldset class="formGroup">
<div class="fInput fSelect">
{{ form_widget(form.departament, {'attr': {'class':'validate[required]'}}) }}
</div>
</fieldset>
<div class="fCheckBox">
<span>*Campos obligatorios</span>
<div class="formCheckbox">
<input type="checkbox" id="1" name="check_terminos" class="validate[required]" />
<label for="1"
>He leído y acepto las <a href="{{ path('privacy') }}" target="_blank">Políticas de privacidad</a></label
>
</div>
</div>
{% if info.captchaShow %}
<div style="margin-bottom:10px; position: relative; width: max-content;">
<div id="html_element"></div>
</div>
{% endif %}
<div class="formButtonCtn">
<button class="f-guardar-contacto-general hidden_button_send" id="btnPromo">Enviar</button>
<button class="show_button_send">Enviando... <span class="icon-flecha-derecha"></span></button>
</div>
{{ form_end(form) }}
</div>
</div>
</div>
</div>
{% endblock %}
{% block jsfinal %}
<script src="{{ STATIC_URL }}js/validationform/jquery.validationEngine.js"></script>
{% include 'front/templates/captcha.html.twig' %}
<script type="text/javascript">
var Base64 = {
// private property
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// public method for encoding
encode : function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
// public method for decoding
decode : function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
// private method for UTF-8 encoding
_utf8_encode : function (string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
// private method for UTF-8 decoding
_utf8_decode : function (utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while ( i < utftext.length ) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
// cambia y quita los campos base a tipo de usuario a llenar formulario
const empresa = document.querySelector('#empresa');
const natural = document.querySelector('#natural');
const empresaGroup = document.getElementById('empresaGroup');
const personaGroup = document.getElementById('personaGroup');
empresa.addEventListener('change', adjustableHeightCheck);
natural.addEventListener('change', adjustableHeightCheck);
function adjustableHeightCheck() {
if (!!document.getElementById('empresa').checked) {
$('#empresaGroup').css({'display' : 'flex'});
$('#personaGroup').css({'display' : 'none'});
$('#form_promo_ruc').addClass('validate[required, maxSize[15]]');
$('#form_promo_factory').addClass('validate[required, maxSize[125]]');
$('#form_promo_docType').removeClass('validate[required]');
$('#form_promo_docNum').removeClass('validate[required, maxSize[15]]');
$('#form_promo_isPerson').prop("checked", false);
} else {
$('#empresaGroup').css({'display' : 'none'});
$('#personaGroup').css({'display' : 'flex'});
$('#form_promo_ruc').removeClass('validate[required, maxSize[15]]');
$('#form_promo_factory').removeClass('validate[required, maxSize[125]]');
$('#form_promo_docType').addClass('validate[required]');
$('#form_promo_docNum').addClass('validate[required, maxSize[15]]');
$('#form_promo_isPerson').prop("checked", true);
}
}
function adjustableHeightCheck2() {
if (!!document.getElementById('empresa').checked) {
empresaGroup.style.display = 'flex';
personaGroup.style.display = 'none';
empresaGroup.querySelectorAll('input').forEach(e => {
e.removeAttribute('disabled');
});
personaGroup.querySelectorAll('input,select').forEach(e => {
e.setAttribute('disabled', true);
});
} else {
personaGroup.style.display = 'flex';
empresaGroup.style.display = 'none';
empresaGroup.querySelectorAll('input').forEach(e => {
e.setAttribute('disabled', true);
});
personaGroup.querySelectorAll('input,select').forEach(e => {
e.removeAttribute('disabled');
});
}
}
// cambia y quita los campos base a tipo de usuario a llenar formulario
$('.b30_item').click(function (e) {
const getText = this.dataset.promo ? Base64.decode(this.dataset.promo) : '';
const getImg = this.querySelectorAll('img')[0].src;
$('#form_promo_promo').val($(this).data('title'))
$('.promo_info img').attr('src', getImg);
$('.promo_info').append(getText);
$('.blockOverlay').addClass('active');
$('.promociones_popup').addClass('active');
});
$('#closePopup').click(e => {
e.preventDefault();
$('.promociones_popup').removeClass('active');
$('.blockOverlay').removeClass('active');
$('.promo_info p').remove();
});
$('.blockOverlay').click(function (e) {
e.preventDefault();
$('.promociones_popup').removeClass('active');
$('.promo_info p').remove();
this.removeClass('active');
});
$(() => {
$('form').validationEngine('attach', {
promptPosition: 'bottomLeft',
autoHidePrompt: true,
autoPositionUpdate: false,
autoHideDelay: 3000,
addFailureCssClassToField: 'inputError',
binded: false,
scroll: false,
validateNonVisibleFields: true,
showOneMessage: false,
});
// AQUI EL EVENTO PARA ENVIAR PROMOCION
$('#btnPromo').on('click', function(event) {
event.preventDefault();
let btn = $(this);
let form = btn.closest('form');
var valid = form.validationEngine('validate');
btn.prop('disabled', true);
if (valid && validarRecaptcha()){
document.querySelector('.general_form').classList.add('submit_form')
form.submit();
} else {
btn.prop('disabled', false);
return false;
}
});
});
</script>
{% endblock %}

templates/front/machine/promos.html.twig line 1