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

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