src/DcSiteBundle/Resources/views/LandRover/model-lineup.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.     <link rel="stylesheet" href="{{ asset('bundles/dcsite/css/landrover/model-lineup.css') }}">
  21. {% endblock %}
  23. {% block content %}
  24.     <main>
  25.         <section class="breadcrumbs__new">
  26.             <div class="container">
  27.                 <ol class="global_breadcrumbs__new" itemscope itemtype="https://schema.org/BreadcrumbList">
  28.                     <li class="marker__none" itemprop="itemListElement" itemscope
  29.                         itemtype="https://schema.org/ListItem">
  30.                         <a itemprop="item" href="{{ path('landrover_homepage') }}">
  31.                             <span class="breadcrumbs__link" itemprop="name">Land Rover</span></a>
  32.                         <meta itemprop="position" content="1"/>
  33.                     </li>
  35.                     <div class="arrow-bcs"> ❯ </div>
  36.                     <li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope
  37.                         itemtype="https://schema.org/ListItem">
  38.                         <span style="color: #ABABAB;" class="breadcrumbs__link" itemprop="name">{{ 'car.model_lineup'|trans({}, 'dc_jaguar') }}</span>
  39.                         <meta itemprop="position" content="2"/>
  40.                     </li>
  41.                 </ol>
  42.             </div>
  43.         </section>
  45.         <section class="section-padding">
  46.             <div class="container">
  47.                 <div class="row justify-content-center">
  48.                     <div class="col-md-8 section-title mb-0 ">
  49.                         <h1 class="smal-size">{{ 'main.price_model_lineup'|trans({}, 'dc_jaguar') }} LAND ROVER</h1>
  50.                     </div>
  51.                 </div>
  52.             </div>
  53.         </section>
  55.         <section class="model-lineup section-padding section-padding-new">
  56.             <div class="container">
  57.                 <div class="row">
  58.                     {% for car in cars %}
  59.                         <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
  60.                             <div class="model-card">
  61.                                 <div class="model-image flexbox-wrapper">
  62.                                     <div class="car_status_is_new-block">
  63.                                         {% if  car.new %}
  64.                                             <span class="car_status_is_new">{{ 'pages.car.status_is_new'|trans({}, 'dc_base') }}</span>
  65.                                         {% endif %}
  66.                                     </div>
  68.                                     <a href="{{ path('landrover_card_car', {'car': car.url}) }}">
  69.                                         <img style="visibility: hidden" width="270px" height="191px"
  70.                                              data-src="{{ webpUrl(car.preview, 'small') }}">
  71.                                     </a>
  72.                                 </div>
  73.                                 <div class="card-body">
  74.                                     <span class="car-name">{{ car.modelName }}</span>
  75.                                     <span class="car-price">{{ 'main.from'|trans({}, 'dc_landrover') }} {{ car.price | price }} {{ 'main.uah'|trans({}, 'dc_landrover')|raw }}</span>
  76.                                     <span class="car-title">{{ car.slogan(app.request.locale) }}</span>
  77.                                     {# <a class="link-btn before-arrow" href="{{ path('landrover_car_configurator', { 'url': car.url }) }}">{{ 'main.configurator'|trans({}, 'dc_landrover') }}</a> #}
  78.                                     <a class="link-btn before-arrow"
  79.                                        href="{{ path('landrover_service_consultation', {'carId': car.vehicleId}) }}">{{ 'main.order_td'|trans({}, 'dc_landrover') }}</a>
  80.                                 </div>
  81.                             </div>
  82.                         </div>
  83.                     {% endfor %}
  84.                 </div>
  85.             </div>
  86.             {% include '@DcSite/Modules/car/catalog-model-range-item.html.twig' with { name: 'landrover_model_lineup_pages' } %}
  87.         </section>
  88.     </main>
  90. {% endblock %}
  92. {% block pageJS %}
  93.     <script>
  94.         app.onCustomEvent('appInit', function () {
  95.             app.loadCss('{{ asset('/bundles/dcsite/css/modules/multi-consultation-enter.css') }}');
  96.             app.loadCss('{{ asset('/bundles/dcsite/css/landrover/modules/multi-consultation.css') }}');
  98.             app.loadJs('{{ asset('/bundles/dcsite/js/hammer.min.js') }}');
  99.             app.loadJs('{{ asset('/bundles/core/js/modules/slick/slick.js') }}', function () {
  100.                 var slick = $('.slider').slick({
  101.                     autoplay: true,
  102.                     autoplaySpeed: 3000,
  103.                     arrows: false,
  104.                     dots: false,
  105.                     centerPadding: '0px',
  106.                     slidesToShow: 1,
  107.                     adaptiveHeight: true,
  108.                     variableWidth: false,
  109.                     centerMode: false,
  110.                     responsive: [
  111.                         {
  112.                             breakpoint: 992,
  113.                             settings: {
  114.                                 arrows: true,
  115.                                 adaptiveHeight: true,
  116.                                 variableWidth: false,
  117.                                 centerMode: false,
  118.                                 slidesToShow: 1
  119.                             }
  120.                         }
  121.                     ]
  122.                 });
  123.                 var length = $('.slider.regular').data('length');
  124.                 var sliderNumberBlock = $(".slider-number");
  125.                 for (var i = 1; i <= length; i++) {
  126.                     if (i === 1) {
  127.                         sliderNumberBlock.append("<div class='slides active' id='slide-" + i + "'>" + i + "</div>");
  129.                     } else {
  130.                         sliderNumberBlock.append("<div class='slides' id='slide-" + i + "'>" + i + "</div>");
  131.                     }
  132.                 }
  133.                 var slides = sliderNumberBlock.children();
  134.                 slides.each(function () {
  135.                     $(this).click(function () {
  136.                         let num = $(this).text();
  137.                         slick.slick('slickGoTo', num - 1);
  138.                     });
  139.                 });
  141.                 slick.on('beforeChange', function () {
  142.                     var beforeSlide = $(".slick-active").data("slick-index") + 1;
  143.                     $("#slide-" + beforeSlide).removeClass('active');
  144.                 });
  145.                 slick.on('afterChange', function () {
  146.                     var activeSlide = $(".slick-active").data("slick-index") + 1;
  147.                     $("#slide-" + activeSlide).addClass('active');
  148.                 });
  149.             });
  151.             var readmore = function (target) {
  152.                 $("#seo-content-main .seo-btn").on("click", function () {
  153.                     var $this = $(this);
  154.                     if ($this.hasClass("more")) {
  155.                         $this
  156.                             .removeClass("more")
  157.                             .addClass("less")
  158.                             .text("{{ 'pages.hide'|trans({}, 'dc_yamaha') }}");
  159.                         target.collapse("show");
  160.                     } else {
  161.                         $this
  162.                             .removeClass("less")
  163.                             .addClass("more")
  164.                             .text("{{ 'pages.read_all'|trans({}, 'dc_yamaha') }}");
  165.                         target.collapse("hide");
  166.                     }
  167.                 });
  168.             };
  169.             var target = $("#seo-content-main div.seo-block:nth-child(n+2)");
  170.             readmore(target);
  172.             /* Отложеная загрузка google карты */
  173.             setTimeout(function () {
  174.                 $('#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')
  175.             }, 4000);
  177.             /* Загрузка новостей блока 'специальные предложения', и 'новостей' */
  178.             app.loadJs('{{ asset('/bundles/dcsite/js/load-entities.js') }}', function () {
  179.                 initSection({
  180.                     initUrl: '{{ path('news_special_load') }}',
  181.                     wrapper: '#specialOfferVue',
  182.                     urlSingle: 'landrover_special_offers_single'
  183.                 });
  184.                 initSection({
  185.                     initUrl: '{{ path('news_load') }}',
  186.                     wrapper: '#newsVue',
  187.                     urlSingle: 'landrover_special_offers_single'
  188.                 });
  189.             });
  190.         });
  191.     </script>
  192. {% endblock %}