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.                     {% if item.buttonShow %}
  19.                         <li class="swiper-slide">
  20.                             <div class="b1home_block">
  21.                                 {% set imageDesktop = item.imageDesktop %}
  22.                                 {% set imageTablet = item.imageTablet ?: imageDesktop %}
  23.                                 {% set imageMobile = item.imageMobile ?: imageTablet %}
  24.                                 <figure class="b1home_banner homeChangeImages" data-image="{{ asset(imageDesktop|image_path) }};{{ asset(imageTablet|image_path) }};{{ asset(imageMobile|image_path) }}">
  25.                                     {% if item.text %}
  26.                                         <span class="before_capa_left"></span>
  27.                                     {% endif %}
  28.                                 </figure>
  29.                                 <div class="b1home_info">
  30.                                     <div class="b1home_content ww_center">
  31.                                         {% if item.text %}
  32.                                             <div class="b1home_title">
  33.                                                 {{ item.text|raw }}
  34.                                             </div>
  35.                                         {% endif %}
  36.                                         {% if item.buttonShow and item.buttonLink %}
  37.                                             <div class="b1home_button">
  38.                                                 <a href="{{ item.buttonLink }}" class="btn btn_blue btn_icon" target="{{ item.buttonTarget|url_target }}">
  39.                                                     {{ item.buttonText ?: 'Ver más' }}
  40.                                                     <span class="icon-arrow_forward_ios"></span>
  41.                                                 </a>
  42.                                             </div>
  43.                                         {% endif %}
  44.                                     </div>
  45.                                 </div>
  46.                             </div>
  47.                         </li>
  48.                     {% elseif not item.buttonShow and item.buttonLink %}
  49.                         <li class="swiper-slide">
  50.                             <a href="{{ item.buttonLink }}" class="b1home_block" target="{{ item.buttonTarget|url_target }}">
  51.                                 {% set imageDesktop = item.imageDesktop %}
  52.                                 {% set imageTablet = item.imageTablet ?: imageDesktop %}
  53.                                 {% set imageMobile = item.imageMobile ?: imageTablet %}
  54.                                 <figure class="b1home_banner homeChangeImages" data-image="{{ asset(imageDesktop|image_path) }};{{ asset(imageTablet|image_path) }};{{ asset(imageMobile|image_path) }}">
  55.                                     {#<span class="before_capa_left"></span>#}
  56.                                 </figure>
  57.                             </a>
  58.                         </li>
  59.                     {% endif %}
  60.                 {% endfor %}
  61.             </ul>
  62.             <div class="b1home_pager"></div>
  63.         </div>
  64.     </section>
  66.     {% if sd.detailShow and sd.detailItems|length > 0 %}
  67.         <section class="b2home">
  68.             <div class="b2home_items">
  69.                 {% for item in sd.detailItems %}
  70.                     <a href="{{ item.link }}" class="b2home_box" target="{{ item.target|url_target }}">
  71.                         <figure class="b2home_portada">
  72.                             <img src="{{ asset(item.image|image_path) }}" width="395" height="395" alt="{{ item.title }}">
  73.                         </figure>
  74.                         <div class="b2home_info">
  75.                             {% if item.logo|image_path %}
  76.                                 <figure class="b2home_logo">
  77.                                     <img src="{{ asset(item.logo|image_path) }}" width="220" height="85" alt="{{ item.title }}">
  78.                                 </figure>
  79.                             {% else %}
  80.                                 <h2 class="b2home_title">{{ item.title }}</h2>
  81.                             {% endif %}
  82.                             <span class="b2home_number">{{ loop.index|str_pad(2, 0, constant('STR_PAD_LEFT')) }}</span>
  83.                         </div>
  84.                     </a>
  85.                 {% endfor %}
  86.             </div>
  87.         </section>
  88.     {% endif %}
  90.     {% if sd.sparePartsShow and sd.sparePartsImageDesktop|image_path %}
  91.         <section class="b3home">
  92.             <div class="b3home_content ww_center">
  93.                 {% set imageDesktop = sd.sparePartsImageDesktop %}
  94.                 {% set imageTablet = sd.sparePartsImageTablet ?: imageDesktop %}
  95.                 {% set imageMobile = sd.sparePartsImageMobile ?: imageTablet %}
  96.                 <figure class="b3home_portada homeChangeImages" data-image="{{ asset(imageDesktop|image_path) }};{{ asset(imageTablet|image_path) }};{{ asset(imageMobile|image_path) }}"></figure>
  97.                 <div class="b3home_block">
  98.                     <div class="b3home_info">
  99.                         {% if sd.sparePartsTitle1 %}
  100.                             <h2 class="b3home_title">{{ sd.sparePartsTitle1 }}</h2>
  101.                         {% endif %}
  102.                         {% if sd.sparePartsTitle2 %}
  103.                             <h3 class="b3home_subtitle">{{ sd.sparePartsTitle2 }}</h3>
  104.                         {% endif %}
  105.                         <div class="b3home_button">
  106.                             <a href="{{ path('quotation_request') }}" class="btn btn_blue btn_icon">
  107.                                 {{ sd.sparePartsButtonText ?: 'Solicitar aquí' }}
  108.                                 <span class="icon-arrow_forward_ios"></span>
  109.                             </a>
  110.                         </div>
  111.                     </div>
  112.                 </div>
  113.             </div>
  114.         </section>
  115.     {% endif %}
  117.     {% if info.showBlog and sd.blogShow %}
  118.         <section class="b4home" id="b4_blog_posts" style="display: none;">
  119.             <div class="b4home_content ww_center">
  120.                 <div class="b4home_head">
  121.                     {% if sd.blogTitle %}
  122.                         <h2 class="b4home_title">{{ sd.blogTitle }}</h2>
  123.                     {% endif %}
  124.                     <div class="b4home_button">
  125.                         <a href="{{ info.socialBlogLink }}" class="btn btn_grayline btn_icon" target="_blank">
  126.                             {{ sd.blogButtonText ?: 'Visitar Blog' }}
  127.                             <span class="icon-arrow_forward_ios"></span>
  128.                         </a>
  129.                     </div>
  130.                 </div>
  131.                 <div class="b4home_items" id="b4_content_posts"></div>
  132.             </div>
  133.         </section>
  134.     {% endif %}
  136.     {% if info.rouletteActive and info.rouletteBannerHome|image_path %}
  137.         <a href="{{ path('roulette') }}" class="barfixed" style="background-image:url('{{ asset(info.rouletteBannerHome|image_path) }}');"></a>
  138.     {% endif %}
  139. {% endblock %}
  141. {% block jsfinal %}
  142.     <script src="{{ asset('static/js/swiper/swiper.js') }}"></script>
  143.     <script>
  144.         //- condición cuando se llega a la seccion del footer
  145.         $( window ).scroll(function(e) {
  146.             var altura = $('.footer').height();
  147.             if($(window).scrollTop() + $(window).height() > $(document).height()-altura) {
  148.                 $('.barfixed').addClass('barfixed_hide');
  149.             }else{
  150.                 $('.barfixed').removeClass('barfixed_hide');
  151.             }
  152.         });
  154.         $(function(){
  155.             changeImage('.homeChangeImages');
  156.             window.onresize = function(){
  157.                 changeImage('.homeChangeImages');
  158.             };
  160.             var b1homeSwiper = new Swiper('.b1home_slider.swiper-container', {
  161.                 loop: ($('.b1home_slider.swiper-container .swiper-slide').length > 1),
  162.                 effect: 'fade',
  163.                 fadeEffect: {
  164.                     crossFade: true
  165.                 },
  166.                 speed: 1000,
  167.                 autoplay: {
  168.                     delay: 5000,
  169.                     disableOnInteraction: false
  170.                 },
  171.                 pagination: {
  172.                     el: '.b1home_pager',
  173.                     clickable: true,
  174.                 }
  175.             });
  177.             getBlogPosts();
  178.             function getBlogPosts() {
  179.                 $.ajax({
  180.                     url: '{{ path('get-blog-posts') }}',
  181.                     type: 'get',
  182.                     beforeSend: function () {
  183.                         $('#b4_blogposts').hide();
  184.                     },
  185.                     success: function (data) {
  186.                         if (data['success']) {
  187.                             let posts = data['posts'];
  188.                             if (posts.length > 0) {
  189.                                 let postsTopHtml = renderBlogPosts(posts);
  190.                                 $('#b4_content_posts').html(postsTopHtml);
  191.                                 $('#b4_blog_posts').show();
  192.                             }
  193.                         }
  194.                     }
  195.                 })
  196.             }
  198.             function renderBlogPosts($postsData) {
  199.                 let posts = '';
  200.                 $.each($postsData, function (i, v) {
  201.                     posts += renderBlogPost(i + 1, v);
  202.                 })
  203.                 return posts;
  204.             }
  206.             function renderBlogPost(index, post) {
  207.                 return '' +
  208.                     '<a href="' + post['link'] + '" class="b4home_box">' +
  209.                     '   <figure class="b4home_portada" style="background-image:url(' + post['image'] + ');">' +
  210.                     '   </figure>' +
  211.                     '   <div class="b4home_info">' +
  212.                     '       <span class="b4home_info_title">Noticias</span>' +
  213.                     '       <h3 class="b4home_info_subtitle">' + post['title'] + '</h3>' +
  215.                     '       <div class="b4home_info_description">' +
  216.                     '           <p>' + $(post['excerpt']).text() + '</p>' +
  217.                     '       </div>' +
  219.                     '       <div class="b4home_info_team">' +
  220.                     '           <p>Equipo Eurocamiones</p>' +
  221.                     '       </div>' +
  222.                     '       <span class="b4home_info_date">' + post['createdat'] + '</span>' +
  223.                     '   </div>' +
  224.                     '</a>';
  225.             }
  226.         });
  227.     </script>
  228. {% endblock %}