src/DcSiteBundle/Resources/views/Ford/Car/used-car-catalog.html.twig line 1

Open in your IDE?
  1. {% extends '@DcSite/Ford/base.html.twig' %}
  3. {% block seo %}
  4.     <title>{{ seoMeta.title ?? 'pages.seo.used_cars.catalog.title'|trans({}, 'dc_ford') }}</title>
  5.     <meta name="description" content="{{ seoMeta.description ?? 'pages.seo.used_cars.catalog.description'|trans({}, 'dc_ford') }}"/>
  6. {% endblock %}
  8. {% block ogtagDynamic %}
  9.     <meta property="og:title" content="{{ seoMeta.title ?? 'pages.seo.used_cars.catalog.title'|trans({}, 'dc_ford') }}"/>
  10.     <meta property="og:description" content="{{ seoMeta.description ?? 'pages.seo.used_cars.catalog.description'|trans({}, 'dc_ford') }}"/>
  11. {% endblock ogtagDynamic %}
  13. {% block css %}
  14.     <link type="text/css" media="all" href="{{ asset('/bundles/dcsite/css/ford/secondhand-catalog.css') }}" rel="stylesheet"/>
  15.     <link type="text/css" media="all" href="{{ asset('/bundles/dcsite/css/vue-range.css') }}" rel="stylesheet"/>
  16.     <link type="text/css" media="all" href="{{ asset('/bundles/dcsite/css/ford/used/used.css') }}" rel="stylesheet">
  17.     <link type="text/css" media="all" href="{{ asset('/bundles/dcsite/css/ford/used/used-single.css') }}" rel="stylesheet">
  18.     <link type="text/css" media="all" href="{{ asset('/bundles/dcsite/css/ford/used/owl.carousel.min.css') }}" rel="stylesheet">
  19. {% endblock %}
  22. {% block content %}
  23.     <section class="breadcrumbs__new title-breadcrumbs">
  24.         <div class="container">
  25.             <h1>{{ seoMeta.h1 ?? 'used_cars_title'|trans({}, 'dc_lexus') }}</h1>
  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('ford_homepage') }}">
  30.                         <span class="breadcrumbs__link" itemprop="name">FORD</span></a>
  31.                     <meta itemprop="position" content="1"/>
  32.                 </li>
  33.                 <div class="arrow-bc"> →</div>
  34.                 <li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope
  35.                     itemtype="https://schema.org/ListItem">
  36.                     <span style="color: hsla(0,0%,100%,.6); font-family: FordAntenna-Regular,sans-serif;"
  37.                           class="breadcrumbs__link" itemprop="name">{{ 'used_cars_title'|trans({}, 'dc_lexus') }}</span>
  38.                     <meta itemprop="position" content="2"/>
  39.                 </li>
  40.             </ol>
  41.         </div>
  42.     </section>
  44.     <section class="secondhand" id="secondhandCatalog" v-if="isInit">
  45.         <!--  Section Filter  -->
  46.         <div class="container--box-shadow" style="display: none;">
  47.             <div class="container">
  48.                 <div class="row">
  49.                     <div class="col-md-12">
  50.                         <div class="navbar-filter">
  51.                             <ul class="navbar-filter__list d-flex align-items-center justify-content-between pl-0 mb-0">
  52.                                 <li class="navbar-filter__item d-flex">
  53.                                     <h3 class="navbar-filter__item--header">Фільтр</h3>
  54.                                     <span class="ml-2 position-relative pt-1"><img
  55.                                                 src="{{ asset('bundles/dcsite/img/mazda/used/icons/sliders.png') }}"
  56.                                                 alt="sliders"></span>
  57.                                 </li>
  58.                                 <li class="nav-item nav-item-model dropdown">
  59.                                     <a class="nav-link dropdown-toggle" href="#" id="model" data-toggle="dropdown"
  60.                                        aria-haspopup="true" aria-expanded="false">
  61.                                         Модель
  62.                                     </a>
  63.                                     <p class="navbar-filter__selected">Mazda 6</p>
  64.                                     <div class="dropdown-menu" aria-labelledby="model">
  65.                                         <p class="dropdown-header">Виберіть модель</p>
  66.                                         <div class="dropdown-divider"></div>
  67.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  68.                                             <label for="radio-model1" class="form-check-label">Mazda 6</label>
  69.                                             <input type="radio" id="radio-model1" name="radio-model" value="Mazda 6"
  70.                                                    class="form-check-input position-static ml-5" checked>
  71.                                         </div>
  72.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  73.                                             <label for="radio-model2" class="form-check-label">Mazda CX-3</label>
  74.                                             <input type="radio" id="radio-model2" name="radio-model" value="Mazda CX-3"
  75.                                                    class="form-check-input position-static ml-5">
  76.                                         </div>
  77.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  78.                                             <label for="radio-model3" class="form-check-label">Mazda CX-30</label>
  79.                                             <input type="radio" id="radio-model3" name="radio-model" value="Mazda CX-30"
  80.                                                    class="form-check-input position-static ml-5">
  81.                                         </div>
  82.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  83.                                             <label for="radio-model4" class="form-check-label">Mazda CX-5</label>
  84.                                             <input type="radio" id="radio-model4" name="radio-model" value="Mazda CX-5"
  85.                                                    class="form-check-input position-static ml-5">
  86.                                         </div>
  87.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  88.                                             <label for="radio-model5" class="form-check-label">Mazda CX-9</label>
  89.                                             <input type="radio" id="radio-model5" name="radio-model" value="Mazda CX-9"
  90.                                                    class="form-check-input position-static ml-5">
  91.                                         </div>
  92.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  93.                                             <label for="radio-model6" class="form-check-label">Mazda MX-5</label>
  94.                                             <input type="radio" id="radio-model6" name="radio-model" value="Mazda MX-5"
  95.                                                    class="form-check-input position-static ml-5">
  96.                                         </div>
  97.                                     </div>
  98.                                 </li>
  99.                                 <li class="nav-item nav-item-fuel dropdown">
  100.                                     <a class="nav-link dropdown-toggle" href="#" id="fuel" data-toggle="dropdown"
  101.                                        aria-haspopup="true" aria-expanded="false">
  102.                                         Тип палива
  103.                                     </a>
  104.                                     <p class="navbar-filter__selected">Бензин</p>
  105.                                     <div class="dropdown-menu" aria-labelledby="fuel">
  106.                                         <p class="dropdown-header">Виберіть тип палива</p>
  107.                                         <div class="dropdown-divider"></div>
  108.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  109.                                             <label for="radio-fuel1" class="form-check-label">Бензин</label>
  110.                                             <input type="radio" id="radio-fuel1" name="radio-fuel" value="Бензин"
  111.                                                    class="form-check-input position-static ml-5" checked>
  112.                                         </div>
  113.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  114.                                             <label for="radio-fuel2" class="form-check-label">Дизель</label>
  115.                                             <input type="radio" id="radio-fuel2" name="radio-fuel" value="Дизель"
  116.                                                    class="form-check-input position-static ml-5">
  117.                                         </div>
  118.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  119.                                             <label for="radio-fuel3" class="form-check-label">Газ</label>
  120.                                             <input type="radio" id="radio-fuel3" name="radio-fuel" value="Газ"
  121.                                                    class="form-check-input position-static ml-5">
  122.                                         </div>
  123.                                     </div>
  124.                                 </li>
  125.                                 <li class="nav-item nav-item-drive dropdown">
  126.                                     <a class="nav-link dropdown-toggle" href="#" id="drive" data-toggle="dropdown"
  127.                                        aria-haspopup="true" aria-expanded="false">
  128.                                         Тип приводу
  129.                                     </a>
  130.                                     <p class="navbar-filter__selected">Передній</p>
  131.                                     <div class="dropdown-menu" aria-labelledby="drive">
  132.                                         <p class="dropdown-header">Виберіть тип приводу</p>
  133.                                         <div class="dropdown-divider"></div>
  134.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  135.                                             <label for="radio-drive1" class="form-check-label">Передній</label>
  136.                                             <input type="radio" id="radio-drive1" name="radio-drive" value="Передній"
  137.                                                    class="form-check-input position-static ml-5" checked>
  138.                                         </div>
  139.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  140.                                             <label for="radio-drive2" class="form-check-label">Задній</label>
  141.                                             <input type="radio" id="radio-drive2" name="radio-drive" value="Задній"
  142.                                                    class="form-check-input position-static ml-5">
  143.                                         </div>
  144.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  145.                                             <label for="radio-drive3" class="form-check-label">Повний</label>
  146.                                             <input type="radio" id="radio-drive3" name="radio-drive" value="Повний"
  147.                                                    class="form-check-input position-static ml-5">
  148.                                         </div>
  149.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  150.                                             <label for="radio-drive4" class="form-check-label">AWD</label>
  151.                                             <input type="radio" id="radio-drive4" name="radio-drive" value="AWD"
  152.                                                    class="form-check-input position-static ml-5">
  153.                                         </div>
  154.                                     </div>
  155.                                 </li>
  156.                                 <li class="nav-item nav-item-transmission dropdown">
  157.                                     <a class="nav-link dropdown-toggle" href="#" id="transmission"
  158.                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  159.                                         Тип КПП
  160.                                     </a>
  161.                                     <p class="navbar-filter__selected">Автомат</p>
  162.                                     <div class="dropdown-menu" aria-labelledby="transmission">
  163.                                         <p class="dropdown-header">Виберіть тип КПП</p>
  164.                                         <div class="dropdown-divider"></div>
  165.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  166.                                             <label for="radio-transmission1" class="form-check-label">Автомат</label>
  167.                                             <input type="radio" id="radio-transmission1" name="radio-transmission"
  168.                                                    value="Автомат" class="form-check-input position-static ml-5"
  169.                                                    checked>
  170.                                         </div>
  171.                                         <div class="form-check dropdown-item d-flex justify-content-between">
  172.                                             <label for="radio-transmission2" class="form-check-label">Механічна</label>
  173.                                             <input type="radio" id="radio-transmission2" name="radio-transmission"
  174.                                                    value="Механічна" class="form-check-input position-static ml-5">
  175.                                         </div>
  176.                                     </div>
  177.                                 </li>
  178.                                 <li class="nav-item">
  179.                                     <button class="btn btn-lg navbar-filter__button">Застосуваты</button>
  180.                                 </li>
  181.                             </ul>
  182.                         </div>
  183.                     </div>
  184.                 </div>
  185.             </div>
  186.         </div>
  187.         <!--  End section filter  -->
  189.         <!--  Car List  -->
  190.         <div class="container car-list mt-5 mb-5">
  191.             <div class="row">
  192.                 {% for i,car in vehicles.secondhand %}
  193.                     <div class="col-md-4">
  194.                         {% if car.isSelect %}
  195.                             <img style="position: absolute; top: 10px; right: 20px; width: 65px; z-index: 2"
  196.                                  src="{{ asset('/bundles/dcsite/img/cars.png') }}" alt="">
  197.                         {% endif %}
  198.                         <div class="car-list__item">
  200. {#                            deposit#}
  201.                             {% if car.deposit %}
  202.                                 <div class="deposit-sales-bg"></div>
  203.                                 <span class="deposit-title">{{ 'pages.base.used_cars.deposit'|trans({}, 'dc_ford') }}</span>
  204.                             {% endif %}
  205. {#                            end deposit#}
  207.                             <div class="display__image__mileage"
  208.                                  style="width: 358px; height: 235px; background-color: grey"></div>
  209.                             <div class="owl-carousel">
  210.                                 {% for y,image in car.gallery %}
  211.                                     <div class="item">
  212.                                         <img src="{{ image.small }}" alt="">
  213.                                     </div>
  214.                                 {% endfor %}
  215.                             </div>
  216.                             <h2 class="car-list__car--title pl-2 pr-2">{{ car.fullName }}</h2>
  217.                             <div class="car-list__price mt-4 d-flex justify-content-between pl-2 pr-2">
  218.                                 <p>
  219.                                     <span class="car-list__price--key">{{ 'used_cars.year'|trans({}, 'dc_base') }}:</span>
  220.                                     <span class="car-list__price--value"><b> {{ car.year }}</b></span>
  221.                                 </p>
  222.                                 <p>
  223.                                     <span class="car-list__price--key">{{ 'used_cars.mileage'|trans({}, 'dc_base') }}:</span>
  224.                                     <span class="car-list__price--value">{{ (car.mileage / 1000)|round() }} тис. км</span>
  225.                                 </p>
  226.                             </div>
  227.                             <hr class="mt-0">
  228.                             <div class="car-list__price d-flex justify-content-between pl-2 pr-2">
  229.                                 <p>
  230.                                     <span class="car-list__price--key">{{ 'used_cars.price'|trans({}, 'dc_base') }}:</span>
  231.                                     <span class="car-list__price--value"><b>₴ {{ car.price|price }}</b></span>
  232.                                 </p>
  233.                                 {% if car.creditPayment %}
  234.                                     <p>
  235.                                         <span class="car-list__price--key">{{ 'used_cars.credit'|trans({}, 'dc_base') }}:</span>
  236.                                         <span class="car-list__price--value">{{ car.creditPayment|price }} ₴/міс</span>
  237.                                     </p>
  238.                                 {% endif %}
  239.                             </div>
  240.                             <hr class="mt-0">
  241.                             <div class="car-list__option-block d-flex justify-content-between text-center pl-2 pr-2">
  242.                                 <div class="car-list__option-fuel">
  243.                                     <p class="mb-2"><img
  244.                                                 src="{{ asset('bundles/dcsite/img/mazda/used/icons/fuel-icon.png') }}"
  245.                                                 alt="fuel"></p>
  246.                                     <p class="car-list__option--key m-0">{{ car.engine }}</p>
  247.                                     <p class="car-list__option--value m-0">{{ (car.engineVolume / 1000)|number_format(1) }}
  248.                                         V</p>
  249.                                 </div>
  250.                                 <div class="car-list__option-drive">
  251.                                     <p class="mb-2"><img
  252.                                                 src="{{ asset('bundles/dcsite/img/mazda/used/icons/drive-icon.png') }}"
  253.                                                 alt="drive"></p>
  254.                                     <p class="car-list__option--key m-0">{{ car.drive }}</p>
  255.                                     <p class="car-list__option--value m-0">{{ car.enginePower }} {{ 'used_cars.engine_power'|trans({}, 'dc_base') }}</p>
  256.                                 </div>
  257.                                 <div class="car-list__option-transmission">
  258.                                     <p class="mb-2"><img
  259.                                                 src="{{ asset('bundles/dcsite/img/mazda/used/icons/transmission-icon.png') }}"
  260.                                                 alt="transmission"></p>
  261.                                     <p class="car-list__option--key m-0">{{ car.transmission }}</p>
  262.                                     <p class="car-list__option--value m-0">{{ car.body }}</p>
  263.                                 </div>
  264.                             </div>
  265.                             <div>
  266.                                 <a href="{{ car.link }}"
  267.                                    class="btn btn-lg car-list__item--button">{{ 'pages.buttons.details'|trans({}, 'dc_base') }}</a>
  268.                             </div>
  269.                         </div>
  270.                     </div>
  271.                 {% endfor %}
  272.             </div>
  273.         </div>
  275.     </section>
  277. {% endblock %}
  279. {% block pageJS %}
  280.     <script>
  281.         app.onCustomEvent('appInit', function () {
  282.             app.loadJs('{{ asset('/bundles/dcsite/js/secondhand.js') }}', function () {
  283.                 initSecondhand({
  284.                     initElem: '#secondhandCatalog',
  285.                     url: '{{ path('secondhand') }}',
  286.                     byBrand: true,
  287.                     path: 'ford_used_car_single',
  288.                 });
  289.             });
  290.         });
  291.     </script>
  292. {% endblock pageJS %}