templates/front/machine/service.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(app.request.attributes.get('_route'),
  5.                        app.request.attributes.get('_route_params')) ) }}">
  6. {% endblock %}
  8. {% block cssadicional %}
  9.     <link rel="stylesheet" href="{{STATIC_URL}}js/owl-carousel/owl.carousel.css" />
  10.     {% if info.captchaShow %}
  11.     <script type="text/javascript">
  12.         var onloadCallback = function() {
  13.             grecaptcha.render('html_element', {
  14.             'sitekey' : '{{ info.captchaSite }}'
  15.             });
  16.         };
  17.     </script>
  18.     {% endif %}
  19. {% endblock %}
  21. {% block classbody %} sticky {% endblock %}
  23. {% block content %}
  24. <section class="b20">
  25.     <article class="b20_top">
  26.         <div class="wancho">
  27.             <div class="general_breadcrumbs">
  28.                 <ul>
  29.                     <li><a href="{{ path('home') }}">INICIO</a></li>
  30.                     <li><a href="{{ path('services') }}">SERVICIO</a></li>
  31.                     <li><a href="{{ path('service', {'slug' : detail.slug } ) }}" aria-selected="true">{{ detail.title|upper }}</a></li>
  32.                 </ul>
  33.             </div>
  34.             <div class="main_title_layout">
  35.                 {% if detail.mainPrefix  %}
  36.                 <h2>{{ detail.mainPrefix }}</h2>
  37.                 {% endif %}
  38.                 {% if detail.mainTitle %}
  39.                 <h1 class="general_title">{{ detail.mainTitle }}</h1>
  40.                 {% endif %}
  41.             </div>
  42.         </div>
  43.     </article>
  44.     <article class="b20_ctn">
  45.         <div class="share_wrapper">
  46.             <ul>
  47.                 <li><a href="" class="icon-facebook facebook-share-fixed"></a></li>
  48.                 <li><a href="" class="icon-twitter twitter-share-fixed"></a></li>
  49.                 <li>
  50.                     <a
  51.                         href="https://api.whatsapp.com/send?text=FAW - Servicios {{ absolute_url(path('services')) }}"
  52.                         class="icon-whatsapp"
  53.                         target="_blank"
  54.                         data-action="share/whatsapp/share"
  55.                     ></a>
  56.                 </li>
  57.             </ul>
  58.         </div>
  59.         <div class="b20_fixed_ctn">
  60.             <div class="b20_form">
  61.                 {% if  detail.formText %}
  62.                 <span>{{ detail.formText }}</span>
  63.                 {% endif %}
  64.                 <div class="general_form">
  65.                       {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
  66.                         {{ form_widget(form.utmSource, {'attr': {'class': 'form_utmsource'}}) }}
  67.                         {{ form_widget(form.utmMedium, {'attr': {'class': 'form_utmmedium'}}) }}
  68.                         {{ form_widget(form.utmCampaign, {'attr': {'class': 'form_utmcampaign'}}) }}
  69.                         {{ form_widget(form.utmContent, {'attr': {'class': 'form_utmcontent'}}) }}
  70.                         {{ form_widget(form.utmTerm, {'attr': {'class': 'form_utmterm'}}) }}
  71.                         {{ form_widget(form.gclid, {'attr': {'class': 'gclid'}}) }}
  72.                         <div class="fInput">
  73.                             <label for="nombre">Nombres</label>
  74.                              {{ form_widget(form.name, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
  75.                         </div>
  76.                         <div class="fInput">
  77.                             <label for="apellidos">Apellidos</label>
  78.                              {{ form_widget(form.lastname, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
  79.                         </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>
  90.                         <div class="fInput fSelect">
  91.                              {{ form_widget(form.typeService, {'attr': {'class':'validate[required]'}}) }}
  92.                         </div>
  94.                         <div class="fInput fSelect">
  95.                              {{ form_widget(form.typeStore, {'attr': {'class':'validate[required]'}}) }}
  96.                         </div>
  98.                         <div class="fCheckBox">
  99.                             <span>*Campos obligatorios</span>
  100.                             <div class="formCheckbox">
  101.                                 <input type="checkbox" id="1" name="check_terminos" class="validate[required]" />
  102.                                 <label for="1"
  103.                                     >He leído y acepto las
  104.                                     <a href="{{ path('privacy') }}" target="_blank">Políticas de privacidad</a></label
  105.                                 >
  106.                             </div>
  107.                         </div>
  108.                         {% if info.captchaShow %}
  109.                         <div style="margin-bottom:10px; position: relative; width: max-content;">
  110.                             <div id="html_element"></div>
  111.                         </div>
  112.                         {% endif %}
  113.                         <div class="formButtonCtn">
  114.                             <button class="f-guardar-contacto-general hidden_button_send" id="btnService">Enviar</button>
  115.                             <button class="show_button_send">Enviando... <span class="icon-flecha-derecha"></span></button>
  116.                         </div>
  117.                       {{ form_end(form) }}
  118.                 </div>
  119.             </div>
  120.         </div>
  121.         <div class="wancho">
  122.             <div class="b20_info">
  123.                 {{ detail.mainDescrip|raw }}
  124.                 {#
  125.                 <div class="gParrafo">
  126.                     <p>
  127.                         En San Bartolomé estamos comprometidos con generar la mayor disponibilidad mecánica a un
  128.                         bajo costo operativo a nuestros clientes, para ello ponemos a disposición nuestros
  129.                         programas de mantenimiento preventivo diseñados para su operación en particular.
  130.                     </p>
  131.                 </div>
  132.                 <h3>¿Cuáles son los beneficios del programa?</h3>
  133.                 <ul>
  134.                     <li>
  135.                         Puede ingresar su vehículo en cualquiera de nuestros talleres autorizados a nivel
  136.                         nacional
  137.                     </li>
  138.                     <li>Recordatorio para programar su cita en cualquiera de nuestros talleres de la red.</li>
  139.                     <li>
  140.                         Evitar fallas catastróficas de componentes del tren motriz a través de alertas por los
  141.                         análisis de aceites realizados en cada servicio.
  142.                     </li>
  143.                     <li>Aumentar la vida útil del vehículo.</li>
  144.                     <li>Mejorar el valor de reventa de la unidad.</li>
  145.                     <li>Certificado de Mantenimientos realizados por San Bartolomé.</li>
  146.                     <li>Facilidades de pago a través de financiamiento directo</li>
  147.                 </ul>
  148.                 #}
  149.             </div>
  150.             {% if detail.aboutShow %}
  151.             <div class="b20_list">
  152.                 <h4>{{ detail.aboutTitle }}</h4>
  153.                 <ul class="servicio_wrap">
  154.                     {% for item in detail.aboutItemsActive %}
  155.                     <li><img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}" /></li>
  156.                     {% endfor %}
  157.                 </ul>
  158.             </div>
  159.             {% endif %}
  160.         </div>
  161.     </article>
  162.     {% if detail.promoShow %}
  163.     <div class="wancho">
  164.         <a href="{{ detail.promoUrl }}" target="{{ detail.promoTarget ? '_blank' : '_self' }}" class="promoBtn">
  165.             <picture>
  166.                 <source media="(max-width:650px)" srcset="{{ asset(detail.promoImgBg1|image_path) }}" />
  167.                 <img src="{{ asset(detail.promoImg|image_path) }}" alt="promocion" />
  168.             </picture>
  169.         </a>
  170.     </div>
  171.     {% endif %}
  172.     
  173. </section>
  174. {% endblock %}
  176. {% block jsfinal %}
  177. <script src="{{ STATIC_URL }}js/validationform/jquery.validationEngine.js"></script>
  178. <script src="{{STATIC_URL}}js/owl-carousel/owl.carousel.js"></script>
  179. {% include 'front/templates/captcha.html.twig' %}
  180. <script type="text/javascript">
  181.     WidthChange(768, () => {
  182.         document.querySelector('.b20_info').appendChild(document.querySelector('.b20_form'));
  183.     });
  184.     var cantItems = $('.servicio_wrap li').length;
  185.     if (cantItems > 1) {
  186.         $('.servicio_wrap').addClass('b20-carousel');
  187.         $('.servicio_wrap').addClass('owl-carousel');
  188.         $('.b20-carousel').owlCarousel({
  189.             loop: false,
  190.             margin: 0,
  191.             nav: true,
  192.             items: 1,
  193.             dots: false,
  194.         });
  195.     }
  197.     $('form').validationEngine('attach', {
  198.         promptPosition: 'bottomLeft',
  199.         autoHidePrompt: true,
  200.         autoPositionUpdate: false,
  201.         autoHideDelay: 3000,
  202.         addFailureCssClassToField: 'inputError',
  203.         binded: false,
  204.         scroll: false,
  205.         validateNonVisibleFields: true,
  206.         showOneMessage: false,
  207.     });
  209.     $(".b20_info p").wrap( '<div class="gParrafo"></div>');
  211.     $('#btnService').on('click', function(event) {
  212.         event.preventDefault();
  213.         let btn = $(this);
  214.         let form = btn.closest('form');
  215.         var valid = form.validationEngine('validate');
  216.         btn.prop('disabled', true);
  218.         if (valid && validarRecaptcha()) {
  219.             document.querySelector('.general_form').classList.add('submit_form')
  220.             form.submit();
  221.         } else {
  222.             btn.prop('disabled', false);
  223.             return false;
  224.         }
  226.     });
  228. </script>
  229. {% endblock %}