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

Open in your IDE?
  1. {% extends "front/_common/_base.html.twig" %}
  3. {% block linkcanonical %}
  4.     <link rel="canonical" href="{{ absolute_url(path('parts')) }}">
  5.     {% if info.captchaShow %}
  6.     <script type="text/javascript">
  7.         var onloadCallback = function() {
  8.             grecaptcha.render('html_element', {
  9.             'sitekey' : '{{ info.captchaSite }}'
  10.             });
  11.         };
  12.     </script>
  13.     {% endif %}
  14. {% endblock %}
  16. {% block cssadicional %}{% endblock %}
  18. {% block classbody %}{% endblock %}
  20. {% block content %}
  21. <section class="b20">
  22.     <article class="b20_top">
  23.         <div class="wancho">
  24.             <div class="general_breadcrumbs">
  25.                 <ul>
  26.                     <li><a href="{{ path('home') }}">INICIO</a></li>
  27.                     <li><a href="{{ path('about') }}" aria-selected="true">REPUESTOS</a></li>
  28.                 </ul>
  29.             </div>
  30.             <div class="main_title_layout">
  31.                 {% if home.mainPrefix %}
  32.                 <h2>{{ home.mainPrefix }}</h2>
  33.                 {% endif %}
  34.                 {% if home.mainTitle %}
  35.                 <h1 class="general_title">{{ home.mainTitle }}</h1>
  36.                 {% endif %}
  37.             </div>
  38.         </div>
  39.     </article>
  40.     <article class="b20_ctn">
  41.         <div class="share_wrapper">
  42.             <ul>
  43.                 <li><a href="" class="icon-facebook facebook-share-fixed"></a></li>
  44.                 <li><a href="" class="icon-twitter twitter-share-fixed"></a></li>
  45.                 <li>
  46.                     <a
  47.                         href="https://api.whatsapp.com/send?text=FAW - REPUESTOS {{ absolute_url(path('parts')) }}"
  48.                         class="icon-whatsapp"
  49.                         target="_blank"
  50.                         data-action="share/whatsapp/share"
  51.                     ></a>
  52.                 </li>
  53.             </ul>
  54.         </div>
  55.         <div class="b20_fixed_ctn">
  56.             <div class="b20_form repuestos">
  57.                 {% if home.formTitle %}
  58.                 <h6>{{ home.formTitle }}</h6>
  59.                 {% endif %}
  60.                 <p>{{ home.formText }}</p>
  61.                 <div class="general_form">
  62.                       {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
  63.                         {{ form_widget(form.utmSource, {'attr': {'class': 'form_utmsource'}}) }}
  64.                         {{ form_widget(form.utmMedium, {'attr': {'class': 'form_utmmedium'}}) }}
  65.                         {{ form_widget(form.utmCampaign, {'attr': {'class': 'form_utmcampaign'}}) }}
  66.                         {{ form_widget(form.utmContent, {'attr': {'class': 'form_utmcontent'}}) }}
  67.                         {{ form_widget(form.utmTerm, {'attr': {'class': 'form_utmterm'}}) }}
  68.                         {{ form_widget(form.gclid, {'attr': {'class': 'gclid'}}) }}
  69.                         <div class="fInput">
  70.                             <label for="nombre">Nombres</label>
  71.                              {{ form_widget(form.name, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
  72.                         </div>
  73.                         <div class="fInput">
  74.                             <label for="apellidos">Apellidos</label>
  75.                              {{ form_widget(form.lastname, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
  76.                         </div>
  77.                         <div class="fInput">
  78.                             <label for="DNI">DNI*</label>
  79.                              {{ form_widget(form.doc, {'attr': {'class':'validate[required, maxSize[8]] validKeypress', 'data-maxChar':'8', 'data-expression':'number'}}) }}
  80.                         </div>
  81.                         <div class="fInput">
  82.                             <label for="telefono">Teléfono*</label>
  83.                              {{ form_widget(form.phone, {'attr': {'class':'validate[required, maxSize[15]] validKeypress', 'type': 'tel', 'data-maxChar':'15', 'data-expression':'number'}}) }}
  84.                         </div>
  85.                         <div class="fInput">
  86.                             <label for="correo">Correo Electrónico*</label>
  87.                              {{ form_widget(form.email, {'attr': {'class':'validate[required, maxSize[100]] validKeypress', 'type': 'email', 'data-maxChar':'100', 'data-expression':'email'}}) }}
  88.                         </div>
  89.                         <div class="fInput">
  90.                             <label for="placa">Placa*</label>
  91.                              {{ form_widget(form.placa, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50'}}) }}
  92.                         </div>
  93.                         <div class="fInput">
  94.                             <label for="modelo">Modelo*</label>
  95.                              {{ form_widget(form.model, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50'}}) }}
  96.                         </div>
  97.                         <div class="fInput">
  98.                             <label for="Mensaje">Mensaje</label>
  99.                              {{ form_widget(form.message, {'attr': {'class':'validate[maxSize[255]]', 'data-maxChar' : '255'}}) }}
  100.                         </div>
  101.                         <div class="fCheckBox">
  102.                             <span>*Campos obligatorios</span>
  103.                             <div class="formCheckbox">
  104.                                 <input type="checkbox" id="1" name="check_terminos" class="validate[required]" />
  105.                                 <label for="1"
  106.                                     >He leído y acepto las
  107.                                     <a href="{{ path('privacy') }}" target="_blank">Políticas de privacidad</a></label
  108.                                 >
  109.                             </div>
  110.                         </div>
  111.                         {% if info.captchaShow %}
  112.                         <div style="margin-bottom:10px; position: relative; width: max-content;">
  113.                             <div id="html_element"></div>
  114.                         </div>
  115.                         {% endif %}
  116.                         <div class="formButtonCtn">
  117.                             <button class="f-guardar-contacto-general hidden_button_send" id="btnParts">Enviar</button>
  118.                             <button class="show_button_send">Enviando... <span class="icon-flecha-derecha"></span></button>
  120.                         </div>
  121.                       {{ form_end(form) }}
  122.                 </div>
  123.             </div>
  124.         </div>
  125.         <div class="wancho">
  126.             <div class="b20_info repuestos">
  127.                 <div class="gParrafo">
  128.                     {{ home.mainText|raw }}
  129.                 </div>
  130.                 {% if home.mainBg|image_path %}
  131.                 <img src="{{ asset(home.mainBg|image_path) }}" alt="{{ home.mainBg|image_alt }}" class="b20_img" />
  132.                 {% endif %}
  133.                 {% if home.mainSubtitle %}
  134.                 <h4>{{ home.mainSubtitle }}</h4>
  135.                 {% endif %}
  136.                 <ul class="repuesto_list">
  137.                     {% for item in home.mainItemsActive %}
  138.                     <li class="respuesto_item">
  139.                         <div class="respuesto_item_img">
  140.                             <img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}"/>
  141.                         </div>
  142.                         <div class="repuesto_item_info">
  143.                             <h5>{{ item.title }}</h5>
  144.                             <div class="gParrafo">
  145.                                 <p>
  146.                                     {{ item.texto }}
  147.                                 </p>
  148.                             </div>
  149.                         </div>
  150.                     </li>
  151.                     {% endfor %}
  152.                 </ul>
  153.             </div>
  154.         </div>
  155.     </article>
  156.     {% if home.linksShow and home.linksItemsActive %}
  157.     <article class="b21">
  158.         <div class="wancho">
  159.             {% if  home.linksTitle %}
  160.             <h6>{{ home.linksTitle }}</h6>
  161.             {% endif %}
  162.             <ul class="flex">
  163.                 {% for item in home.linksItemsActive %}
  164.                 <li class="servicio_item {{ loop.first ? 'layout_1' : 'layout_2'}}">
  165.                     {% if item.type == 'wsp' %}
  166.                     {% set link = 'https://api.whatsapp.com/send?phone='~ item.wspNum ~'&text=' ~ item.wspMessage %}
  167.                     {% else %}
  168.                     {% set link = item.link %}
  169.                     {% endif %}
  170.                     
  171.                     <a href="{{ link }}" target="{{ item.target ? 'blank' : '_self' }}">
  172.                         <img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}" />
  173.                         <span>{{ item.title }}</span>
  174.                         {% if item.type == 'wsp' %}
  175.                         <i class="icon-whatsapp1"></i>
  176.                         {% else %}
  177.                             {% if item.target %}
  178.                             <i class="icon-link-enterno"></i>
  179.                             {% else %}
  180.                             <i class="icon-flecha-derecha"></i>
  181.                             {% endif %}
  182.                         {% endif %}
  183.                     </a>
  184.                 </li>
  185.                 {% endfor %}
  186.             </ul>
  187.         </div>
  188.     </article>
  189.     {% endif %}
  190.     
  191.     
  192. </section>
  193. {% endblock %}
  195. {% block jsfinal %}
  196. <script src="{{ STATIC_URL }}js/validationform/jquery.validationEngine.js"></script>
  197. {% include 'front/templates/captcha.html.twig' %}
  198. <script type="text/javascript">
  199.     WidthChange(768, () => {
  200.         document.querySelector('.b20_info').appendChild(document.querySelector('.b20_form'));
  201.     });
  202.     $('form').validationEngine('attach', {
  203.         promptPosition: 'bottomLeft',
  204.         autoHidePrompt: true,
  205.         autoPositionUpdate: false,
  206.         autoHideDelay: 3000,
  207.         addFailureCssClassToField: 'inputError',
  208.         binded: false,
  209.         scroll: false,
  210.         validateNonVisibleFields: true,
  211.         showOneMessage: false,
  212.     });
  214.     $('#btnParts').on('click', function(event) {
  215.         event.preventDefault();
  216.         let btn = $(this);
  217.         let form = btn.closest('form');
  218.         var valid = form.validationEngine('validate');
  219.         btn.prop('disabled', true);
  220.         
  221.         if(valid  && validarRecaptcha()){
  222.             document.querySelector('.general_form').classList.add('submit_form')
  223.             form.submit();
  225.         } else {
  226.             btn.prop('disabled', false);
  227.             return false;
  228.         }
  229.     });
  231.     
  232. </script>
  233. {% endblock %}