templates/front/services/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('service', {'slug': service.slug})) }}">
  5. {% endblock %}
  7. {% block cssadicional %}{% endblock %}
  9. {% block classbody %}{% endblock %}
  11. {% block content %}
  12.     <section class="b5 scroll-wrapper">
  13.         <div class="b5Wrapper">
  14.             <picture class="b5BannerPicture">
  15.                 <source srcset="{{ asset(service.bannerImage|image_path) }}">
  16.                 <img class="b5BannerPictureImage" src="{{ asset(service.bannerImage|image_path) }}" width="1600" alt="{{ service.bannerImage|image_alt }}">
  17.             </picture>
  18.             {% if service.bannerText %}
  19.                 <div class="b5BannerText">
  20.                     <h1 class="scroll-item">{{ service.bannerText }}</h1>
  21.                 </div>
  22.             {% endif %}
  23.         </div>
  24.     </section>
  26.     <section class="b21">
  27.         <div class="wanchoSecondary">
  28.             <div class="scroll-wrapper">
  30.                 <ul class="b21MigaCustom b10LeftMigaPan scroll-item">
  31.                     <li><a href="{{ path('home') }}">Home</a></li>&nbsp;/ &nbsp;
  32.                     <li><a href="{{ path('after_sales') }}">Postventa</a></li>&nbsp;/ &nbsp;
  33.                     <li><a href="{{ path('services') }}">Servicios</a></li>&nbsp;/ &nbsp;
  34.                     <li class="active"><a href="{{ path('service', {'slug': service.slug}) }}">{{ service.title }}</a></li>
  35.                 </ul>
  36.             </div>
  37.             <div class="b21Wrap">
  38.                 <div class="b21Left scroll-wrapper">
  39.                     <h4 class="titleStandard b21Title scroll-item">{{ service.detailTitle }}</h4>
  40.                     <div class="b21Text scroll-item">
  41.                         <p>{{ service.detailText|nl2br }}</p>
  42.                     </div>
  43.                     {% if service.contactShow %}
  44.                         <div class="b21Data">
  45.                             {% if service.contactTitle %}
  46.                                 <h4 class="titleStandard b21DataTitle scroll-item">{{ service.contactTitle }}</h4>
  47.                             {% endif %}
  48.                             {% if service.contactPhone %}
  49.                                 <div class="b21DataiTem scroll-item">
  50.                                     <a href="tel:{{ service.contactPhone|only_numbers }}"><i class="icon-iconos-15"></i> {{ service.contactPhone }}</a>
  51.                                 </div>
  52.                             {% endif %}
  53.                             {% if service.contactEmail %}
  54.                                 <div class="b21DataiTem scroll-item">
  55.                                     <a href="mailto:{{ service.contactEmail }}"><i class="icon-iconos-17"></i> {{ service.contactEmail }}</a>
  56.                                 </div>
  57.                             {% endif %}
  58.                             {% if service.contactAddress %}
  59.                                 <div class="b21DataiTem scroll-item">
  60.                                     <a href="https://www.google.com/maps/search/{{ service.contactAddress }}" target="_blank">
  61.                                         <i class="icon-iconos-18"></i> {{ service.contactAddress }}</a>
  62.                                 </div>
  63.                             {% endif %}
  64.                         </div>
  65.                     {% endif %}
  66.                 </div>
  67.                 <div class="b21Right scroll-wrapper">
  68.                     <div class="b21WrapContact scroll-item">
  69.                         {% if forms.serviceTitle %}
  70.                             <h4 class="titleStandard b21TitleContact">{{ forms.serviceTitle }}</h4>
  71.                         {% endif %}
  72.                         {{ form_start(form) }}
  73.                             {% include 'front/templates/form_utm_fields.html.twig' %}
  74.                             {{ form_widget(form.establishment) }}
  75.                             {{ form_widget(form.service) }}
  76.                             <div class="b21Input">
  77.                                 {{ form_widget(form.document, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-number form-contact validate[required,custom[onlyNumberSp]]'}}) }}
  78.                                 <span class="form-label">RUC o DNI*</span>
  79.                             </div>
  80.                             <div class="b21Input">
  81.                                 {{ form_widget(form.company, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }}
  82.                                 <span class="form-label">Empresa/Razón social*</span>
  83.                             </div>
  84.                             <div class="b21Input">
  85.                                 {{ form_widget(form.name, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }}
  86.                                 <span class="form-label">Nombres*</span>
  87.                             </div>
  88.                             <div class="b21Input">
  89.                                 {{ form_widget(form.lastName, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }}
  90.                                 <span class="form-label">Apellidos*</span>
  91.                             </div>
  92.                             <div class="b21Input">
  93.                                 {{ form_widget(form.email, {'attr': {'class': 'form-contact validate[required,custom[email]]'}}) }}
  94.                                 <span class="form-label">Correo*</span>
  95.                             </div>
  96.                             <div class="b21Input">
  97.                                 {{ form_widget(form.phone, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-number form-contact validate[required,custom[onlyNumberSp]]'}}) }}
  98.                                 <span class="form-label">Teléfono*</span>
  99.                             </div>
  100.                             <div class="b21Select">
  101.                                 <select class="form-contact-select validate[required]" id="establishment">
  102.                                     <option value="" disabled selected></option>
  103.                                     {% for item in establishmentsArray %}
  104.                                         <option value="{{ item.title }}">{{ item.title }}</option>
  105.                                     {% endfor %}
  106.                                 </select>
  107.                                 <span class="form-label">Establecimiento*</span>
  108.                                 <i class="icon-iconos-10"></i>
  109.                             </div>
  110.                             <div class="b21Paragraph">
  111.                                 (*) Campos obligatorios.
  112.                             </div>
  113.                             <div class="b21WrapCheckbox">
  114.                                 <input type="checkbox" id="b21Checkbox" class="validate[required]" name="">
  115.                                 <label for="b21Checkbox">Acepto las <a href="{{ path('privacy_policies') }}" target="_blank">Políticas de Privacidad</a></label>
  116.                             </div>
  117.                             <button type="submit" class="buttonStandard gray b21Btn">Enviar</button>
  118.                         {{ form_end(form) }}
  119.                     </div>
  120.                 </div>
  121.             </div>
  122.         </div>
  123.     </section>
  124. {% endblock %}
  126. {% block jsfinal %}
  127.     <script type="text/javascript">
  128.         jQuery(function ($) {
  129.             $("form").validationEngine('attach', {
  130.                 promptPosition: "topLeft",
  131.                 autoHidePrompt: true,
  132.                 autoPositionUpdate: false,
  133.                 autoHideDelay: 2000,
  134.                 binded: false,
  135.                 scroll: false,
  136.                 validateNonVisibleFields: true
  137.             })
  139.             $('#establishment').on('change', function () {
  140.                 $('#form_service_establishment').val($(this).val());
  141.             })
  143.             $('#form_service_service').val('{{ service.title }}');
  145.             $('#BtnLibro').on('click', function (event) {
  146.                 event.preventDefault();
  147.                 const item = $(this);
  148.                 const form = item.closest('form');
  149.                 const valid = form.validationEngine('validate');
  150.                 if (valid) {
  151.                     form.submit();
  152.                 }
  153.             });
  154.         })
  155.     </script>
  156. {% endblock %}