templates/front/form/quote.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('quote')) }}">
  4. {% endblock %}
  5. {% block cssadicional %}
  6.     {% if info.captchaShow %}
  7.     <script type="text/javascript">
  8.         var onloadCallback = function() {
  9.             grecaptcha.render('html_element', {
  10.             'sitekey' : '{{ info.captchaSite }}'
  11.             });
  12.         };
  13.     </script>
  14.     {% endif %}
  15. {% endblock %}
  16. {% block classbody %}{% endblock %}
  17. {% block content %}
  18. <section class="banner-general banner-general--blue">
  19.     <img class="banner-general__cover" src="{{ asset(home.mainBg|image_path) }}" alt="{{ home.mainBg|image_alt }}"/>
  20.     <img src="{{ asset(home.mainDetail|image_path) }}" alt="{{ home.mainDetail|image_alt }}" class="banner-general__img" />
  21.     <div class="wancho">
  22.         <div class="general_breadcrumbs">
  23.             <ul>
  24.                 <li><a href="{{ path('home') }}">INICIO</a></li>
  25.                 <li><a href="{{ path('quote') }}" aria-selected="true">COTIZAR</a></li>
  26.             </ul>
  27.         </div>
  28.         <div class="main_title_layout">
  29.             {% if home.mainPrefix %}
  30.             <h2>{{ home.mainPrefix }}</h2>
  31.             {% endif %}
  32.             {% if home.mainTitle %}
  33.             <h1 class="general_title">{{ home.mainTitle|block_title|raw }}</h1>
  34.             {% endif %}
  35.         </div>
  36.     </div>
  37. </section>
  38. <section class="cotizar_ctn">
  39.     <article class="wancho flex jcsb">
  40.         <div class="cotizar_form">
  41.             {% if home.formText %}
  42.             <p>{{ home.formText }}</p>
  43.             {% endif %}
  44.             <div class="general_form">
  45.                   {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
  46.                     {{ form_widget(form.utmSource, {'attr': {'class': 'form_utmsource'}}) }}
  47.                     {{ form_widget(form.utmMedium, {'attr': {'class': 'form_utmmedium'}}) }}
  48.                     {{ form_widget(form.utmCampaign, {'attr': {'class': 'form_utmcampaign'}}) }}
  49.                     {{ form_widget(form.utmContent, {'attr': {'class': 'form_utmcontent'}}) }}
  50.                     {{ form_widget(form.utmTerm, {'attr': {'class': 'form_utmterm'}}) }}
  51.                     {{ form_widget(form.gclid, {'attr': {'class': 'gclid'}}) }}
  52.                     {{ form_widget(form.isPerson) }}
  53.                     <fieldset class="radioGroup">
  54.                         <div>
  55.                             <input type="radio" name="tipo" id="empresa" checked />
  56.                             <label for="empresa">Soy empresa</label>
  57.                         </div>
  58.                         <div>
  59.                             <input type="radio" name="tipo" id="natural" />
  60.                             <label for="natural">Soy persona natural</label>
  61.                         </div>
  62.                     </fieldset>
  63.                     <fieldset class="formGroup">
  64.                         <div class="fInput fSelect">
  65.                              {{ form_widget(form.typeMachine, {'attr': {'class':'validate[required]', 'data-validation-placeholder':'Tipo de vehículo*'}}) }}
  66.                         </div>
  67.                         <div class="fInput fSelect">
  68.                             <select id="form_quote_typeModel_temp" required="required" class="validate[required]">
  69.                                 <option value="" selected="selected">Seleccione modelo*</option>
  70.                             </select>
  71.                         </div>
  72.                     </fieldset>
  73.                     <fieldset class="formGroup" id="personaGroup" style="display:none;">
  74.                         <div class="fInput fSelect">
  75.                             {{ form_widget(form.docType, {'attr': {'class':'validate[required]', 'data-validation-placeholder' : 'Tipo doc*'}}) }}
  76.                         </div>
  77.                         <div class="fInput">
  78.                             <label for="empresa">Número doc.</label>
  79.                             {{ form_widget(form.docNum, {'attr': {'class':'validate[required, maxSize[15]]', 'data-validation-placeholder' : 'Tipo doc*',  'data-maxChar':'15', 'data-expression':'number'}}) }}
  80.                         </div>
  81.                     </fieldset>
  82.                     <fieldset class="formGroup" id="empresaGroup">
  83.                         <div class="fInput">
  84.                             <label for="ruc">RUC*</label>
  85.                              {{ form_widget(form.ruc, {'attr': {'class':'validate[required, maxSize[15]] validKeypress', 'data-maxChar':'15', 'data-expression':'number'}}) }}
  86.                         </div>
  87.                         <div class="fInput">
  88.                             <label for="empresa">Empresa*</label>
  89.                              {{ form_widget(form.factory, {'attr': {'class':'validate[required, maxSize[255]] validKeypress', 'data-maxChar':'15', 'data-expression':'text'}}) }}
  90.                         </div>
  91.                     </fieldset>
  92.                     <fieldset class="formGroup">
  93.                         <div class="fInput">
  94.                             <label for="nombre">Nombres*</label>
  95.                              {{ form_widget(form.name, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
  96.                         </div>
  97.                         <div class="fInput">
  98.                             <label for="apellidos">Apellidos*</label>
  99.                              {{ form_widget(form.lastname, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
  100.                         </div>
  101.                     </fieldset>
  102.                     <fieldset class="formGroup">
  103.                         <div class="fInput">
  104.                             <label for="telefono">Teléfono*</label>
  105.                              {{ form_widget(form.phone, {'attr': {'class':'validate[required, maxSize[15]] validKeypress', 'type': 'tel', 'data-maxChar':'15', 'data-expression':'number'}}) }}
  106.                         </div>
  107.                         <div class="fInput">
  108.                             <label for="correo">Correo Electrónico*</label>
  109.                              {{ form_widget(form.email, {'attr': {'class':'validate[required, maxSize[100]] validKeypress', 'type': 'email', 'data-maxChar':'100', 'data-expression':'email'}}) }}
  110.                         </div>
  111.                     </fieldset>
  112.                     <div class="fInput fSelect">
  113.                          {{ form_widget(form.departament, {'attr': {'class':'validate[required]'}}) }}
  114.                     </div>
  115.                     <div class="fInput fSelect">
  116.                            {{ form_widget(form.origin, {'attr': {'class':'validate[required]' }}) }}
  117.                     </div>
  118.                     <div class="fInput">
  119.                         <label for="comentario">¿Tienes algún comentario?</label>
  120.                          {{ form_widget(form.comment, {'attr': {'class':'validate[maxSize[255]]', 'data-maxChar' : '255'}}) }}
  121.                     </div>
  122.                     <div class="fCheckBox">
  123.                         <span>*Campos obligatorios</span>
  124.                         <div class="formCheckbox">
  125.                             <input type="checkbox" id="1" name="check_terminos" class="validate[required]" />
  126.                             <label for="1"
  127.                                 >He leído y acepto las <a href="{{ path('privacy') }}" target="_blank">Políticas de privacidad</a></label
  128.                             >
  129.                         </div>
  130.                     </div>
  131.                     {% if info.captchaShow %}
  132.                     <div style="margin-bottom:10px; position: relative; width: max-content;">
  133.                         <div id="html_element"></div>
  134.                     </div>
  135.                     {% endif %}
  136.                     <div class="formButtonCtn">
  137.                         <button class="f-guardar-contacto-general hidden_button_send" id="btnQuote">Enviar</button>
  138.                         <button class="show_button_send">Enviando... <span class="icon-flecha-derecha"></span></button>
  139.                     </div>
  140.                   {{ form_end(form) }}
  141.             </div>
  142.         </div>
  143.         <ul class="cotizar_datos">
  144.             {% if  home.formAddress %}
  145.             <li>
  146.                 <h3>DIRECCIÓN</h3>
  147.                 <a href="{{ home.formAddressUrl }}"
  148.                     >{{ home.formAddress }}</a
  149.                 >
  150.             </li>
  151.             {% endif %}
  152.             {% if home.formPhone %}
  153.             <li>
  154.                 <h3>CENTRAL TELEFÓNICA</h3>
  155.                 <a href="tel:{{ home.formPhone|only_numbers }}">{{ home.formPhone }}</a>
  156.             </li>
  157.             {% endif %}
  158.             {% if home.formEmail %}
  159.             <li>
  160.                 <h3>E-MAIL</h3>
  161.                 <a href="mailto:{{ home.formEmail|trim|lower }}">{{ home.formEmail }}</a>
  162.             </li>
  163.             {% endif %}
  164.             {% if home.formWhatsappNum %}
  165.             <li>
  166.                 <h3>whatsapp</h3>
  167.                 <a href="https://api.whatsapp.com/send?phone={{ home.formWhatsappNum|only_numbers }}&text={{home.formWhatsappMessage}}" target="_blank">
  168.                     {{ home.formWhatsappNum }}
  169.                 </a>
  170.             </li>
  171.             {% endif %}
  172.         </ul>
  173.     </article>
  174. </section>
  175. {% if home.storesShow and home.storeItemsActive %}
  176. <section>
  177.     <article class="wancho">
  178.         <ul class="cotizar_links flex">
  179.             {% for item in home.storeItemsActive %}
  180.             <li class="faw_link">
  181.                 <a href="{{ item.link }}" target="{{ item.target ? '_blank' : '_self' }}">
  182.                     {{ item.text }}
  183.                     <i class="icon-flecha-derecha"></i>
  184.                 </a>
  185.             </li>
  186.             {% endfor %}
  187.         </ul>
  188.     </article>
  189. </section>
  190. {% endif %}
  191. {% endblock %}
  192. {% block jsfinal %}
  193. <script src="{{ STATIC_URL }}js/validationform/jquery.validationEngine.js"></script>
  194. {% include 'front/templates/captcha.html.twig' %}
  195. <script type="text/javascript">
  196.     // cambia y quita los campos base a tipo de usuario a llenar formulario
  197.     const empresa = document.querySelector('#empresa');
  198.     const natural = document.querySelector('#natural');
  199.     const empresaGroup = document.getElementById('empresaGroup');
  200.     empresa.addEventListener('change', adjustableHeightCheck);
  201.     natural.addEventListener('change', adjustableHeightCheck);
  202.     $('#form_quote_docType').removeClass('validate[required]');
  203.     $('#form_quote_docNum').removeClass('validate[required, maxSize[15]]');
  204.     
  205.     function adjustableHeightCheck() {
  206.         if (!!document.getElementById('empresa').checked) {
  207.             $('#empresaGroup').css({'display' : 'flex'});
  208.             $('#personaGroup').css({'display' : 'none'});
  209.             $('#form_quote_ruc').addClass('validate[required, maxSize[15]]');
  210.             $('#form_quote_factory').addClass('validate[required, maxSize[125]]');
  211.             $('#form_quote_docType').removeClass('validate[required]');
  212.             $('#form_quote_docNum').removeClass('validate[required, maxSize[15]]');
  213.             $('#form_quote_isPerson').prop("checked", false);
  214.         } else {
  215.             $('#empresaGroup').css({'display' : 'none'});
  216.             $('#personaGroup').css({'display' : 'flex'});
  217.             $('#form_quote_ruc').removeClass('validate[required, maxSize[15]]');
  218.             $('#form_quote_factory').removeClass('validate[required, maxSize[125]]');
  219.             $('#form_quote_docType').addClass('validate[required]');
  220.             $('#form_quote_docNum').addClass('validate[required, maxSize[15]]');
  221.             $('#form_quote_isPerson').prop("checked", true);
  222.         }
  223.     }
  224.     /*
  225.     function adjustableHeightCheck() {
  226.         if (!!document.getElementById('empresa').checked) {
  227.             empresaGroup.style.display = 'flex';
  228.             empresaGroup.querySelectorAll('input').forEach(e => {
  229.                 e.removeAttribute('disabled');
  230.             });
  231.         } else {
  232.             empresaGroup.style.display = 'none';
  233.             empresaGroup.querySelectorAll('input').forEach(e => {
  234.                 e.setAttribute('disabled', true);
  235.             });
  236.         }
  237.     }
  238.     */
  239.     // cambia y quita los campos base a tipo de usuario a llenar formulario
  240.     $(() => {
  241.         $('form').validationEngine('attach', {
  242.             promptPosition: 'bottomLeft',
  243.             autoHidePrompt: true,
  244.             autoPositionUpdate: false,
  245.             autoHideDelay: 3000,
  246.             addFailureCssClassToField: 'inputError',
  247.             binded: false,
  248.             scroll: false,
  249.             validateNonVisibleFields: true,
  250.             showOneMessage: false,
  251.         });
  252.         // AQUI EL EVENTO PARA ENVIAR PROMOCION
  253.     });
  254.     $('#form_quote_typeMachine').change(function(e) {
  255.         e.preventDefault();
  256.         $('#form_quote_typeModel_temp').empty();
  257.         let category = $(this).find('option:selected').data('slug');
  258.         $.get('{{ path("sync_machines") }}', {'category':category}, function(resp){
  259.             if(resp.status == true) {
  260.                 $('#form_quote_typeModel_temp').html(resp.data);
  261.             } else {
  262.                 $('#form_quote_typeModel_temp').html('<option value="" selected="selected" disabled>Selecione Modelo*</option>');
  263.             }
  264.         });
  265.     });
  266.     $('#form_quote_typeMachine').change();
  267.     $('#btnQuote').on('click', function(event) {
  268.         event.preventDefault();
  269.         $('#form_quote_typeModel').val($('#form_quote_typeModel_temp').val());
  270.         let btn = $(this);
  271.         let form = btn.closest('form');
  272.         var valid = form.validationEngine('validate');
  273.         btn.prop('disabled', true);
  274.         if(valid  && validarRecaptcha()){
  275.             document.querySelector('.general_form').classList.add('submit_form')
  276.             form.submit();
  277.         } else {
  278.             btn.prop('disabled', false);
  279.             return false;
  280.         }
  281.         
  282.     });
  283. </script>
  284. {% endblock %}