src/DcSiteBundle/Resources/views/LandRover/model-lineup-page.html.twig line 1

Open in your IDE?
  1. {% extends '@DcSite/LandRover/base.html.twig' %}
  3. {% block title %}
  4.     <title>{{ 'seo.model_lineup.title'|trans({}, 'dc_landrover') }}</title>
  5. {% endblock title %}
  7. {% block seo %}
  8.     <meta name="description" content="{{ 'seo.model_lineup.description'|trans({}, 'dc_landrover') }}"/>
  9.     <meta name="keywords" content=""/>
  10. {% endblock seo %}
  12. {% block ogtagDynamic %}
  13.     <meta property="og:title" content="{{ 'seo.model_lineup.title'|trans({}, 'dc_landrover') }}"/>
  14.     <meta property="og:description" content="{{ 'seo.model_lineup.description'|trans({}, 'dc_landrover') }}"/>
  15. {% endblock ogtagDynamic %}
  17. {% block css %}
  18.     <link rel="stylesheet" href="{{ asset('bundles/dcsite/css/modules/slider.css') }}">
  19.     <link rel="stylesheet" href="{{ asset('bundles/dcsite/css/landrover/slick.css') }}">
  20. {% endblock %}
  22. {% block content %}
  23.     <main>
  24.         <section class="breadcrumbs__new">
  25.             <div class="container">
  26.                 <ol class="global_breadcrumbs__new" itemscope itemtype="https://schema.org/BreadcrumbList">
  27.                     <li class="marker__none" itemprop="itemListElement" itemscope
  28.                         itemtype="https://schema.org/ListItem">
  29.                         <a itemprop="item" href="{{ path('landrover_homepage') }}">
  30.                             <span class="breadcrumbs__link" itemprop="name">Land Rover</span></a>
  31.                         <meta itemprop="position" content="1"/>
  32.                     </li>
  34.                     <div class="arrow-bcs"> ❯ </div>
  35.                     <li class="marker__none" itemprop="itemListElement" itemscope
  36.                         itemtype="https://schema.org/ListItem">
  37.                         <a itemprop="item" href="{{ path('landrover_model_lineup') }}">
  38.                             <span class="breadcrumbs__link" itemprop="name">{{ 'car.model_lineup'|trans({}, 'dc_jaguar') }}</span></a>
  39.                         <meta itemprop="position" content="1"/>
  40.                     </li>
  42.                     <div class="arrow-bcs"> ❯ </div>
  43.                     <li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope
  44.                         itemtype="https://schema.org/ListItem">
  45.                         <span style="color: #ABABAB;" class="breadcrumbs__link" itemprop="name">{{ page.label }}</span>
  46.                         <meta itemprop="position" content="2"/>
  47.                     </li>
  50.                 </ol>
  51.             </div>
  52.         </section>
  54.         <section class="section-padding">
  55.             <div class="container">
  56.                 <div class="row justify-content-center">
  57.                     <div class="col-md-8 section-title mb-0 ">
  58.                         <h1 class="smal-size">{{ page.title }}</h1>
  59.                     </div>
  60.                 </div>
  61.             </div>
  62.         </section>
  64.         <section class="section_padd tabs lineup">
  65.             <div class="container">
  66.                     <div class="col-12 tabs__content mb-4">
  67.                         <div class="tab-content" id="lineupContent">
  68.                             <div class="">
  69.                                 <div class="row">
  70.                                     {% for item in page.vehicles %}
  71.                                         <div class="col-sm-12 col-md-4 col-lg-4 col-xl-3">
  72.                                             <div class="header_card-car card-car-page">
  73.                                                 <div class="car_status_is_new-block">
  74.                                                     {% if  item.isNew %}
  75.                                                         <span class="car_status_is_new">{{ 'pages.car.status_is_new'|trans({}, 'dc_base') }}</span>
  76.                                                     {% endif %}
  77.                                                 </div>
  78.                                                 <a href="{{ path('toyota_one_car', {car: item.url}) }}"
  79.                                                    class="header_card-car-img">
  80.                                                     <picture alt="{{ item.title }}">
  81.                                                         <source srcset="{{ item.image_webp }}" type="image/webp">
  82.                                                         <source srcset="{{ item.image }}">
  83.                                                         <img src="{{ item.image }}" alt="{{ item.title }}" class="card-img-top lineup__preview">
  84.                                                     </picture>
  85.                                                 </a>
  86.                                                 <a href="{{ path('toyota_one_car', {car: item.url}) }}"
  87.                                                    class="header_card-car-title">
  88.                                                     {{ item.title }}
  89.                                                     {% if item.hasHybrid %}
  90.                                                         <span class="hubrid">{{ 'base.car_cat.hubrid'|trans({}, 'dc_toyota') }}</span>
  91.                                                     {% endif %}
  92.                                                 </a><br>
  94.                                                 {% if item.price > 0 %}
  95.                                                     <span class="header_card-car-price">{{ 'models_lineup.price_from'|trans({}, 'dc_landrover') }} <b>{{ item.price|price }}</b> грн</span>
  96.                                                 {% else %}
  97.                                                     <span class="header_card-car-price">{{ 'base.from'|trans({}, 'dc_toyota') }} <b>{{ item.preorderPrice|price }}</b> грн</span>
  98.                                                 {% endif %}
  99.                                             </div>
  100.                                         </div>
  101.                                     {% endfor %}
  102.                                 </div>
  103.                             </div>
  105.                         </div>
  106.                     </div>
  107.                 </div>
  108.         </section>
  110.         <section>
  111.             <div class="container mb-5 mt-5">
  112.                 <div class="col-12">
  113.                     <div class="row">
  114.                         {{ page.description|raw }}
  115.                     </div>
  116.                 </div>
  117.             </div>
  118.         </section>
  120.     </main>
  122. {% endblock %}
  124. {% block pageJS %}
  125.     <script>
  126.         app.onCustomEvent('appInit', function () {
  127.             app.loadCss('{{ asset('/bundles/dcsite/css/modules/multi-consultation-enter.css') }}');
  128.             app.loadCss('{{ asset('/bundles/dcsite/css/landrover/modules/multi-consultation.css') }}');
  130.             app.loadJs('{{ asset('/bundles/dcsite/js/hammer.min.js') }}');
  131.             app.loadJs('{{ asset('/bundles/core/js/modules/slick/slick.js') }}', function () {
  132.                 var slick = $('.slider').slick({
  133.                     autoplay: true,
  134.                     autoplaySpeed: 3000,
  135.                     arrows: false,
  136.                     dots: false,
  137.                     centerPadding: '0px',
  138.                     slidesToShow: 1,
  139.                     adaptiveHeight: true,
  140.                     variableWidth: false,
  141.                     centerMode: false,
  142.                     responsive: [
  143.                         {
  144.                             breakpoint: 992,
  145.                             settings: {
  146.                                 arrows: true,
  147.                                 adaptiveHeight: true,
  148.                                 variableWidth: false,
  149.                                 centerMode: false,
  150.                                 slidesToShow: 1
  151.                             }
  152.                         }
  153.                     ]
  154.                 });
  155.                 var length = $('.slider.regular').data('length');
  156.                 var sliderNumberBlock = $(".slider-number");
  157.                 for (var i = 1; i <= length; i++) {
  158.                     if (i === 1) {
  159.                         sliderNumberBlock.append("<div class='slides active' id='slide-" + i + "'>" + i + "</div>");
  161.                     } else {
  162.                         sliderNumberBlock.append("<div class='slides' id='slide-" + i + "'>" + i + "</div>");
  163.                     }
  164.                 }
  165.                 var slides = sliderNumberBlock.children();
  166.                 slides.each(function () {
  167.                     $(this).click(function () {
  168.                         let num = $(this).text();
  169.                         slick.slick('slickGoTo', num - 1);
  170.                     });
  171.                 });
  173.                 slick.on('beforeChange', function () {
  174.                     var beforeSlide = $(".slick-active").data("slick-index") + 1;
  175.                     $("#slide-" + beforeSlide).removeClass('active');
  176.                 });
  177.                 slick.on('afterChange', function () {
  178.                     var activeSlide = $(".slick-active").data("slick-index") + 1;
  179.                     $("#slide-" + activeSlide).addClass('active');
  180.                 });
  181.             });
  183.             var readmore = function (target) {
  184.                 $("#seo-content-main .seo-btn").on("click", function () {
  185.                     var $this = $(this);
  186.                     if ($this.hasClass("more")) {
  187.                         $this
  188.                             .removeClass("more")
  189.                             .addClass("less")
  190.                             .text("{{ 'pages.hide'|trans({}, 'dc_yamaha') }}");
  191.                         target.collapse("show");
  192.                     } else {
  193.                         $this
  194.                             .removeClass("less")
  195.                             .addClass("more")
  196.                             .text("{{ 'pages.read_all'|trans({}, 'dc_yamaha') }}");
  197.                         target.collapse("hide");
  198.                     }
  199.                 });
  200.             };
  201.             var target = $("#seo-content-main div.seo-block:nth-child(n+2)");
  202.             readmore(target);
  204.             /* Отложеная загрузка google карты */
  205.             setTimeout(function () {
  206.                 $('#mainMap').attr('src', 'https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6842.171213936868!2d30.44718856241725!3d50.37624966458023!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xda543660049c03c8!2zSmFndWFyIExhbmQgUm92ZXIg0JrQuNGX0LIg0JfQsNGF0ZbQtA!5e0!3m2!1sru!2sua!4v1552659463552')
  207.             }, 4000);
  209.             /* Загрузка новостей блока 'специальные предложения', и 'новостей' */
  210.             app.loadJs('{{ asset('/bundles/dcsite/js/load-entities.js') }}', function () {
  211.                 initSection({
  212.                     initUrl: '{{ path('news_special_load') }}',
  213.                     wrapper: '#specialOfferVue',
  214.                     urlSingle: 'landrover_special_offers_single'
  215.                 });
  216.                 initSection({
  217.                     initUrl: '{{ path('news_load') }}',
  218.                     wrapper: '#newsVue',
  219.                     urlSingle: 'landrover_special_offers_single'
  220.                 });
  221.             });
  222.         });
  223.     </script>
  224. {% endblock %}