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 %}
  8.     <link rel="stylesheet" href="{{ asset('static/js/swiper/swiper.css') }}"/>
  9.     <link rel="stylesheet" href="{{ asset('static/js/datepicker/jquery-ui.min.css') }}"/>
  10. {% endblock %}
  12. {% block classbody %}{% endblock %}
  14. {% block content %}
  15.     <section class="servicio_asistencia_bg" style="background-image: url('{{ asset(service.bannerImage|image_path) }}');">
  16.         <div class="servicios_asistencia_wrap ww_center">
  17.             <div class="servicio_asistencia_info">
  18.                 <ul>
  19.                     <li><a href="{{ path('home') }}">Inicio</a></li>
  20.                     <li><span>/</span></li>
  21.                     <li><a href="{{ path('services') }}">Servicios</a></li>
  22.                     <li><span>/</span></li>
  23.                     <li><a class="active">{{ service.title }}</a></li>
  24.                 </ul>
  25.                 {% if service.bannerTitle %}
  26.                     <h2>{{ service.bannerTitle }}</h2>
  27.                 {% endif %}
  28.                 {% if service.bannerText %}
  29.                     <p>{{ service.bannerText|nl2br }}</p>
  30.                 {% endif %}
  31.             </div>
  32.         </div>
  33.     </section>
  34.     <section class="b2service">
  35.         <div class="b2service_content ww_center" data-sticky-container="data-sticky-container">
  36.             <div class="b2service_left">
  37.                 {% if service.detailShow %}
  38.                     <div class="b2service_info">
  39.                         {% if service.detailShow %}
  40.                             {% if service.detailTitle %}
  41.                                 <h2>{{ service.detailTitle }}</h2>
  42.                             {% endif %}
  43.                             {% if service.detailText %}
  44.                                 {{ service.detailText|raw }}
  45.                             {% endif %}
  46.                         {% endif %}
  47.                         {% if service.benefitsShow %}
  48.                             {% if service.benefitsTitle %}
  49.                                 <h2>{{ service.benefitsTitle }}</h2>
  50.                             {% endif %}
  51.                             {% if service.benefitsText %}
  52.                                 {{ service.benefitsText|raw }}
  53.                             {% endif %}
  54.                             {% if service.benefitsImage|image_path %}
  55.                                 <figure>
  56.                                     <img src="{{ asset(service.benefitsImage|image_path) }}" width="635" height="270" alt="{{ service.benefitsImage|split_alt }}">
  57.                                 </figure>
  58.                             {% endif %}
  59.                         {% endif %}
  60.                         <div class="b2service_button">
  61.                             <a class="btn btn_grayline btn_icon" href="{{ path('network') }}">Ver Talleres<span class="icon-arrow_forward_ios"></span></a>
  62.                         </div>
  63.                     </div>
  64.                 {% endif %}
  65.                 <div class="b2service_contact">
  66.                     <h3 class="b2service_subtitle">Para más información:</h3>
  67.                     <div class="b2service_wrap">
  68.                         <div class="b2service_box">
  69.                             <span class="icon-phone_in_talk"></span>
  70.                             <p><a href="tel:{{ info.servicePhone|only_numbers }}">{{ info.servicePhone }}</a></p>
  71.                         </div>
  72.                         <div class="b2service_box">
  73.                             <span class="icon-mail_outline"></span>
  74.                             <p><a href="mailto:{{ info.serviceEmail }}">{{ info.serviceEmail }}</a></p>
  75.                         </div>
  76.                         <div class="b2service_box">
  77.                             <span class="icon-place-1"></span>
  78.                             <p><a href="{{ info.serviceAddress|google_maps_search }}" target="_blank">{{ info.serviceAddress }}</a></p>
  79.                         </div>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.             <div class="b2service_right sticky" data-margin-top="90" data-sticky-for="1025">
  84.                 <div class="b2service_form">
  85.                     {% if forms.serviceQuotationTitle %}
  86.                         <h2 class="b2service_form_title">{{ forms.serviceQuotationTitle }}</h2>
  87.                     {% endif %}
  88.                     <div class="b2service_fields">
  89.                         {{ form_start(form, {'attr': {'id': 'form_service'}}) }}
  90.                             {{ form_widget(form.typePerson) }}
  91.                             {{ form_widget(form.documentType) }}
  92.                             {{ form_widget(form.documentNumber) }}
  93.                             {{ form_widget(form.service) }}
  94.                             {{ form_widget(form.establishment) }}
  95.                             <input type="hidden" id="form_quotation_services_adviser_id" name="adviser_id">
  96.                             <div class="b2service_radios">
  97.                                 <div class="b2service_radio">
  98.                                     <input checked type="radio" name="b2service_group" value="Empresa" id="form_quotation_services_legal_person">
  99.                                     <label for="form_quotation_services_legal_person" class="b2service_radio_label">
  100.                                         <span class="b2service_radio_icon"></span>
  101.                                         <span class="b2service_radio_text">Soy empresa</span>
  102.                                     </label>
  103.                                 </div>
  104.                                 <div class="b2service_radio">
  105.                                     <input type="radio" name="b2service_group" value="Persona natural" id="form_quotation_services_natural_person">
  106.                                     <label for="form_quotation_services_natural_person" class="b2service_radio_label">
  107.                                         <span class="b2service_radio_icon"></span>
  108.                                         <span class="b2service_radio_text">Soy Persona Natural</span>
  109.                                     </label>
  110.                                 </div>
  111.                             </div>
  112.                             <div class="b2service_block">
  113.                                 <div class="b2service_item_column b2service_field_company" >
  114.                                     <div class="b2service_field">
  115.                                         <input type="text" id="form_quotation_services_document_number_legal_person" class="soloNumber inputEffect validate[required] form_quotation_services_document_number">
  116.                                         <label for="form_quotation_services_document_number_legal_person" class="b2service_boxlabel">RUC *</label>
  117.                                     </div>
  118.                                     <div class="b2service_field">
  119.                                         {{ form_widget(form.company, {'attr': {'class': 'validate[required] inputEffect'}}) }}
  120.                                         <label for="" class="b2service_boxlabel">Empresa</label>
  121.                                     </div>
  122.                                 </div>
  123.                                 <div class="b2service_item_column b2service_field_person" style="display:none">
  124.                                     <div class="b2service_field">
  125.                                         <select id="form_quotation_services_document_types" class="inputEffect">
  126.                                             <option value="" disabled selected></option>
  127.                                             {% for item in forms.documentTypes %}
  128.                                                 <option value="{{ item.title }}">{{ item.title }}</option>
  129.                                             {% endfor %}
  130.                                         </select>
  131.                                         <label class="b2service_boxlabel">Tipo de documento* <span class="icon-arrow_drop_down"></span></label>
  132.                                     </div>
  133.                                     <div class="b2service_field">
  134.                                         <input type="text" id="form_quotation_services_document_number_natural_person" class="inputEffect validate[required] form_quotation_services_document_number soloNumber">
  135.                                         <label for="form_quotation_services_document_number_natural_person" class="b2service_boxlabel">N° de documento</label>
  136.                                     </div>
  137.                                 </div>
  138.                                 <div class="b2service_item_column">
  139.                                     <div class="b2service_field">
  140.                                         {{ form_widget(form.name, {'attr': {'class': 'validate[required] inputEffect'}}) }}
  141.                                         <label for="" class="b2service_boxlabel">Nombres *</label>
  142.                                     </div>
  143.                                     <div class="b2service_field">
  144.                                         {{ form_widget(form.lastname, {'attr': {'class': 'validate[required] inputEffect'}}) }}
  145.                                         <label for="" class="b2service_boxlabel">Apellidos *</label>
  146.                                     </div>
  147.                                 </div>
  148.                                 <div class="b2service_item_column">
  149.                                     <div class="b2service_field">
  150.                                         {{ form_widget(form.phone, {'attr': {'class': 'validate[required, custom[phone]] soloNumber inputEffect'}}) }}
  151.                                         <label for="" class="b2service_boxlabel">Teléfono *</label>
  152.                                     </div>
  153.                                     <div class="b2service_field">
  154.                                         {{ form_widget(form.email, {'attr': {'class': 'validate[required,custom[email]] inputEffect'}}) }}
  155.                                         <label for="" class="b2service_boxlabel">Correo electrónico *</label>
  156.                                     </div>
  157.                                 </div>
  158.                                 <div class="b2service_item_column">
  159.                                     <div class="b2service_field">
  160.                                         {{ form_widget(form.date, {'attr': {'class': 'validate[required] inputEffect datepicker'}}) }}
  161.                                         <label class="b2service_boxlabel">Agendar cita <span class="icon-insert_invitation"></span></label>
  162.                                     </div>
  163.                                     <div class="b2service_field">
  164.                                         <select id="form_quotation_services_advisers" class="inputEffect">
  165.                                             <option value="" selected disabled></option>
  166.                                             <option value="0">Ninguno</option>
  167.                                             {% for item in advisers %}
  168.                                                 <option value="{{ item.id }}">{{ item.name }}</option>
  169.                                             {% endfor %}
  170.                                         </select>
  171.                                         <label for="form_quotation_services_advisers" class="b2service_boxlabel">Asesor (Opcional) <span class="icon-arrow_drop_down"></span></label>
  172.                                     </div>
  173.                                 </div>
  175.                                 <div class="b2service_item_row">
  176.                                     <div class="b2service_field">
  177.                                         <select id="form_quotation_services_establishments" class="inputEffect">
  178.                                             <option value="" selected disabled></option>
  179.                                             {% for item in establishments %}
  180.                                                 <option value="{{ item.title }} ({{ item.city.title }})">{{ item.title }} ({{ item.city.title }})</option>
  181.                                             {% endfor %}
  182.                                         </select>
  183.                                         <label for="form_quotation_services_establishments" class="b2service_boxlabel">Seleccione establecimiento <span class="icon-arrow_drop_down"></span></label>
  184.                                     </div>
  185.                                 </div>
  187.                                 <div class="b2service_item_row">
  188.                                     <div class="b2service_field">
  189.                                         {{ form_widget(form.message, {'attr': {'class': 'inputEffect'}}) }}
  190.                                         <label class="b2service_boxlabel">Mensaje</label>
  191.                                     </div>
  192.                                 </div>
  193.                             </div>
  194.                             <div class="b2service_required">
  195.                                 <p>* Campos obligatorios</p>
  196.                             </div>
  197.                             <div class="b2service_check">
  198.                                 <input type="checkbox" id="b2service_checkbox" class="validate[required]" name="">
  199.                                 <label for="b2service_checkbox" class="b2service_check_label">
  200.                                     <span class="b2service_check_icon"></span>
  201.                                     <p>He leído y acepto las <a href="{{ path('data_protection_policies') }}" target="_blank">Políticas de privacida</a></p>
  202.                                 </label>
  203.                             </div>
  204.                             <div class="b2service_button">
  205.                                 <button class="btn btn_blue btnFormService" id="btnFormService">Enviar</button>
  206.                             </div>
  207.                         {{ form_end(form) }}
  208.                     </div>
  209.                 </div>
  210.             </div>
  211.         </div>
  212.     </section>
  213. {% endblock %}
  215. {% block jsfinal %}
  216.     <script src="{{ asset('static/js/validationform/jquery.validationEngine-es.js') }}"></script>
  217.     <script src="{{ asset('static/js/validationform/staff.validationEngine.js') }}"></script>
  218.     <script src="{{ asset('static/js/datepicker/jquery-ui.min.js') }}"></script>
  219.     <script src="{{ asset('static/js/sticky.js') }}"></script>
  220.     <script>
  221.         var sticky = new Sticky('.sticky');
  222.         $(function(){
  223.             //- +++ Datepicker +++
  224.             $.datepicker.regional['es'] = {
  225.                 closeText: 'Cerrar',
  226.                 prevText: '<Ant',
  227.                 nextText: 'Sig>',
  228.                 currentText: 'Hoy',
  229.                 monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
  230.                 monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
  231.                 dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
  232.                 dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
  233.                 dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
  234.                 weekHeader: 'Sm',
  235.                 dateFormat: 'dd/mm/yy',
  236.                 firstDay: 1,
  237.                 isRTL: false,
  238.                 showMonthAfterYear: false,
  239.                 yearSuffix: ''
  240.             };
  241.             $.datepicker.setDefaults($.datepicker.regional['es']);
  243.             $('.datepicker').datepicker({
  244.                 minDate: 0,
  245.                 yearRange: "-0:+10",
  246.                 onSelect: function () {
  247.                     $(this).parent().find('.b2service_boxlabel').addClass('fijar');
  248.                     $(this).addClass('border');
  249.                 }
  250.             });
  251.             //- <<< END >>>
  253.             var b2serviceFields = $(".b2service_field input, .b2service_field textarea, .b2service_field select")
  254.             $(b2serviceFields).focusin(function () {
  255.                 $(this).addClass('border');
  256.             });
  257.             $(b2serviceFields).focusout(function () {
  258.                 if ($(this).val() === "") {
  259.                     $(this).removeClass('border');
  260.                 }
  261.             });
  262.             $(b2serviceFields).each(function () {
  263.                 if ($(this).val() != "") {
  264.                     $(this).addClass('border');
  265.                 }
  266.             });
  268.             $('.soloNumber').keypress(validateNumber);
  270.             function validateNumber(event) {
  271.                 var key = window.event ? event.keyCode : event.which;
  272.                 if (event.keyCode === 8 || event.keyCode === 46) {
  273.                     return true;
  274.                 } else if (key < 48 || key > 57) {
  275.                     return false;
  276.                 } else {
  277.                     return true;
  278.                 }
  279.             }
  281.             $('#form_quotation_services_service').val('{{ service.title }}');
  283.             $('#form_quotation_services_natural_person').on('change', function () {
  284.                 $('.b2service_field_company').hide();
  285.                 $('.b2service_field_person').show();
  286.             });
  288.             $('#form_quotation_services_legal_person').on('change', function () {
  289.                 $('.b2service_field_person').hide();
  290.                 $('.b2service_field_company').show();
  291.             });
  293.             $('#form_quotation_services_natural_person').on('change', function () {
  294.                 $('.quote_field_company').hide();
  295.                 $('.quote_field_person').show();
  296.             });
  298.             $('#form_quotation_services_legal_person').on('change', function () {
  299.                 $('.quote_field_person').hide();
  300.                 $('.quote_field_company').show();
  301.             });
  303.             $('#form_quotation_services_legal_person').on('change', function () {
  304.                 $('#form_quotation_services_typePerson').val($(this).val());
  305.                 $('#form_quotation_services_document_types').val('');
  306.                 $('#form_quotation_services_document_number_natural_person').val('');
  307.                 $('#form_quotation_services_document_number_legal_person').val('');
  308.                 $('#form_quotation_services_documentType').val('RUC');
  309.                 $('#form_quotation_services_documentNumber').val('');
  310.                 $('#form_quotation_services_company').val('');
  311.             })
  313.             $('#form_quotation_services_natural_person').on('change', function () {
  314.                 $('#form_quotation_services_typePerson').val($(this).val());
  315.                 $('#form_quotation_services_document_types').val('');
  316.                 $('#form_quotation_services_document_number_natural_person').val('');
  317.                 $('#form_quotation_services_document_number_legal_person').val('');
  318.                 $('#form_quotation_services_documentType').val('');
  319.                 $('#form_quotation_services_documentNumber').val('');
  320.             })
  322.             $('#form_quotation_services_legal_person').trigger('change');
  324.             $('.form_quotation_services_document_number').on('keyup', function () {
  325.                 $('#form_quotation_services_documentNumber').val($(this).val());
  326.             })
  328.             $('#form_quotation_services_document_types').on('change', function () {
  329.                 $('#form_quotation_services_documentType').val($(this).val());
  330.             })
  332.             $('#form_quotation_services_establishments').on('change', function () {
  333.                 $('#form_quotation_services_establishment').val($(this).val());
  334.             })
  336.             $('#form_quotation_services_advisers').on('change', function () {
  337.                 $('#form_quotation_services_adviser').val($(this).val());
  338.                 $('#form_quotation_services_adviser_id').val($(this).val());
  339.             })
  341.             const form_quotation_services = $('#form_service');
  342.             const form_quotation_services_button = $('#btnFormService');
  343.             form_quotation_services.validationEngine('attach', {
  344.                 promptPosition: "topLeft",
  345.                 autoHidePrompt: true,
  346.                 autoHideDelay: 3000,
  347.                 binded: false,
  348.                 scroll: false
  349.             });
  350.             form_quotation_services_button.on('click', function (event) {
  351.                 event.preventDefault();
  352.                 const valid = form_quotation_services.validationEngine('validate');
  353.                 $(this).attr('disabled', true);
  354.                 if (valid) {
  355.                     form_quotation_services.submit();
  356.                 } else {
  357.                     $(this).attr('disabled', false);
  358.                 }
  359.             });
  360.         });
  361.     </script>
  362. {% endblock %}