templates/frontend/template/car/detail.html.twig line 1

  1. {% extends "frontend/base.html.twig" %}
  3. {% block title %}Auto - {{ car.title }}{% endblock %}
  5. {% block body_attrs %}
  6.     id="car-detail"
  7. {% endblock %}
  9. {% block body %}
  11. {% set main_image = car.mainImage|default %}
  12. {% set other_meta = car.metaDecoded('other_meta') %}
  14. <div class="car-detail-header">
  15.     <div class="car-detail-header-background">
  16.     {% if main_image %}
  17.         {{ app_image_html(main_image.idFile) }}
  18.     {% endif %}
  19.     </div>
  21.     <div class="car-detail-header-layer">
  22.         <div class="car-detail-header-content">
  23.             <h1 class="car-detail-header-title">{{ car.title }}</h1>
  25.             <div class="car-detail-header-footer">
  26.                 <div class="left">
  27.                 {%
  28.                     set items = [
  29.                         { title: 'Cena:', name: 'price-tax', note: other_meta.price_note ?? null },
  30.                         { title: 'Dostupnost:', name: 'availability' },
  31.                         { title: 'Výše splátek:', name: 'financing', prefix: 'Od ' },
  32.                         { title: 'Najeto:', name: 'driven' },
  33.                     ]
  34.                 %}
  36.                 {% for item in items %}
  37.                     {% set value = app_car_property(car, item.name, true) %}
  38.                     {% if value %}
  39.                         <div class="text-column">
  40.                             <span class="title">{{ item.title }}</span>
  41.                             <span class="value">{{ item.prefix is defined ? item.prefix : '' }}{{ app_car_property_value(value, item.name, true)|raw }}</span>
  42.                             {% if item.note is defined and not item.note is empty %}
  43.                             <span class="note">{{ item.note }}</span>
  44.                             {% endif %}
  45.                         </div>
  46.                     {% endif %}
  47.                 {% endfor %}
  48.                 </div>
  50.                 <div class="right">
  51.                     <a href="#poptavka" class="button button-white"><span>Vytvořit poptávku</span></a>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.     </div>
  56. </div>
  58. <div id="page-content">
  59.     <div class="technical-specification container">
  60.         <h2>Technické specifikace</h2>
  62.         {%
  63.             set specifications = [
  64.                 { title: 'Rok výroby', name: 'manufacture-year' },
  65.                 { title: 'Uvedení do provozu', name: 'commissioning' },
  66.                 { title: 'Najeto', name: 'driven' },
  67.                 { title: 'Motorizace (objem)', name: 'motorization' },
  68.                 { title: 'Výkon (kW / k)', name: 'power' },
  69.                 { title: 'Palivo', name: 'fuel-type' },
  70.                 { title: 'Převodovka', name: 'transmission' },
  71.                 { title: 'Barva exteriéru', name: 'exterior-color' },
  72.                 { title: 'Barva interiéru', name: 'interior-color' },
  73.                 { title: 'Dostupnost', name: 'availability' },
  74.                 { title: 'Komise', name: 'commission' },
  75.                 { title: 'VIN kód', name: 'vin' },
  76.             ]
  77.         %}
  78.         <div class="specification-grid">
  79.         {% for item in specifications %}
  80.             {% set value = app_car_property(car, item.name, true) %}
  81.             <div class="specification-item item-{{ item.name }}">
  82.                 <span class="value">{{ (value or (get_type(value) == 'integer' and value == 0)) ? app_car_property_value(value, item.name, true)|raw : 'N/A' }}</span>
  83.                 <span class="title">{{ item.title }}</span>
  84.             </div>
  85.         {% endfor %}
  86.         </div>
  88.         <div class="accordions">
  89.             <details class="accordion">
  90.                 <summary class="accordion-header">Doplňková výbava</summary>
  91.                 <div class="accordion-content">
  92.                     <ul class="list list-columns-2">
  93.                     {% for item in car.equipment|sort((a, b) => a.value <=> b.value) %}
  94.                         <li class="list-item">{{ item.value }}</li>
  95.                     {% endfor %}
  96.                     </ul>
  97.                 </div>
  98.             </details>
  99.         </div>
  100.     </div>
  102.     <div class="car-detail-gallery" data-splide="{{
  103.         {
  104.             'type': 'loop',
  105.             'autoWidth': true,
  106.             'arrows': false,
  107.             'pagination': false,
  108.             'focus': 'center',
  109.             'gap': '1rem',
  110.             'fixWidth': true,
  111.         }|json_encode|escape('html') }}">
  112.     {% for image in car.images %}
  113.         <div class="gallery-item" style="--img-width:{{ file_width(image.idFile) }};--img-height:{{ file_height(image.idFile) }};">
  114.             {{ app_image_html(image.idFile) }}
  115.         </div>
  116.     {% endfor %}
  117.     </div>
  119.     {%
  120.         set images = [
  121.             'img/homepage/service/gallery-image-1.jpg',
  122.         ]
  123.     %}
  124.     <div class="block block-info-with-gallery car-detail-financing">
  125.         <div class="block-info-gallery">
  126.             <div class="gallery-slider" data-splide="{{
  127.                 {
  128.                     'type': 'slide',
  129.                     'pagination': false,
  130.                     'arrows': false,
  131.                     'drag': false,
  132.                 }|json_encode|escape('html') }}">
  133.             {% for image in images %}
  134.                 <div class="gallery-slide">
  135.                     {{ app_static_image_html(image) }}
  136.                 </div>
  137.             {% endfor %}
  138.             </div>
  139.         </div>
  141.         <div class="block-info-content">
  142.             <div class="block-info-left">
  143.                 <h2 class="block-part-title">Možnosti financování</h2>
  145.                 <div class="block-part-description">
  146.                     Díky našemu výhodnému financování je nákup vozu dostupný pro každého. Stačí si vybrat svůj oblíbený vůz a plán financování podle vašich potřeb.
  147.                 </div>
  149.                 {%
  150.                     set columns = [
  151.                         { 'icon': 'img/homepage/service/icon-1.svg', 'title': 'Zálohová platba od 10%' },
  152.                         { 'icon': 'img/homepage/service/icon-2.svg', 'title': '87% přihlášek je schváleno' },
  153.                         { 'icon': 'img/homepage/service/icon-3.svg', 'title': 'Zajistíme financování vozu včetně služeb.' },
  154.                     ]
  155.                 %}
  156.                 <div class="block-part-columns">
  157.                     {% for column in columns %}
  158.                         <div class="column">
  159.                             {{ app_static_image_html(column.icon, { 'class': 'column-icon' }) }}
  160.                             <span class="column-title">{{ column.title }}</span>
  161.                         </div>
  162.                     {% endfor %}
  163.                 </div>
  165.                 {%
  166.                     set boxes = [
  167.                         { 'url': '#', 'title': 'Finanční leasing' },
  168.                         { 'url': '#', 'title': 'Operativní leasing' },
  169.                         { 'url': '#', 'title': 'Neúčelový spotřebitelský úvěr' },
  170.                     ]
  171.                 %}
  172.                 <div class="block-part-boxes">
  173.                 {% for box in boxes %}
  174.                     <a href="{{ box.url }}" class="box">{{ box.title }}</a>
  175.                 {% endfor %}
  176.                 </div>
  178.                 {%
  179.                     set buttons_bottom = [
  180.                         { 'url': '#poptavka', 'title': 'Pojďte do toho s námi' },
  181.                     ]
  182.                 %}
  183.                 <div class="block-part-buttons-bottom">
  184.                     {% set financing = app_car_property(car, 'financing', true) %}
  185.                     {% if financing %}
  186.                         <span>Již od {{ app_car_property_value(financing, 'financing', true) }}</span>
  187.                     {% endif %}
  188.                 {% for button in buttons_bottom %}
  189.                     <a href="{{ button.url }}" class="button button-primary"><span>{{ button.title }}</span></a>
  190.                 {% endfor %}
  191.                 </div>
  192.             </div>
  194.             <div class="block-info-right">
  195.             </div>
  196.         </div>
  197.     </div>
  199.     <div class="container">
  200.         <div class="banner">
  201.             <h2 class="banner-title">Mám zájem o předváděcí jízdu</h2>
  202.             <a href="#poptavka" class="banner-button button button-primary"><span>Domluvit si termín</span></a>
  203.         </div>
  204.     </div>
  206.     <div class="car-detail-contact" id="poptavka">
  207.         {{ app_static_image_html('img/car/contact-background.jpg', { 'class': 'block-part-background' }) }}
  209.         <div class="block-part-content container">
  210.             <div class="block-part-form">
  211.                 <h2>Máte zájem? Kontaktujte nás!</h2>
  213.                 <form action="{{ app_endpoint('form') }}" method="post" class="form" data-use-js="true">
  214.                     <input type="hidden" name="object_type" value="car">
  215.                     <input type="hidden" name="object_name" value="{{ car.slug }}">
  217.                     <div class="form-field">
  218.                         <label for="full-name">Jméno a příjmení</label>
  219.                         <input type="text" name="full_name" id="full-name" placeholder="Jméno a příjmení" required>
  220.                     </div>
  221.                     <div class="form-field form-field-half">
  222.                         <label for="email">Email</label>
  223.                         <input type="email" name="email" id="email" placeholder="Email" required>
  224.                     </div>
  225.                     <div class="form-field form-field-half">
  226.                         <label for="phone">Telefon</label>
  227.                         <input type="text" name="phone" id="phone" placeholder="Telefon">
  228.                     </div>
  229.                     <div class="form-field">
  230.                         <label for="message">Váš dotaz</label>
  231.                         <textarea name="message" id="message" rows="3" placeholder="Váš dotaz" required></textarea>
  232.                     </div>
  234.                     <div class="form-buttons">
  235.                         <button type="submit" class="button button-submit"><span>Odeslat</span></button>
  236.                         <p class="notice">Tato stránka je chráněna pomocí reCAPTCHA a <a href="{{ app_url('page', { name: 'protection-of-personal-data' }) }}" target="_blank">zásadami zpracování a ochrany osobních údajů</a>.</p>
  237.                     </div>
  239.                     {{ app_form_recaptcha() }}
  240.                 </form>
  241.             </div>
  243.             <div class="block-part-top">
  244.                 <div class="content-item">
  245.                     <span class="content-item-title">Telefonní číslo</span>
  246.                     <span><a href="tel:+420272084111">+420 272 084 111</a></span>
  247.                 </div>
  248.                 <div class="content-item">
  249.                     <span class="content-item-title">E-mail:</span>
  250.                     <span><a href="mailto:isr@auto-isr.cz">isr@auto-isr.cz</a></span>
  251.                 </div>
  252.                 <div class="content-item">
  253.                     <span class="content-item-title">Po - Pá:</span>
  254.                     <span>08:00 - 18:00</span>
  255.                 </div>
  256.                 <div class="content-item">
  257.                     <span class="content-item-title">Adresa:</span>
  258.                     <span>V Oblouku 121, 251 01 Čestlice</span>
  259.                 </div>
  260.             </div>
  262.             <div class="block-part-bottom">
  263.                 {{ app_static_image_html('img/homepage/contact/map.jpg') }}
  265.                 <div class="floating-content">
  266.                     <a href="https://goo.gl/maps/A8u2ddZxKkssR5wB9" class="button button-primary button-map-left" target="_blank"><span>Auto I.S.R.</span></a>
  267.                 </div>
  268.             </div>
  269.         </div>
  270.     </div>
  272.     <div class="block block-car-list car-detail-similar-cars">
  273.         <div class="container">
  274.             <div class="block-car-list-header">
  275.                 <h2 class="block-car-list-title">Podobná vozidla</h2>
  276.             </div>
  278.             <div class="car-list">
  279.                 {% include 'frontend/api/cars_list.html.twig' with { 'cars': app_cars('similar', { 'car': car }) } %}
  280.             </div>
  281.         </div>
  282.     </div>
  283. </div>
  285. {% endblock %}