templates/front/default/home.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('home')) }}">
  5. {% endblock %}
  7. {% block cssadicional %}
  8.     <link rel="stylesheet" href="{{ asset('static/js/swiper/swiper.css') }}"/>
  9. {% endblock %}
  11. {% block classbody %}header_transparent{% endblock %}
  13. {% block content %}
  14.     <section class="b1home">
  15.         <div class="b1home_slider swiper-container">
  16.             <ul class="swiper-wrapper">
  17.                 {% for item in sd.banner %}
  18.                     <li class="swiper-slide">
  19.                         <div class="b1home_block">
  20.                             {% set imageDesktop = item.imageDesktop %}
  21.                             {% set imageTablet = item.imageTablet ?: imageDesktop %}
  22.                             {% set imageMobile = item.imageMobile ?: imageTablet %}
  23.                             <figure class="b1home_banner homeChangeImages" data-image="{{ asset(imageDesktop|image_path) }};{{ asset(imageTablet|image_path) }};{{ asset(imageMobile|image_path) }}"></figure>
  24.                             <div class="b1home_info">
  25.                                 <div class="b1home_content ww_center">
  26.                                     {% if item.text %}
  27.                                         <h2 class="b1home_title">{{ item.text|nl2br }}</h2>
  28.                                     {% endif %}
  29.                                     {% if item.buttonShow and item.buttonLink %}
  30.                                         <div class="b1home_button">
  31.                                             <a href="{{ item.buttonLink }}" class="btn btn_lightblue" target="{{ item.buttonTarget|url_target }}">{{ item.buttonText ?: 'Ver más' }}</a>
  32.                                         </div>
  33.                                     {% endif %}
  34.                                 </div>
  35.                             </div>
  36.                         </div>
  37.                     </li>
  38.                 {% endfor %}
  39.             </ul>
  40.             <div class="b1home_pager"></div>
  41.         </div>
  42.     </section>
  44.     {% if sd.trucksShow or sd.busesShow %}
  45.         <section class="b2home">
  46.             <div class="b2home_content ww_center">
  47.                 <div class="b2home_blocks">
  48.                     {% if sd.trucksShow %}
  49.                         <div class="b2home_itemblock">
  50.                             <h2 class="b2home_title">{{ sd.trucksTitle ?: 'Camiones' }}</h2>
  51.                             <div class="b2home_slider swiper-container">
  52.                                 <ul class="swiper-wrapper">
  53.                                     {% for item in trucks %}
  54.                                         <li class="b2home_itembox swiper-slide">
  55.                                             <a href="{{ path('model_detail', {'slug': item.slug}) }}" class="b2home_card">
  56.                                                 <figure class="b2home_portada">
  57.                                                     <img src="{{ asset(item.image|image_path) }}" width="250" height="160" alt="{{ item.title }}">
  58.                                                 </figure>
  59.                                                 <h3 class="b2home_subtitle">{{ item.title }}</h3>
  60.                                                 <div class="b2home_btn">
  61.                                                     <div class="btn btn_grayline" href="{{ path('model_detail', {'slug': item.slug}) }}">Más información</div>
  62.                                                 </div>
  63.                                             </a>
  64.                                         </li>
  65.                                     {% endfor %}
  66.                                 </ul>
  67.                             </div>
  68.                             <div class="b2home_link">
  69.                                 <a class="btn btn_lightblue" href="{{ path('model_trucks') }}" target="{{ sd.trucksButtonTarget|url_target }}">{{ sd.trucksButtonTitle ?: 'MÁS MODELOS' }}</a>
  70.                             </div>
  71.                         </div>
  72.                     {% endif %}
  73.                     {% if sd.busesShow %}
  74.                         <div class="b2home_itemblock">
  75.                             <h2 class="b2home_title">{{ sd.busesTitle ?: 'Buses' }}</h2>
  76.                             <div class="b2home_slider swiper-container">
  77.                                 <ul class="swiper-wrapper">
  78.                                     {% for item in buses %}
  79.                                         <li class="b2home_itembox swiper-slide">
  80.                                             <a href="{{ item.link|external_url }}" class="b2home_card">
  81.                                                 <figure class="b2home_portada">
  82.                                                     <img src="{{ asset(item.image|image_path) }}" width="250" height="160" alt="{{ item.title }}">
  83.                                                 </figure>
  84.                                                 <h3 class="b2home_subtitle">{{ item.title }}</h3>
  85.                                                 <div class="b2home_btn">
  86.                                                     <div class="btn btn_grayline" href="{{ item.link|external_url }}">Más información</div>
  87.                                                 </div>
  88.                                             </a>
  89.                                         </li>
  90.                                     {% endfor %}
  91.                                 </ul>
  92.                             </div>
  93.                             <div class="b2home_link">
  94.                                 <a class="btn btn_lightblue" href="{{ path('model_buses') }}" target="{{ sd.busesButtonTarget|url_target }}">{{ sd.busesButtonTitle ?: 'MÁS MODELOS' }}</a>
  95.                             </div>
  96.                         </div>
  97.                     {% endif %}
  98.                 </div>
  99.             </div>
  100.         </section>
  101.     {% endif %}
  103.     {% if sd.detailShow %}
  104.         <section class="b3home">
  105.             <div class="b3home_content ww_center">
  106.                 <div class="b3home_left">
  107.                     {% if sd.detailText %}
  108.                         <div class="b3home_description">
  109.                             <p>{{ sd.detailText|nl2br }}</p>
  110.                         </div>
  111.                     {% endif %}
  112.                     <div class="b3home_items">
  113.                         {% for item in sd.detailOptions %}
  114.                             <a href="{{ item.link }}" class="b3home_box">
  115.                                 <h3 class="b3home_subtitle">{{ item.title }}</h3>
  116.                                 <span class="b3home_number">{{ loop.index|str_pad(2, '0', constant('STR_PAD_LEFT')) }}</span>
  117.                             </a>
  118.                         {% endfor %}
  119.                     </div>
  120.                 </div>
  121.                 {% if sd.detailImage|image_path %}
  122.                     <figure class="b3home_portada" style="background-image:url('{{ asset(sd.detailImage|image_path) }}');"></figure>
  123.                 {% endif %}
  124.             </div>
  125.         </section>
  126.     {% endif %}
  128.     {% if info.showBlog and sd.blogShow %}
  129.         <section class="b4home" id="b4_blog_posts" style="display: none;">
  130.             <div class="b4home_content ww_center">
  131.                 <div class="b4home_head">
  132.                     {% if sd.blogTitle %}
  133.                         <h2 class="b4home_title">{{ sd.blogTitle }}</h2>
  134.                     {% endif %}
  135.                     <div class="b4home_button">
  136.                         <a href="{{ info.socialBlogLink }}" class="btn btn_grayline btn_icon" target="_blank">
  137.                             {{ sd.blogButtonText ?: 'Visitar Blog' }}
  138.                             <span class="icon-arrow_forward_ios"></span>
  139.                         </a>
  140.                     </div>
  141.                 </div>
  142.                 <div class="b4home_items" id="b4_content_posts"></div>
  143.             </div>
  144.         </section>
  145.     {% endif %}
  147.     {% if info.showRoulette and info.rouletteBannerHome|image_path %}
  148.         <a href="{{ info.rouletteLink|external_url }}" target="{{ info.rouletteTarget|url_target }}" class="barfixed" style="background-image:url('{{ asset(info.rouletteBannerHome|image_path) }}');"></a>
  149.     {% endif %}
  151. {% endblock %}
  153. {% block jsfinal %}
  154.     <script src="{{ asset('static/js/swiper/swiper.js') }}"></script>
  155.     <script>
  156.         //- condición cuando se llega a la seccion del footer
  157.         $(window).scroll(function (e) {
  158.             const altura = $('.footer').height();
  159.             if ($(window).scrollTop() + $(window).height() > $(document).height() - altura) {
  160.                 $('.barfixed').addClass('barfixed_hide');
  161.             } else {
  162.                 $('.barfixed').removeClass('barfixed_hide');
  163.             }
  164.         });
  166.         $(function () {
  167.             changeImage('.homeChangeImages');
  168.             window.onresize = function () {
  169.                 changeImage('.homeChangeImages');
  170.             };
  172.             const b1homeSwiper = new Swiper('.b1home_slider.swiper-container', {
  173.                 loop: ($('.b1home_slider.swiper-container .swiper-slide').length > 1),
  174.                 effect: 'fade',
  175.                 fadeEffect: {
  176.                     crossFade: true
  177.                 },
  178.                 speed: 1000,
  179.                 autoplay: {
  180.                     delay: 5000,
  181.                     disableOnInteraction: false
  182.                 },
  183.                 pagination: {
  184.                     el: '.b1home_pager',
  185.                     clickable: true,
  186.                 }
  187.             });
  189.             const b2homeSwiperContain = $('.b2home_slider.swiper-container');
  190.             b2homeSwiperContain.each(function(){
  191.                 const _this = $(this);
  192.                 const b2homeSwiper = new Swiper(_this, {
  193.                     slidesPerView: 4,
  194.                     loop: ($(_this).find('.swiper-slide').length > 4),
  195.                     speed: 1000,
  196.                     breakpoints: {
  197.                         1024: {
  198.                             slidesPerView: 3,
  199.                             loop: ($(_this).find('.swiper-slide').length > 3),
  200.                         },
  201.                         767: {
  202.                             slidesPerView: 'auto',
  203.                             loop: false
  204.                         }
  205.                     }
  206.                     /*
  207.                     autoplay: {
  208.                         delay: 1500,
  209.                         disableOnInteraction: false
  210.                     },
  211.                     navigation: {
  212.                         prevEl: '.b2home_prev',
  213.                         nextEl: '.b2home_next',
  214.                     },
  215.                     */
  216.                 });
  217.             });
  219.             getBlogPosts();
  220.             function getBlogPosts() {
  221.                 $.ajax({
  222.                     url: '{{ path('get-blog-posts') }}',
  223.                     type: 'get',
  224.                     beforeSend: function () {
  225.                         $('#b4_blogposts').hide();
  226.                     },
  227.                     success: function (data) {
  228.                         if (data['success']) {
  229.                             let posts = data['posts'];
  230.                             if (posts.length > 0) {
  231.                                 let postsTopHtml = renderBlogPosts(posts);
  232.                                 $('#b4_content_posts').html(postsTopHtml);
  233.                                 $('#b4_blog_posts').show();
  234.                             }
  235.                         }
  236.                     }
  237.                 })
  238.             }
  240.             function renderBlogPosts($postsData) {
  241.                 let posts = '';
  242.                 $.each($postsData, function (i, v) {
  243.                     posts += renderBlogPost(i + 1, v);
  244.                 })
  245.                 return posts;
  246.             }
  248.             function renderBlogPost(index, post) {
  249.                 return '' +
  250.                     '<a href="' + post['link'] + '" target="_blank" class="b4home_box">' +
  251.                     '   <figure class="b4home_portada" style="background-image:url(' + post['image'] + ');">' +
  252.                     '   </figure>' +
  253.                     '   <div class="b4home_info">' +
  254.                     '       <span class="b4home_info_title">Noticias</span>' +
  255.                     '       <h3 class="b4home_info_subtitle">' + post['title'] + '</h3>' +
  256.                     '       <div class="b4home_info_description">' +
  257.                     '           <p>' + $(post['excerpt']).text() + '</p>' +
  258.                     '       </div>' +
  259.                     '       <div class="b4home_info_team">' +
  260.                     '           <p>Equipo Eurocamiones</p>' +
  261.                     '       </div>' +
  262.                     '       <span class="b4home_info_date">' + post['createdat'] + '</span>' +
  263.                     '   </div>' +
  264.                     '</a>';
  265.             }
  266.         });
  267.     </script>
  268. {% endblock %}