src/DcSiteBundle/Resources/views/Opel/Car/car-in-stocks.html.twig line 1

Open in your IDE?
  1. {% extends '@DcSite/Opel/base.html.twig' %}
  2. {% block seo %}
  3.     <title>{{ 'seo.car_in_stock.title'|trans({}, 'dc_opel') }}</title>
  4.     <meta name="description" content="{{ 'seo.car_in_stock.desc'|trans({}, 'dc_opel') }}"/>
  5. {% endblock seo %}
  6. {% block ogtagDynamic %}
  7.     <meta property="og:title" content="{{ 'seo.car_in_stock.title'|trans({}, 'dc_opel') }}"/>
  8.     <meta property="og:description" content="{{ 'seo.car_in_stock.desc'|trans({}, 'dc_opel') }}"/>
  9. {% endblock ogtagDynamic %}
  10. {% block css %}
  11. {% endblock %}
  12. {% block content %}
  13.     <section class="breadcrumbs__new">
  14.         <div class="container">
  15.             <ol class="global_breadcrumbs__new" itemscope itemtype="https://schema.org/BreadcrumbList">
  16.                 <li class="marker__none" itemprop="itemListElement" itemscope
  17.                     itemtype="https://schema.org/ListItem">
  18.                     <a itemprop="item" href="{{ path('opel_homepage') }}">
  19.                         <span class="breadcrumbs__link" itemprop="name">opel</span></a>
  20.                     <meta itemprop="position" content="1"/>
  21.                 </li>
  22.                 <div class="arrow-bcs"> ❯ </div>
  23.                 <li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope
  24.                     itemtype="https://schema.org/ListItem">
  25.                     <span style="color: #837F7F;" class="breadcrumbs__link" itemprop="name">{{ 'pages.car_in_stock.breadcrumb_title'|trans({}, 'dc_opel') }}</span>
  26.                     <meta itemprop="position" content="2"/>
  27.                 </li>
  28.             </ol>
  29.         </div>
  30.     </section>
  31.     <section class="modules__used-cars elements__style-form-el pt-0" id="used-car-catalog">
  32.         <header class="page-header">
  33.             <div class="container">
  34.                 <h1 class="section-title text-left mb-2">{{ 'pages.car_in_stock.title'|trans({}, 'dc_opel') }}</h1>
  35.                 {% include '@DcSite/Modules/car-instock/index.html.twig' with {
  36.                     'paths': {
  37.                         'leasingPage': path('opel_finance_leasing'),
  38.                         'creditPage': path('opel_finance_credit'),
  39.                         'tradeInPage': path('opel_finance_trade_in'),
  40.                         'testDrivePage': path('opel_service_consultation')
  41.                     }
  42.                 } %}
  43.                 <div class="page-header__descr">
  44.                     {{ 'pages.car_in_stock.title_desc'|trans({}, 'dc_opel')|raw }}
  45.                 </div>
  46.             </div>
  47.         </header>
  48.         <div class="modules__used-cars-filter" v-if="step === 2">
  49.             <div class="container">
  50.                 <div class="row">
  51.                     <div class="col-md-3">
  52.                         <div class="form-group">
  53.                             <select class="form-control" v-model="selected.model">
  54.                                 <option :value="0">Модель</option>
  55.                                 <option :value="model.id" v-for="model in models" v-html="model.name"></option>
  56.                             </select>
  57.                         </div>
  58.                     </div>
  59.                     <div class="col-md-3">
  60.                         <div class="form-group">
  61.                             <select class="form-control" v-model="selected.equipment" :disabled="!selected.model">
  62.                                 <option :value="0">{{ 'car_in_stock_module.complectation'|trans({}, 'dc_base') }}</option>
  63.                                 <option v-for="equipment in equipments[selected.model]" :value="equipment.id"
  64.                                         v-html="equipment.name"></option>
  65.                             </select>
  66.                         </div>
  67.                     </div>
  68.                     <div class="col-md-3">
  69.                         <div class="form-group">
  70.                             <select class="form-control" v-model="selected.fuelType" :disabled="!selected.model">
  71.                                 <option :value="0">{{ 'car_in_stock_module.fuel_type'|trans({}, 'dc_base') }}</option>
  72.                                 <option v-for="fuel in fuelTypes[selected.model]" :value="fuel.id"
  73.                                         v-html="fuel.name"></option>
  74.                             </select>
  75.                         </div>
  76.                     </div>
  77.                     <div class="col-md-3" v-if="colors[selected.model]">
  78.                         <div class="form-group">
  79.                             <select class="form-control" v-model="selected.color" :disabled="!selected.model">
  80.                                 <option :value="0">{{ 'car_in_stock_module.color'|trans({}, 'dc_base') }}</option>
  81.                                 <option v-for="color in colors[selected.model]" :value="color" v-html="color"></option>
  82.                             </select>
  83.                         </div>
  84.                     </div>
  85.                 </div>
  86.                 <div class="row">
  87.                     <div class="col-md-3 d-flex justify-content-between">
  88.                         <button class="modules__used-cars-filter-btn filter-btn-reset d-flex align-items-center"
  89.                                 @click="reset">
  90.                             {{ 'car_in_stock_module.reset_all'|trans({}, 'dc_base') }} <span class="close-icon"></span>
  91.                         </button>
  92.                     </div>
  93.                 </div>
  94.             </div>
  95.         </div>
  96.         <div class="container" v-if="display__twig">
  97.             {% if vehicles.vehicles is defined %}
  98.                 <div class="row car-list mb-0">
  99.                     {% for vehicle in vehicles.vehicles %}
  100.                         <div class="col-12 col-md-4 col-sm-6">
  101.                             <div class="car-list__item">
  102.                                 <a href="{{ vehicle.url }}" class="car-list__photo">
  103.                                     <img src="{{ vehicle.image }}" alt="{{ vehicle.name }}">
  104.                                 </a>
  105.                                 <div class="car-list__content">
  106.                                     <div class="car__list__status__wrapper">
  107.                                         <div class="car__list__status">
  108.                                             <div class="car-list__title">
  109.                                                 <a href="{{ vehicle.url }}">Opel <span>{{ vehicle.name }}</span></a>
  110.                                             </div>
  111.                                             <div class="car-list__compelctation">{{ vehicle.equipment.title }}</div>
  112.                                         </div>
  113.                                         {% if vehicle.hasStorage and not vehicle.hasReserved %}
  114.                                             <div class="modules__filter-car-instock">
  115.                                                 {{ 'car_in_stock_module.in_stock'|trans({}, 'dc_base') }}
  116.                                             </div>
  117.                                         {% endif %}
  118.                                     </div>
  119.                                     <ul class="car-list-options --price --b-bottom">
  120.                                         {% if vehicle.hasReserved %}
  121.                                             <li class="first-price">{{ 'car_in_stock_module.reserved'|trans({}, 'dc_base') }}</li>
  122.                                         {% elseif vehicle.inDelivery and not vehicle.hasStorage %}
  123.                                             <li class="first-price">{{ 'car_in_stock_module.in_delivery'|trans({}, 'dc_base') }}</li>
  124.                                         {% endif %}
  125.                                         {% if not vehicle.hasReserved %}
  126.                                             <li class="car-list-options__item">
  127.                                                 <span class="car-list-options__title">{{ 'car.price.title'|trans({}, 'dc_morris') }}</span>
  128.                                                 <span class="car-list-options__val">
  129.                                                     <span>{{ vehicle.price|price }} грн</span>
  130.                                                     {% if vehicle.fullPrice > vehicle.price %}
  131.                                                         <div class="second-price">{{ vehicle.fullPrice|price }} грн</div>
  132.                                                     {% endif %}
  133.                                                 </span>
  134.                                             </li>
  135.                                         {% endif %}
  136.                                     </ul>
  137.                                     <ul class="car-list-options">
  138.                                         <li class="car-list-options__item">
  139.                                             <span class="car-list-options__title">{{ 'car.options.power'|trans({}, 'dc_morris') }}</span>
  140.                                             <span class="car-list-options__val">{{ vehicle.power }} к.с.
  141.                                             </span>
  142.                                         </li>
  143.                                         <li class="car-list-options__item">
  144.                                             <span class="car-list-options__title">{{ 'car.options.fuel_type'|trans({}, 'dc_morris') }}</span>
  145.                                             <span class="car-list-options__val">{{ vehicle.fuelType.name }}
  146.                                             </span>
  147.                                         </li>
  148.                                         <li class="car-list-options__item">
  149.                                             <span class="car-list-options__title">{{ 'car.options.year'|trans({}, 'dc_morris') }}</span>
  150.                                             <span class="car-list-options__val">{{ vehicle.year }}</span>
  151.                                         </li>
  152.                                     </ul>
  153.                                     <a href="{{ vehicle.url }}"
  154.                                        class="btn btn-outline-primary --size-md w-100 car-list__more">{{ 'pages.buttons.details'|trans({}, 'dc_base') }}</a>
  155.                                 </div>
  156.                             </div>
  157.                         </div>
  158.                     {% endfor %}
  159.                 </div>
  160.             {% endif %}
  161.         </div>
  162.         <div class="container" v-if="display__vue">
  163.             <div class="row car-list mb-0">
  164.                 <div class="col-12 col-md-4 col-sm-6" v-if="filter(vehicle)" v-for="vehicle in vehicles">
  165.                     <div class="car-list__item">
  166.                         <a :href="vehicle.url" class="car-list__photo">
  167.                             <img :src="vehicle.image" :alt="vehicle.name">
  168.                         </a>
  169.                         <div class="car-list__content">
  170.                             <div class="car__list__status__wrapper">
  171.                                 <div class="car__list__status">
  172.                                     <div class="car-list__title">
  173.                                         <a :href="vehicle.url">Opel <span v-html="vehicle.name"></span></a>
  174.                                     </div>
  175.                                     <div class="car-list__compelctation" v-html="vehicle.equipment.title"></div>
  176.                                 </div>
  177.                                 <div v-if="vehicle.hasStorage && !vehicle.hasReserved"
  178.                                      class="modules__filter-car-instock">
  179.                                     {{ 'car_in_stock_module.in_stock'|trans({}, 'dc_base') }}
  180.                                 </div>
  181.                             </div>
  182.                             <ul class="car-list-options --price --b-bottom">
  183.                                 <li v-if="vehicle.hasReserved"
  184.                                     class="first-price">{{ 'car_in_stock_module.reserved'|trans({}, 'dc_base') }}</li>
  185.                                 <li v-else-if="vehicle.inDelivery && !vehicle.hasStorage"
  186.                                     class="first-price">{{ 'car_in_stock_module.in_delivery'|trans({}, 'dc_base') }}</li>
  187.                                 <li v-if="!vehicle.hasReserved" class="car-list-options__item">
  188.                                     <span class="car-list-options__title">{{ 'car.price.title'|trans({}, 'dc_morris') }}</span>
  189.                                     <span class="car-list-options__val">
  190.                                         <span v-html="vehicle.price.toLocaleString() + ' грн'"></span>
  191.                                         <div class="second-price" v-if="vehicle.fullPrice > vehicle.price"
  192.                                              v-html="vehicle.fullPrice.toLocaleString() + ' грн'"></div>
  193.                                     </span>
  194.                                 </li>
  195.                             </ul>
  196.                             <ul class="car-list-options">
  197.                                  <li class="car-list-options__item">
  198.                                     <span class="car-list-options__title">{{ 'car.options.transmission_type'|trans({}, 'dc_morris') }}<</span>
  199.                                     <span class="car-list-options__val" v-html="vehicle.transmissionType.name">
  200.                                     </span>
  201.                                 </li>
  202.                                 <li class="car-list-options__item">
  203.                                     <span class="car-list-options__title">{{ 'car.options.power'|trans({}, 'dc_morris') }}</span>
  204.                                     <span class="car-list-options__val" v-html="vehicle.power + ' к.с.'">
  205.                                     </span>
  206.                                 </li>
  207.                                 <li class="car-list-options__item">
  208.                                     <span class="car-list-options__title">{{ 'car.options.fuel_type'|trans({}, 'dc_morris') }}</span>
  209.                                     <span class="car-list-options__val" v-html="vehicle.fuelType.name">
  210.                                     </span>
  211.                                 </li>
  212.                                 <li class="car-list-options__item">
  213.                                     <span class="car-list-options__title">{{ 'car.options.year'|trans({}, 'dc_morris') }}</span>
  214.                                     <span class="car-list-options__val" v-html="vehicle.year"></span>
  215.                                 </li>
  216.                             </ul>
  217.                             <a :href="vehicle.url"
  218.                                class="btn btn-outline-primary --size-md w-100 car-list__more">{{ 'pages.buttons.details'|trans({}, 'dc_base') }}</a>
  219.                         </div>
  220.                     </div>
  221.                 </div>
  222.             </div>
  223.         </div>
  224.     </section>
  225. {% endblock %}
  226. {% block pageJS %}
  227.     <script>
  228.         app.onCustomEvent('appInit', function () {
  229.             app.loadCss('{{ asset('bundles/dcsite/css/modules/used-cars/used-cars.css') }}');
  230.             app.loadJs('{{ asset('bundles/dcsite/js/modules/car-in-stock.js') }}', function () {
  231.                 usedCarsCatalog({
  232.                     initUrl: '{{ path('base_car_in_stock_init_catalog') }}',
  233.                     withoutFirstStep: true,
  234.                 });
  235.             });
  236.         });
  237.     </script>
  238. {% endblock %}