templates/front/machine/detail.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'), app.request.attributes.get('_route_params'))) }}">
  5. {% endblock %}
  7. {% block cssadicional %}
  8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
  9.     {% if info.captchaShow %}
  10.     <script type="text/javascript">
  11.         var onloadCallback = function() {
  12.             grecaptcha.render('html_element', {
  13.             'sitekey' : '{{ info.captchaSite }}'
  14.             });
  15.         };
  16.     </script>
  17.     {% endif %}
  18. {% endblock %}
  20. {% block classbody %}{% endblock %}
  22. {% block content %}
  24. <!-- banner -->
  25. {% if detail.mainShow %}
  26. <section class="b41 detalleBanner">
  27.     {% if home.mainQuoteShow %}
  28.     <a href="#form" id="cotizaBtn">
  29.         <img src="{{ asset(home.mainQuoteImg|image_path|default('/static/img/cotiza.png') ) }}" alt="{{ home.mainQuoteImg|image_alt }}" />
  30.         {% if home.mainQuoteText %}
  31.         <small>{{ home.mainQuoteText }}</small>
  32.         {% endif %}
  33.     </a>
  34.     {% endif %}
  35.     <picture>
  36.         <source media="(max-width:480px)" srcset="{{ asset(detail.mainImgBg1|image_path|default(detail.mainImg|image_path)) }}" />
  37.         <source media="(max-width:768px)" srcset="{{ asset(detail.mainImgBg2|image_path|default(detail.mainImg|image_path)) }}" />
  38.         <img src="{{ asset(detail.mainImg|image_path) }}" />
  39.     </picture>
  40.     <article class="b41__info wancho">
  41.         <div class="general_breadcrumbs">
  42.             <ul>
  43.                 <li><a href="{{ path('home') }}">INICIO</a></li>
  44.                 <li><a href="{{ path('trucks_cat', {'slug': detail.category.slug}) }}">{{ detail.category.title }}</a></li>
  45.                 <li><a href="" aria-selected="true">{{ detail.title}}</a></li>
  46.             </ul>
  47.         </div>
  48.         <div>
  49.             <h2>{{ detail.mainPrefix }}</h2>
  50.             <h1>{{ detail.mainTitle }}</h1>
  51.             {% if detail.quoteShow %}
  52.             <a href="#form" class="general_button brown">{{ detail.mainBtnText|default('Quiero cotizar')}}</a>
  53.             {% endif %}
  54.         </div>
  55.     </article>
  56. </section>
  57. {% endif %}
  60. <!-- atributos -->
  61. {% if detail.attrShow or detail.rsFb or detail.rsTw or detail.rsWts %}
  62. <section class="b42 atributos">
  63.     {% if detail.attrShow %}
  64.     <article class="wancho">
  65.         {% if detail.attrTitle %}
  66.         <small>{{ detail.attrTitle }}</small>
  67.         {% endif %}
  68.         <div class="flex jcc">
  69.             {% for item in detail.attrItemsActive %}
  70.             <div
  71.                 class="faw__tab {{ loop.first ? 'active' : '' }}"
  72.                 data-info="{{ item.text }}"
  73.                 data-id="{{ loop.index }}"
  74.             >
  75.                 {{ item.title }}
  76.             </div>
  77.             {% endfor %}
  78.         </div>
  79.         <div class="b42__itemContainer flex jcsb aic">
  80.             <div class="b42__swiper__info">
  81.                 <h3></h3>
  82.                 <div class="gParrafo"></div>
  83.             </div>
  84.             <div class="b42__swiper__container">
  85.                 {% for item in detail.attrItemsRelationActive %}
  86.                 <div class="swiper b42__swiper {{ loop.first ? 'active' : ''}}" data-id="{{loop.index}}">
  87.                     <ul class="swiper-wrapper">
  88.                         {% for i in item.images %}
  89.                         <li
  90.                             class="swiper-slide"
  91.                             style="background-image: url('{{ asset(i.img|image_path) }}');" alt="{{ i.img|image_alt }}"
  92.                         ></li>
  93.                         {% endfor %}
  94.                     </ul>
  95.                     <div class="nav-buttons">
  96.                         <div class="button-prev"></div>
  97.                         <div class="button-next"></div>
  98.                     </div>
  99.                 </div>
  100.                 {% endfor %}
  101.             </div>
  102.         </div>
  103.     </article>
  104.     {% endif %}
  105.     {% if detail.rsFb or detail.rsTw or detail.rsWts %}
  106.     <div class="share_wrapper">
  107.         <ul>
  108.             {% if detail.rsFb %}
  109.             <li><a href="" class="icon-facebook facebook-share-fixed"></a></li>
  110.             {% endif %}
  111.             {% if detail.rsTw %}
  112.             <li><a href="" class="icon-twitter twitter-share-fixed"></a></li>
  113.             {% endif %}
  114.             {% if detail.rsWts %}
  115.             <li>
  116.                 <a
  117.                     href="https://api.whatsapp.com/send?text=FAW - Camión modelo {{detail.title}} {{ absolute_url(path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params'))) }}"
  118.                     class="icon-whatsapp"
  119.                     target="_blank"
  120.                     data-action="share/whatsapp/share"
  121.                 ></a>
  122.             </li>
  123.             {% endif %}
  124.         </ul>
  125.     </div>
  126.     {% endif %}
  127. </section>
  128. {% endif %}
  131. <!-- descripcion -->
  132. {% if detail.descripShow %}
  133. <section class="b43 descripcion">
  134.     <article class="wancho flex jcsb aic">
  135.         <div class="b43__desc">
  136.             {% if detail.descripTitle1 %}
  137.             <h3>{{ detail.descripTitle1}}</h3>
  138.             {% endif %}
  139.             <div class="gParrafo">
  140.                 {{ detail.descripText|raw }}
  141.             </div>
  142.         </div>
  143.         {% if detail.descripItemsActive %}
  144.         <div class="b43__galeria">
  145.             <img src="{{ asset(detail.descripItemsActive[0]['img']|image_path) }}" alt="{{ detail.descripItemsActive[0]['img']|image_alt }}" class="b43__galeria-main" />
  146.             <ul class="flex">
  147.                 {% for item in detail.descripItemsActive %}
  148.                 <li class="{{ loop.first ? 'active' : '' }}">
  149.                     <img src="{{ asset(item.img|image_path) }}" width="128" height="82" alt="{{ item.img|image_alt }}" />
  150.                 </li>
  151.                 {% endfor %}
  152.             </ul>
  153.         </div>
  154.         {% endif %}
  155.         {% if detail.descripCharItemsActive %}
  156.         <div class="b43__desc b43__desc--info">
  157.             <h3>{{ detail.descripTitle2 }}</h3>
  158.             <ul>
  159.                 {% for item in detail.descripCharItemsActive %}
  160.                 <li>
  161.                     <span>{{ item.title }}</span>
  162.                     <p>{{ item.text }}</p>
  163.                 </li>
  164.                 {% endfor %}
  165.             </ul>
  166.         </div>
  167.         {% endif %}
  168.     </article>
  169. </section>
  170. {% endif %}
  172. <!-- especificaciones -->
  173. {% if detail.tecShow and detail.tecItemsActive %}
  174. <section class="b44 especificaciones">
  175.     <article class="wancho">
  176.         <div class="flex jcsb">
  177.             {% if detail.tecTitle %}
  178.             <h4>{{ detail.tecTitle }}</h4>
  179.             {% endif %}
  180.             {% if detail.tecBrochure|image_path %}
  181.             <a href="{{ asset(detail.tecBrochure|image_path) }}" class="download-button" download>{{ detail.tecBrochureText|default('Descargar ficha técnica') }}</a>
  182.             {% endif %}
  183.         </div> 
  184.         <div class="flex jcsb especs__ctn">
  185.             <ul class="especs_list">
  186.                 {% for item in detail.tecItemsActive %}
  187.                 <li data-id="{{ loop.index }}" class="{{ loop.first ? 'active' : '' }}">
  188.                     <span>{{ item.title }}</span>
  189.                 </li>
  190.                 {% endfor %}
  191.             </ul>
  192.             <div class="especs__table-list">
  193.                 {% for item in detail.tecItemsActive %}
  194.                     <div data-id="{{ loop.index }}" class="{{ loop.first ? 'active' : '' }}">
  195.                     {{ item.text|raw }}
  196.                     </div>
  197.                 {% endfor %}
  198.             </div>
  199.         </div>
  200.     </article>
  201. </section>
  202. {% endif %}
  203. <!-- galeria -->
  205. {% if detail.galleryShow and detail.galleryItemsActive %}
  206. <section class="b45 galeria-detalle">
  207.     {% if detail.galleryTitle %}
  208.     <div class="wancho">
  209.         <h4>{{ detail.galleryTitle }}</h4>
  210.     </div>
  211.     {% endif %}
  212.     <!-- Slider main container -->
  213.     <div class="swiper b45__swiper">
  214.         <!-- Additional required wrapper -->
  215.         <ul class="swiper-wrapper">
  216.             <!-- Slides -->
  217.             {% for item in detail.galleryItemsActive %}
  218.             <li class="swiper-slide"><img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}" /></li>
  219.             {% endfor %}
  220.         </ul>
  222.         <!-- If we need navigation buttons -->
  223.         <div class="nav-buttons">
  224.             <div class="button-prev"></div>
  225.             <div class="button-next"></div>
  226.         </div>
  227.     </div>
  228. </section>
  229. {% endif %}
  232. <!-- cotiza -->
  233. {% if detail.quoteShow %}
  234. <section class="b46 cotizar-detalle" id="form">
  235.     <article class="wancho flex">
  236.         <div class="b46__cotizar">
  237.             {% if detail.quotePrefix %}
  238.             <small>{{ detail.quotePrefix }}</small>
  239.             {% endif %}
  240.             {% if detail.quoteTitle %}
  241.             <h4>{{ detail.quoteTitle|block_tag('span')|raw}}</h4>
  242.             {% endif %}
  243.             <div class="general_form">
  244.                   {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
  245.                     {{ form_widget(form.utmSource, {'attr': {'class': 'form_utmsource'}}) }}
  246.                     {{ form_widget(form.utmMedium, {'attr': {'class': 'form_utmmedium'}}) }}
  247.                     {{ form_widget(form.utmCampaign, {'attr': {'class': 'form_utmcampaign'}}) }}
  248.                     {{ form_widget(form.utmContent, {'attr': {'class': 'form_utmcontent'}}) }}
  249.                     {{ form_widget(form.utmTerm, {'attr': {'class': 'form_utmterm'}}) }}
  250.                     {{ form_widget(form.gclid, {'attr': {'class': 'gclid'}}) }}
  251.                     {{ form_widget(form.isPerson) }}
  252.                     <fieldset class="radioGroup">
  253.                         <div>
  254.                             <input type="radio" name="tipo" id="empresa" checked />
  255.                             <label for="empresa">Soy empresa</label>
  256.                         </div>
  257.                         <div>
  258.                             <input type="radio" name="tipo" id="natural" />
  259.                             <label for="natural">Soy persona natural</label>
  260.                         </div>
  261.                     </fieldset>
  262.                     <fieldset class="formGroup" id="personaGroup" style="display:none;">
  263.                         <div class="fInput fSelect">
  264.                             {{ form_widget(form.docType, {'attr': {'class':'validate[required]', 'data-validation-placeholder' : 'Tipo doc*'}}) }}
  265.                         </div>
  266.                         <div class="fInput">
  267.                             <label for="empresa">Número doc.</label>
  268.                             {{ form_widget(form.docNum, {'attr': {'class':'validate[required, maxSize[15]]', 'data-validation-placeholder' : 'Tipo doc*',  'data-maxChar':'15', 'data-expression':'number'}}) }}
  269.                         </div>
  270.                         <!--
  271.                         <div class="fInput fSelect">
  272.                             <select
  273.                                 class="validate[required]"
  274.                                 data-validation-placeholder="Tipo de vehículo*"
  275.                                 name="vehiculo"
  276.                                 id="vehiculo"
  277.                             >
  278.                                 <option selected="selected">Tipo de vehículo*</option>
  279.                                 <option value="ica">ica</option>
  280.                             </select>
  281.                         </div>
  282.                         <div class="fInput fSelect">
  283.                             <select
  284.                                 class="validate[required]"
  285.                                 data-validation-placeholder="Modelo"
  286.                                 name="modelo"
  287.                                 id="modelo"
  288.                             >
  289.                                 <option selected="selected">Modelo</option>
  290.                                 <option value="ica">ica</option>
  291.                             </select>
  292.                         </div>
  293.                         -->
  294.                     </fieldset>
  295.                     <fieldset class="formGroup" id="empresaGroup">
  296.                         <div class="fInput">
  297.                             <label for="ruc">RUC*</label>
  298.                              {{ form_widget(form.ruc, {'attr': {'class':'validate[required, maxSize[15]] validKeypress', 'data-maxChar':'15', 'data-expression':'number'}}) }}
  299.                         </div>
  300.                         <div class="fInput">
  301.                             <label for="empresa">Empresa*</label>
  302.                              {{ form_widget(form.factory, {'attr': {'class':'validate[required, maxSize[255]] validKeypress', 'data-maxChar':'15', 'data-expression':'text'}}) }}
  303.                         </div>
  304.                     </fieldset>
  305.                     <fieldset class="formGroup">
  306.                         <div class="fInput">
  307.                             <label for="nombre">Nombres*</label>
  308.                              {{ form_widget(form.name, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
  309.                         </div>
  310.                         <div class="fInput">
  311.                             <label for="apellidos">Apellidos*</label>
  312.                              {{ form_widget(form.lastname, {'attr': {'class':'validate[required, maxSize[50]] validKeypress', 'data-maxChar':'50', 'data-expression':'text'}}) }}
  313.                         </div>
  314.                     </fieldset>
  315.                     <fieldset class="formGroup">
  316.                         <div class="fInput">
  317.                             <label for="telefono">Teléfono*</label>
  318.                              {{ form_widget(form.phone, {'attr': {'class':'validate[required, maxSize[15]] validKeypress', 'type': 'tel', 'data-maxChar':'15', 'data-expression':'number'}}) }}
  319.                         </div>
  320.                         <div class="fInput">
  321.                             <label for="correo">Correo Electrónico*</label>
  322.                              {{ form_widget(form.email, {'attr': {'class':'validate[required, maxSize[100]] validKeypress', 'type': 'email', 'data-maxChar':'100', 'data-expression':'email'}}) }}
  323.                         </div>
  324.                     </fieldset>
  325.                     <div class="fInput fSelect">
  326.                          {{ form_widget(form.departament, {'attr': {'class':'validate[required]', 'data-validation-placeholder' : 'Departamento*'}}) }}
  327.                     </div>
  328.                     <div class="fInput fSelect">
  329.                            {{ form_widget(form.origin, {'attr': {'class':'validate[required]' }}) }}
  330.                     </div>
  331.                     <div class="fInput">
  332.                         <label for="comentario">¿Tienes algún comentario?</label>
  333.                          {{ form_widget(form.comment, {'attr': {'class':'validate[maxSize[255]]', 'data-maxChar' : '255'}}) }}
  334.                     </div>
  335.                     <div class="fCheckBox">
  336.                         <span>*Campos obligatorios</span>
  337.                         <div class="formCheckbox">
  338.                             <input type="checkbox" id="1" name="check_terminos" class="validate[required]" />
  339.                             <label for="1"
  340.                                 >He leído y acepto las <a href="{{ path('privacy') }}" target="_blank">Políticas de privacidad</a></label
  341.                             >
  342.                         </div>
  343.                     </div>
  344.                     {% if info.captchaShow %}
  345.                     <div style="margin-bottom:10px; position: relative; width: max-content;">
  346.                         <div id="html_element"></div>
  347.                     </div>
  348.                     {% endif %}
  349.                     <div class="formButtonCtn">
  350.                         <button class="f-guardar-contacto-general hidden_button_send" id="sendFormMachine">Enviar</button>
  351.                         <button class="show_button_send">Enviando... <span class="icon-flecha-derecha"></span></button>
  352.                     </div>
  353.                   {{ form_end(form) }}
  354.             </div>
  355.         </div>
  356.     </article>
  357.     {% if detail.quoteItemsActive %}
  358.     <div class="b46__galeria">
  359.         <img src="{{ asset(detail.quoteItemsActive[0]['img']|image_path) }}" alt="{{ detail.quoteItemsActive[0]['img']|image_alt }}" class="b46__galeria__main" />
  360.         <!-- Slider main container -->
  361.         <div class="swiper b46__swiper">
  362.             <!-- Additional required wrapper -->
  363.             <ul class="swiper-wrapper">
  364.                 <!-- Slides -->
  365.                 {% for item in detail.quoteItemsActive %}
  366.                 <li class="swiper-slide">
  367.                     <img src="{{ asset(item.img|image_path) }}" alt="{{item.img|image_path}}" />
  368.                 </li>
  369.                 {% endfor %}
  370.             </ul>
  371.             <div class="nav-buttons">
  372.                 <div class="button-prev"></div>
  373.                 <div class="button-next"></div>
  374.             </div>
  375.             <!-- If we need scrollbar -->
  376.             <div class="swiper-scrollbar"></div>
  377.         </div>
  378.     </div>
  379.     {% endif %}
  380. </section>
  381. {% endif %}
  384. <!-- sostenibilidad -->
  385. {% if detail.promiseShow %}
  386. <section class="b47 sostenibilidad">
  387.     <img src="{{ asset(detail.promiseImg|image_path) }}" alt="{{ detail.promiseImg|image_alt }}" class="b47__main-img" />
  388.     <article class="wancho">
  389.         <div class="b47__info">
  390.             {% if detail.promiseLogo|image_path %}
  391.             <img src="{{ asset(detail.promiseLogo|image_path) }}" alt="{{ detail.promiseLogo|image_alt }}" />
  392.             {% endif %}
  393.             {% if detail.promisePrefix  %}
  394.             <small>{{ detail.promisePrefix }}</small>
  395.             {% endif %}
  396.             {% if detail.promiseTitle %}
  397.             <h5>{{ detail.promiseTitle }}</h5>
  398.             {% endif %}
  399.             <div class="gParrafo">
  400.             {{ detail.promiseText|raw }}
  401.             </div>
  402.         </div>
  403.     </article>
  404. </section>
  405. {% endif %}
  407. <!-- otros -->
  408. {% if detail.machinesShow and detail.machinesItemsActive|length > 0 %}
  409. <section class="otros">
  410.     {% if detail.machinesTitle %}
  411.     <div class="wancho">
  412.         <h5>{{ detail.machinesTitle }}</h5>
  413.     </div>
  414.     {% endif %}
  415.     <div class="swiper">
  416.         <ul class="camiones_list swiper-wrapper">
  417.             {% for item in detail.machinesItemsActive|slice(0, 3) %}
  418.             <li class="camion_card swiper-slide">
  419.                 <img src="{{ asset(item.imgList|image_path) }}" alt="marcacamion" />
  420.                 <small>{{ item.category.title|upper }}</small>
  421.                 <p>{{ item.title }}</p>
  422.                 <div class="flex">
  423.                     <a href="{{ path('truck', {'slug' : item.slug}) }}" class="general_button white">Ver modelo</a>
  424.                     <a href="{{ path('truck', {'slug' : item.slug}) }}#form" class="general_button">Quiero Cotizar</a>
  425.                 </div>
  426.             </li>
  427.             {% endfor %}
  428.         </ul>
  429.         <div class="nav-buttons">
  430.             <div class="button-prev"></div>
  431.             <div class="button-next"></div>
  432.         </div>
  433.     </div>
  434. </section>
  435. {% endif %}
  437. {% endblock %}
  439. {% block jsfinal %}
  440. <script src="{{ STATIC_URL }}js/validationform/jquery.validationEngine.js"></script>
  441. <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
  442. {% include 'front/templates/captcha.html.twig' %}
  443. <script type="text/javascript">
  444.     //atributos
  446.     const tabCount = document.querySelectorAll('.faw__tab');
  447.     const swiperCount = document.querySelectorAll('.b42__swiper');
  449.     if(document.getElementsByClassName('faw__tab').length > 0) {
  450.         setInfo(document.getElementsByClassName('faw__tab')[0]);
  451.     }
  453.     tabCount.forEach(tab => {
  454.         tab.addEventListener('click', () => {
  455.             setInfo(tab);
  456.             tabCount.forEach(item => {
  457.                 item.classList.remove('active');
  458.             });
  459.             tab.classList.add('active');
  460.             const getItemId = tab.dataset.id;
  461.             swiperCount.forEach(item => {
  462.                 item.classList.remove('active');
  463.             });
  464.             const getSwiper = document.querySelector(`.b42__swiper[data-id="${getItemId}"]`);
  465.             getSwiper.classList.add('active');
  466.         });
  467.     });
  469.     function setInfo(element) {
  470.         const getTitle = element.innerHTML;
  471.         const getText = element.dataset.info;
  472.         document.querySelector('.b42__swiper__info').querySelector('h3').innerHTML = getTitle;
  473.         document.querySelector('.b42__swiper__info').querySelector('.gParrafo').innerHTML = getText;
  474.     }
  476.     swiperCount.forEach(swiperEl => {
  477.         const atributo_swiper = new Swiper(swiperEl, {
  478.             loop: true,
  479.             slidesPerView: 1,
  480.             spaceBetween: 0,
  481.             simulateTouch: true,
  482.             navigation: {
  483.                 nextEl: `.b42 .button-next`,
  484.                 prevEl: `.b42 .button-prev`,
  485.             },
  486.         });
  487.     });
  488.     //atributos
  489.     //descripciones
  490.     const getGallery = document.querySelector('.b43__galeria ul');
  491.     getGallery.addEventListener('click', event => {
  492.         const getItem = event.target;
  493.         document.querySelectorAll('.b43__galeria li').forEach(item => {
  494.             item.classList.remove('active');
  495.         });
  496.         getItem.parentNode.classList.add('active');
  497.         document.querySelector('.b43__galeria-main').src = getItem.src;
  498.     });
  499.     //descripciones
  500.     //especificaciones
  501.     const getList = document.querySelector('.especs_list');
  502.     const listItems = document.querySelectorAll('.especs_list li');
  503.     const listTable = document.querySelectorAll('.especs__table-list div');
  504.     getList.addEventListener('click', event => {
  505.         listItems.forEach(item => {
  506.             item.classList.remove('active');
  507.         });
  508.         event.target.classList.add('active');
  509.         const getItemId = event.target.dataset.id;
  510.         listTable.forEach(item => {
  511.             item.classList.remove('active');
  512.         });
  513.         const getTable = document.querySelector(`.especs__table-list div[data-id="${getItemId}"]`);
  515.         getTable.classList.add('active');
  516.     });
  518.     //especificaciones
  520.     //galeria
  521.     const galeria_swiper = new Swiper('.b45__swiper', {
  522.         loop: true,
  523.         slidesPerView: 1,
  524.         spaceBetween: 42,
  525.         slidesPerView: 'auto',
  526.         simulateTouch: true,
  527.         centeredSlides: true,
  528.         // Navigation arrows
  529.         navigation: {
  530.             nextEl: '.b45 .button-next',
  531.             prevEl: '.b45 .button-prev',
  532.         },
  533.     });
  534.     //galeria
  536.     // cotizar
  537.     // NOV 20222, Comprobando que existe el carrusel
  538.     if (document.querySelector('.b46__galeria')) {
  539.         const cotizar_swiper = new Swiper('.b46__swiper', {
  540.             loop: false,
  541.             slidesPerView: 'auto',
  542.             spaceBetween: 16,
  543.             scrollbar: {
  544.                 el: '.swiper-scrollbar',
  545.             },
  546.             navigation: {
  547.                 nextEl: '.b46 .button-next',
  548.                 prevEl: '.b46 .button-prev',
  549.             },
  550.             breakpoints: {
  551.                 581: {
  552.                     spaceBetween: 16,
  553.                     slidesPerView: 'auto',
  554.                 },
  555.                 0: {
  556.                     spaceBetween: 4,
  557.                     slidesPerView: 3,
  558.                 },
  559.             },
  560.         });
  561.         cotizar_swiper.on('click', function (e) {
  562.             const clickedSlideImg = e.clickedSlide.querySelector('img').src;
  563.             document.querySelector('.b46__galeria__main').src = clickedSlideImg;
  564.         });
  565.     }
  567.     // cambia y quita los campos base a tipo de usuario a llenar formulario
  568.     const empresa = document.querySelector('#empresa');
  569.     const natural = document.querySelector('#natural');
  570.     const empresaGroup = document.getElementById('empresaGroup');
  571.     const personaGroup = document.getElementById('personaGroup');
  573.     empresa.addEventListener('change', adjustableHeightCheck);
  574.     natural.addEventListener('change', adjustableHeightCheck);
  576.     $('#form_machine_docType').removeClass('validate[required]');
  577.     $('#form_machine_docNum').removeClass('validate[required, maxSize[15]]');
  578.     
  579.     function adjustableHeightCheck() {
  580.         if (!!document.getElementById('empresa').checked) {
  581.             $('#empresaGroup').css({'display' : 'flex'});
  582.             $('#personaGroup').css({'display' : 'none'});
  583.             $('#form_machine_ruc').addClass('validate[required, maxSize[15]]');
  584.             $('#form_machine_factory').addClass('validate[required, maxSize[125]]');
  585.             $('#form_machine_docType').removeClass('validate[required]');
  586.             $('#form_machine_docNum').removeClass('validate[required, maxSize[15]]');
  587.             $('#form_machine_isPerson').prop("checked", false);
  588.         } else {
  589.             $('#empresaGroup').css({'display' : 'none'});
  590.             $('#personaGroup').css({'display' : 'flex'});
  591.             $('#form_machine_ruc').removeClass('validate[required, maxSize[15]]');
  592.             $('#form_machine_factory').removeClass('validate[required, maxSize[125]]');
  593.             $('#form_machine_docType').addClass('validate[required]');
  594.             $('#form_machine_docNum').addClass('validate[required, maxSize[15]]');
  595.             $('#form_machine_isPerson').prop("checked", true);
  596.         }
  597.     }
  598.     // cambia y quita los campos base a tipo de usuario a llenar formulario
  600.     WidthChange(1024, () => {
  601.         const camion_swiper = new Swiper('.otros .swiper', {
  602.             loop: false,
  603.             slidesPerView: '2',
  604.             spaceBetween: 0,
  605.             navigation: {
  606.                 nextEl: '.otros .button-next',
  607.                 prevEl: '.otros .button-prev',
  608.             },
  609.         });
  610.     });
  612.     WidthChange(580, () => {
  613.         if (document.querySelector('.b46__galeria')) {
  614.             document
  615.                 .querySelector('.b46 .b46__galeria')
  616.                 .insertBefore(
  617.                     document.querySelector('.b45 h4'),
  618.                     document.querySelector('.b46 .b46__galeria').firstChild
  619.                 );
  620.         }
  622.         const tableList = document.querySelectorAll('.especs_list li');
  623.         tableList.forEach((item, index) => {
  624.             item.appendChild(document.querySelector(`.especs__table-list div[data-id="${index + 1}"]`));
  625.         });
  627.         // tuve que usar jquery aqui, perdon dios
  628.         $('.especs_list li').click(function (e) {
  629.             $(this).children('div').slideToggle(100);
  630.         });
  631.         $('.especs_list li')[0].click();
  632.     });
  634.     // cotizar
  635.     $(() => {
  636.         $('form').validationEngine('attach', {
  637.             promptPosition: 'bottomLeft',
  638.             autoHidePrompt: true,
  639.             autoPositionUpdate: false,
  640.             autoHideDelay: 3000,
  641.             addFailureCssClassToField: 'inputError',
  642.             binded: false,
  643.             scroll: false,
  644.             validateNonVisibleFields: true,
  645.             showOneMessage: false,
  646.         });
  647.     });
  649.     $('#sendFormMachine').on('click', function(event) {
  650.         event.preventDefault();
  651.         let btn = $(this);
  652.         let form = btn.closest('form');
  653.         btn.prop('disabled', true);
  654.         var valid = form.validationEngine('validate');
  656.         if (valid && validarRecaptcha()){
  657.             document.querySelector('.general_form').classList.add('submit_form')
  658.             form.submit();
  660.         } else {
  661.             btn.prop('disabled', false);
  662.             return false;
  663.         }
  664.         
  665.         
  666.     });
  668. </script>
  669. {% endblock %}