templates/front/trucks/truck.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('truck', {'slug': model.slug})) }}">
  5. {% endblock %}
  7. {% block cssadicional %}
  8. <link rel="stylesheet" href="{{ asset('assets/js/slick/slick.css') }}"/>
  9. {% endblock %}
  11. {% block classbody %}{% endblock %}
  13. {% block content %}
  14.     <div class="headerProject">
  15.         <div class="headerProjectWrapper wanchoPrimary">
  16.             <a class="headerProjectLogo">
  17.                 <img src="{{ asset(model.logo|image_path) }}" width="210" alt="{{ model.title }}">
  18.             </a>
  19.             <ul class="headerProjectWrapperNav">
  20.                 {% if model.detailShow %}
  21.                     <li><a class="headerProjectLink g-anclas" href="#Descripción">Descripción</a></li>
  22.                 {% endif %}
  23.                 {% if model.specificationsShow %}
  24.                     <li><a class="headerProjectLink g-anclas" href="#Atributos">Atributos</a></li>
  25.                 {% endif %}
  26.                 {% if model.galleryShow %}
  27.                     <li><a class="headerProjectLink g-anclas" href="#Galería">Galería</a></li>
  28.                 {% endif %}
  29.                 {% if model.versionsShow %}
  30.                     <li><a class="headerProjectLink g-anclas" href="#Especificiones">Especificaciones técnicas</a></li>
  31.                 {% endif %}
  32.             </ul>
  33.             <a href="#cotizar" class="buttonStandard gray g-anclas">
  34.                 <span>¡Cotiza ahora!</span>
  35.             </a>
  36.         </div>
  37.     </div>
  39.     <section class="b5 b5Detail scroll-wrapper">
  40.         <div class="b5Wrapper">
  41.             <picture class="b5BannerPicture">
  42.                 <source srcset="{{ asset(model.bannerImage|image_path) }}">
  43.                 <img class="b5BannerPictureImage" src="{{ asset(model.bannerImage|image_path) }}" width="1600" alt="{{ model.bannerImage|image_alt }}">
  44.             </picture>
  45.             {% if model.bannerText %}
  46.                 <div class="b5BannerText scroll-item">
  47.                     <h1>{{ model.bannerText }}</h1>
  48.                 </div>
  49.             {% endif %}
  50.         </div>
  51.     </section>
  53.     <section class="b6 b6Detail scroll-wrapper">
  54.         <div class="b6Title wanchoSecondary">
  55.             <ul class="b10LeftMigaPan scroll-item">
  56.                 <li><a href="{{ path('home') }}">Home</a></li>&nbsp;/ &nbsp;
  57.                 <li><a href="{{ path('trucks') }}">Camiones</a></li>&nbsp;/ &nbsp;
  58.                 <li class="active"><a href="{{ path('truck', {'slug': model.slug}) }}">{{ model.title }}</a></li>
  59.             </ul>
  60.         </div>
  61.         {% if model.detailShow %}
  62.             <div class="b6Wrapper wanchoSecondary blocks-ancla" id="Descripción">
  63.                 <div class="b6Item">
  64.                     <div class="b6ItemText scroll-item">
  65.                         {% if model.detailTitle %}
  66.                             <h3 class="titleStandard2">{{ model.detailTitle }}</h3>
  67.                         {% endif %}
  68.                         {% if model.detailText %}
  69.                             <div class="b6ItemTextParagraph paragraphText">
  70.                                 <p>{{ model.detailText|nl2br }}</p>
  71.                             </div>
  72.                         {% endif %}
  73.                     </div>
  74.                     <div class="b6ItemImage scroll-item">
  75.                         <picture class="b6BannerPicture">
  76.                             <img class="b6BannerPictureImage" src="{{ asset(model.detailImage|image_path) }}" width="714" alt="{{ model.detailImage|image_alt }}">
  77.                         </picture>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.         {% endif %}
  82.     </section>
  84.     {% if model.specificationsShow %}
  85.         <section class="b11 scroll-wrapper blocks-ancla" id="Atributos">
  86.             <div class="b11Wrapper wanchoSecondary">
  87.                 {% for item in model.specificationsItems %}
  88.                     <div class="b11Item scroll-item">
  89.                         <div class="b11ItemBox">
  90.                             <h3>{{ item.title }}</h3>
  91.                             <span>{{ item.value }}</span>
  92.                         </div>
  93.                     </div>
  94.                 {% endfor %}
  95.             </div>
  96.         </section>
  97.     {% endif %}
  99.     {% if model.attributesShow %}
  100.         <section class="b12 scroll-wrapper">
  101.             <div class="b12Wrapper wanchoSecondary scroll-item">
  102.                 <ul class="b12ContenTab">
  103.                     {% for item in model.attributesItems %}
  104.                         <li><a class="b12ContenTabLink" href="#{{ item.title|slug ~ '_' ~ loop.index }}">{{ item.title }}</a></li>
  105.                     {% endfor %}
  106.                 </ul>
  107.                 <div class="b12ContentBox">
  108.                     {% for item in model.attributesItems %}
  109.                         <div class="b12ItemTab" data-tab="{{ item.title|slug ~ '_' ~ loop.index }}">
  110.                             <div class="b6Item">
  111.                                 <div class="b6ItemText">
  112.                                     <h3 class="titleStandard2">{{ item.text1 }}</h3>
  113.                                     <div class="b6ItemTextParagraph paragraphText">
  114.                                         {{ item.text2|raw }}
  115.                                     </div>
  116.                                 </div>
  117.                                 <div class="b6ItemImage">
  118.                                     <picture class="b6BannerPicture">
  119.                                         <img class="b6BannerPictureImage" src="{{ asset(item.image|image_path) }}" width="568" alt="{{ item.image|image_alt }}">
  120.                                     </picture>
  121.                                 </div>
  122.                             </div>
  123.                         </div>
  124.                     {% endfor %}
  125.                 </div>
  126.             </div>
  127.         </section>
  128.     {% endif %}
  130.     {% if model.galleryShow %}
  131.         <section class="b13 blocks-ancla" id="Galería">
  132.             <div class="b13Wrapper">
  133.                 <div class="b13box_big">
  134.                     <div class="b13Swiper" data-initial="1">
  135.                         <div class="b13sliderImageBig">
  136.                             {% for item in model.galleryItems %}
  137.                                 <div class="b13Slide" data-slide="{{ loop.index }}">
  138.                                     <picture class="b13Picture">
  139.                                         <source srcset="{{ asset(item.image|image_path) }}">
  140.                                         <img class="b13PictureImage" src="{{ asset(item.image|image_path) }}" width="1000" alt="{{ item.image|image_alt }}">
  141.                                     </picture>
  142.                                 </div>
  143.                             {% endfor %}
  144.                         </div>
  145.                         <div class="b13Arrows">
  146.                             <div class="b13ArrowPrev arrowSwiper icon-chevron-left"></div>
  147.                             <div class="b13ArrowNext arrowSwiper icon-chevron-right"></div>
  148.                         </div>
  149.                     </div>
  150.                 </div>
  151.                 <div class="b13SwiperBottom">
  152.                     <div class="b13sliderThumbnails">
  153.                         {% for item in model.galleryItems %}
  154.                             <div class="b13SlideBottom" data-slide="{{ loop.index }}">
  155.                                 <picture class="b13PictureBottom">
  156.                                     <source srcset="{{ asset(item.image|image_path) }}">
  157.                                     <img class="b13PictureImage" src="{{ asset(item.image|image_path) }}" width="120" alt="{{ item.image|image_alt }}">
  158.                                 </picture>
  159.                             </div>
  160.                         {% endfor %}
  161.                     </div>
  162.                 </div>
  163.             </div>
  164.         </section>
  165.     {% endif %}
  167.     {% if model.versionsShow %}
  168.         <section class="b14 scroll-wrapper blocks-ancla" id="Especificiones">
  169.             <div class="b14Wrapper wanchoSecondary">
  170.                 {% if model.versionsTitle %}
  171.                     <div class="b14Title scroll-item">
  172.                         <h2 class="titleStandard">{{ model.versionsTitle }}</h2>
  173.                     </div>
  174.                 {% endif %}
  175.                 <div class="b14ContentItems">
  176.                     {% for item in model.versions %}
  177.                         <div class="b14Item scroll-item">
  178.                             <div class="b14ItemBox">
  179.                                 <picture class="b2SlidePicture">
  180.                                     <img class="b2SlidePictureImage" src="{{ asset(item.image|image_path) }}" width="235" alt="{{ item.image|image_alt }}">
  181.                                 </picture>
  182.                                 <h3 class="b2SlideTitle">{{ item.title }}</h3>
  183.                                 <div class="b14ItemDates">
  184.                                     {% for itemi in item.attributes %}
  185.                                         <ul>
  186.                                             <li><strong>{{ itemi.title }}</strong></li>
  187.                                             <li>{{ itemi.value }}</li>
  188.                                         </ul>
  189.                                     {% endfor %}
  190.                                 </div>
  191.                                 {% if item.dataSheet|image_path %}
  192.                                     <div class="b2SlideButtons">
  193.                                         <a href="{{ asset(item.dataSheet|image_path) }}" class="buttonStandard icon border">
  194.                                             <i class="icon-descarga"></i><span>Ficha Técnica</span>
  195.                                         </a>
  196.                                     </div>
  197.                                 {% endif %}
  198.                             </div>
  199.                         </div>
  200.                     {% endfor %}
  201.                 </div>
  202.             </div>
  203.         </section>
  204.     {% endif %}
  206.     <section class="b3 b3Detail blocks-ancla" id="cotizar">
  207.         <div class="b3Background">
  208.             <div class="b3Wrapper wanchoSecondary">
  209.                 <div class="b3Left">
  210.                     <div class="b3LeftBox">
  211.                         {% if forms.truckTitle %}
  212.                             <div class="b2Title">
  213.                                 <h2 class="titleStandard">{{ forms.truckTitle }}</h2>
  214.                             </div>
  215.                         {% endif %}
  216.                         {{ form_start(form) }}
  217.                             {% include 'front/templates/form_utm_fields.html.twig' %}
  218.                             {{ form_widget(form.model) }}
  219.                             {{ form_widget(form.crmModel) }}
  220.                             {{ form_widget(form.department) }}
  221.                             {{ form_widget(form.subject) }}
  222.                             <div class="b21WrapInput">
  223.                                 <div class="b21Input">
  224.                                     {{ form_widget(form.document, {'attr': {'data-expresion': 'number', 'class': 'validKeypress g-number form-contact validate[required,custom[onlyNumberSp]]'}}) }}
  225.                                     <span class="form-label">RUC*</span>
  226.                                 </div>
  227.                                 <div class="b21Input">
  228.                                     {{ form_widget(form.company, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }}
  229.                                     <span class="form-label">Empresa/Razón social*</span>
  230.                                 </div>
  231.                             </div>
  232.                             <div class="b21WrapInput">
  233.                                 <div class="b21Input">
  234.                                     {{ form_widget(form.name, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }}
  235.                                     <span class="form-label">Nombres*</span>
  236.                                 </div>
  237.                                 <div class="b21Input">
  238.                                     {{ form_widget(form.lastName, {'attr': {'data-expresion': 'text', 'class': 'validKeypress g-text form-contact validate[required,custom[onlyLetterSp]]'}}) }}
  239.                                     <span class="form-label">Apellidos*</span>
  240.                                 </div>
  241.                             </div>
  242.                             <div class="b21WrapInput">
  243.                                 <div class="b21Input">
  244.                                     {{ form_widget(form.email, {'attr': {'class': 'form-contact validate[required,custom[email]]'}}) }}
  245.                                     <span class="form-label">Correo*</span>
  246.                                 </div>
  247.                                 <div class="b21Input">
  248.                                     {{ form_widget(form.phone, {'attr': {'data-expresion': 'number', 'class': 'validKeypress g-number form-contact validate[required,custom[onlyNumberSp]]'}}) }}
  249.                                     <span class="form-label">Teléfono*</span>
  250.                                 </div>
  251.                             </div>
  252.                             <div class="b21Select">
  253.                                 <select class="form-contact-select validate[required]" id="department">
  254.                                     <option value="" disabled selected></option>
  255.                                     {% for item in departmentsArray %}
  256.                                         <option value="{{ item.title }}">{{ item.title }}</option>
  257.                                     {% endfor %}
  258.                                 </select>
  259.                                 <span class="form-label">Departamento*</span>
  260.                                 <i class="icon-iconos-10"></i>
  261.                             </div>
  262.                             <div class="b21Select">
  263.                                 <select class="form-contact-select" id="subject">
  264.                                     <option value="" disabled selected></option>
  265.                                     {% for item in forms.truckSubjects %}
  266.                                         <option value="{{ item.title }}">{{ item.title }}</option>
  267.                                     {% endfor %}
  268.                                 </select>
  269.                                 <span class="form-label">Motivo de su contacto</span>
  270.                                 <i class="icon-iconos-10"></i>
  271.                             </div>
  272.                             <div class="b21Textarea">
  273.                                 {{ form_widget(form.message, {'attr': {'cols': '40', 'rows': '10', 'class': 'form-contact'}}) }}
  274.                                 <span class="form-label">Mensaje</span>
  275.                             </div>
  276.                             <div class="b21Paragraph">
  277.                                 (*) Campos obligatorios.
  278.                             </div>
  279.                             <div class="b21WrapCheckbox">
  280.                                 <input type="checkbox" id="b21Checkbox" class="validate[required]" name="">
  281.                                 <label for="b21Checkbox">Acepto las <a href="{{ path('privacy_policies') }}" target="_blank">Políticas de Privacidad</a></label>
  282.                             </div>
  283.                             <button class="buttonStandard gray b21Btn" id="BtnLibro">Enviar</button>
  284.                             {% if info.showCaptcha %}
  285.                                 <input type="hidden" name="recaptcha_token" id="recaptchaToken">
  286.                             {% endif %}
  287.                         {{ form_end(form) }}
  288.                     </div>
  289.                 </div>
  290.                 {% if model.formImage|image_path %}
  291.                     <div class="b3Right">
  292.                         <picture class="b3RightPicture">
  293.                             <img class="b3RightPictureImage" src="{{ asset(model.formImage|image_path) }}" width="600" alt="{{ model.formImage|image_alt }}">
  294.                         </picture>
  295.                     </div>
  296.                 {% endif %}
  297.             </div>
  298.         </div>
  299.     </section>
  300. {% endblock %}
  302. {% block jsfinal %}
  303.     {% if info.showCaptcha %}
  304.         <script src="https://www.google.com/recaptcha/api.js?render={{ info.captchaSite }}"></script>
  305.         <script>
  306.             grecaptcha.ready(function() {
  307.                 grecaptcha.execute('{{ info.captchaSite }}', {action: 'submit'}).then(function(token) {
  308.                     document.getElementById('recaptchaToken').value = token;
  309.                 });
  310.             });
  311.         </script>
  312.     {% endif %}
  313.     <script src="{{ asset('assets/js/slick/slick.min.js') }}"></script>
  314.     <script type="text/javascript">
  315.         jQuery(function ($) {
  316.             $('.b13sliderImageBig').slick({
  317.                 slidesToShow: 1,
  318.                 slidesToScroll: 1,
  319.                 arrows: true,
  320.                 prevArrow: '.b13ArrowPrev',
  321.                 nextArrow: '.b13ArrowNext',
  322.                 autoplay: false,
  323.                 infinite:true,
  324.                 fade: false,
  325.                 centerMode: false,
  326.                 draggable: true,
  327.                 asNavFor: '.b13sliderThumbnails'
  328.             });
  329.             $('.b13sliderThumbnails').slick({
  330.                 slidesToShow: 5,
  331.                 slidesToScroll: 1,
  332.                 asNavFor: '.b13sliderImageBig',
  333.                 dots: false,
  334.                 arrows: false,
  335.                 centerMode: false,
  336.                 infinite:false,
  337.                 centerMode: false,
  338.                 focusOnSelect: true,
  339.                 responsive: [
  340.                     {
  341.                         breakpoint: 1024,
  342.                         settings: {
  343.                             slidesToShow: 5,
  344.                         }
  345.                     },
  346.                     {
  347.                         breakpoint: 600,
  348.                         settings: {
  349.                             slidesToShow: 4,
  350.                         }
  351.                     },
  352.                     {
  353.                         breakpoint: 480,
  354.                         settings: {
  355.                             slidesToShow: 3,
  356.                         }
  357.                     }
  358.                 ]
  359.             });
  362.             $("form").validationEngine('attach', {
  363.                 promptPosition: "topLeft",
  364.                 autoHidePrompt: true,
  365.                 autoPositionUpdate: false,
  366.                 autoHideDelay: 2000,
  367.                 binded: false,
  368.                 scroll: false,
  369.                 validateNonVisibleFields: true
  370.             })
  372.             $('#subject').on('change', function () {
  373.                 $('#form_quotation_truck_subject').val($(this).val());
  374.             })
  376.             $('#department').on('change', function () {
  377.                 $('#form_quotation_truck_department').val($(this).val());
  378.             })
  381.             $('#form_quotation_truck_model').val('{{ model.title }}');
  382.             $('#form_quotation_truck_crmModel').val('{{ model.crmTitle ?? model.title }}');
  385.             $('#BtnLibro').on('click', function (event) {
  386.                 event.preventDefault();
  387.                 const item = $(this);
  388.                 const form = item.closest('form');
  389.                 const valid = form.validationEngine('validate');
  390.                 if (valid) {
  391.                     item.prop('disabled', true).text('Enviando...');
  392.                     form.submit();
  393.                 } else {
  394.                     item.prop('disabled', false).text('Enviar');
  395.                 }
  396.             });
  397.         })
  398.     </script>
  399. {% endblock %}