templates/homepage/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Autanet.cz - Ojetá a nová vozidla na prodej. Vyberte si…{% endblock %}
  5. {% block desc %}Nová, předváděcí a ojetá auta z nabídky autobazarů a autosalonů. Auta na prodej, testy aut, rady, tipy a novinky na motoristickém inzertním portálu Autanet.cz.{% endblock %}
  7. {% block body %}
  10.     <div {{ react_component('SearchHomepage', {
  12.     }) }}></div>
  15.     <section class="stats">
  16.         <div class="stats__item">
  17.             <div class="stats__value">{{ stats.total|number_format(0, null, ' ') }}</div>
  18.             <div class="stats__label">vozidel v nabídce</div>
  19.         </div>
  20.         <div class="stats__item">
  21.             <div class="stats__value">+{{ stats.today|number_format(0, null, ' ') }}</div>
  22.             <div class="stats__label">přidáno dnes</div>
  23.         </div>
  24.         <div class="stats__item">
  25.             <div class="stats__value">+{{ stats.week|number_format(0, null, ' ') }}</div>
  26.             <div class="stats__label">za 7 dní</div>
  27.         </div>
  28.         <div class="stats__item">
  29.             <div class="stats__value">{{ stats.dealers|number_format(0, null, ' ') }}</div>
  30.             <div class="stats__label">prodejců</div>
  31.         </div>
  32.     </section>
  34.     <section class="tips">
  35.         <h2 class="section-title">Doporučené vozy</h2>
  36.         <div class="tips__grid">
  37.             {% for vehicle in recommendedVehicles %}
  38.                 {% include 'vehicle_tip/_tipCard.html.twig' with {
  39.                     vehicle: vehicle,
  40.                     trackTip: vehicle.id in tipVehicleIds,
  41.                     compact: true,
  42.                     autanetPartnerId: tipAutanetPartnerIds[vehicle.id]|default(null),
  43.                     recommendedPlacement: 'R01'
  44.                 } only %}
  45.             {% endfor %}
  46.         </div>
  47.     </section>
  49.     {% if partners %}
  50.         <section class="partners">
  51.             <h2 class="section-title">Partneři portálu</h2>
  52.             <div class="partners__row" id="partners-slider">
  53.                 {% for partner in partners %}
  54.                     <a class="partners__item"
  55.                        href="{{ partner.url }}"
  56.                        data-partner-id="{{ partner.id }}"
  57.                        data-autanet-partner-id="{{ partner.autanetPartner.id }}">
  58.                     <span class="partners__logo">
  59.                         <img src="{{ asset('img/partner/' ~ partner.logo) }}" alt="{{ partner.name }}" loading="lazy"
  60.                              width="150">
  61.                     </span>
  62.                         <span class="partners__name">{{ partner.name }}</span>
  63.                     </a>
  64.                 {% endfor %}
  65.             </div>
  66.         </section>
  67.     {% endif %}
  69.     <section class="grid">
  70.         <div>
  72.             <section class="models">
  73.                 <h2 class="section-title">Nejhledanější modely aut</h2>
  74.                 <div class="models__grid">
  75.                     <div class="models__col">
  76.                         <h3 class="models__brand">Škoda</h3>
  77.                         <ul class="models__list">
  78.                             <li><a href="/osobni-vozidla/skoda/octavia">Škoda Octavia</a></li>
  79.                             <li><a href="/osobni-vozidla/skoda/fabia">Škoda Fabia</a></li>
  80.                             <li><a href="/osobni-vozidla/skoda/kodiaq">Škoda Kodiaq</a></li>
  81.                             <li><a href="/osobni-vozidla/skoda/superb">Škoda Superb</a></li>
  82.                             <li><a href="/osobni-vozidla/skoda/karoq">Škoda Karoq</a></li>
  83.                         </ul>
  84.                     </div>
  85.                     <div class="models__col">
  86.                         <h3 class="models__brand">Volkswagen</h3>
  87.                         <ul class="models__list">
  88.                             <li><a href="/osobni-vozidla/volkswagen/passat">Volkswagen Passat</a></li>
  89.                             <li><a href="/osobni-vozidla/volkswagen/touran">Volkswagen Touran</a></li>
  90.                             <li><a href="/osobni-vozidla/volkswagen/tiguan">Volkswagen Tiguan</a></li>
  91.                             <li><a href="/osobni-vozidla/volkswagen/golf">Volkswagen Golf</a></li>
  92.                             <li><a href="/osobni-vozidla/volkswagen/caddy">Volkswagen Caddy</a></li>
  93.                         </ul>
  94.                     </div>
  95.                     <div class="models__col">
  96.                         <h3 class="models__brand">Ford</h3>
  97.                         <ul class="models__list">
  98.                             <li><a href="/osobni-vozidla/ford/s-max">Ford S-MAX</a></li>
  99.                             <li><a href="/osobni-vozidla/ford/kuga">Ford Kuga</a></li>
  100.                             <li><a href="/osobni-vozidla/ford/mondeo">Ford Mondeo</a></li>
  101.                             <li><a href="/osobni-vozidla/ford/focus">Ford Focus</a></li>
  102.                             <li><a href="/osobni-vozidla/ford/ranger">Ford Ranger</a></li>
  103.                         </ul>
  104.                     </div>
  105.                     <div class="models__col">
  106.                         <h3 class="models__brand">Další</h3>
  107.                         <ul class="models__list">
  108.                             <li><a href="/osobni-vozidla/audi/a6">Audi A6</a></li>
  109.                             <li><a href="/osobni-vozidla/dacia/duster">Dacia Duster</a></li>
  110.                             <li><a href="/osobni-vozidla/audi/a4">Audi A4</a></li>
  111.                             <li><a href="/osobni-vozidla/hyundai/tucson">Hyundai Tucson</a></li>
  112.                             <li><a href="/osobni-vozidla/bmw/x5">BMW X5</a></li>
  113.                         </ul>
  114.                     </div>
  115.                 </div>
  116.             </section>
  118.             <h2 class="section-title">Testy a recenze</h2>
  119.             {% for b in blogsTests %}
  120.                 {% if loop.first %}
  121.                     {% include 'blog/_blogBig.html.twig' with { b: b } %}
  122.                     <div id="adform_squarem"></div>
  123.                 {% else %}
  124.                     {% include 'blog/_blog.html.twig' with { b: b } %}
  125.                 {% endif %}
  126.             {% endfor %}
  127.             <div id="banner-mobile-container" class="banner-mobile" data-autanet-partner-banner-placement="B01"></div>
  128.             <div class="grid__buttons grid__buttons--left">
  129.                 <a class="button" href="{{ path('page_blog', { urlKind: 'testy-aut' }) }}">
  130.                     Zobrazit všechny testy a recenze
  131.                     <i class="icon icon-arrow-right"></i>
  132.                 </a>
  133.             </div>
  135.             <h2 class="section-title">Nejnovější články</h2>
  136.             {% for b in blogsLatest %}
  137.                 {% include 'blog/_blog.html.twig' with { b: b } %}
  138.             {% endfor %}
  139.             <div class="grid__buttons grid__buttons--left">
  140.                 <a class="button" href="{{ path('page_blog', { urlKind: 'vsechny-clanky' }) }}">
  141.                     Zobrazit všechny články
  142.                     <i class="icon icon-arrow-right"></i>
  143.                 </a>
  144.             </div>
  146.         </div>
  147.         <div>
  148.             <div id="adform_halfpage"></div>
  149.             <div id="banner-container" class="banner" data-autanet-partner-banner-placement="B01"></div>
  150.             {{ render(controller( 'App\\Controller\\BlogController::top' )) }}
  151.         </div>
  152.     </section>
  154.     <script>
  155.         (function () {
  156.             const items = document.querySelectorAll(
  157.                 '[data-recommended-placement="R01"][data-recommended-vehicle-id][data-autanet-partner-id]'
  158.             );
  160.             if (
  161.                 !items.length
  162.                 || !window.AutanetAnalytics
  163.                 || typeof window.AutanetAnalytics.withIdentity !== 'function'
  164.             ) {
  165.                 return;
  166.             }
  168.             function sendRecommendedEvent(item, eventType) {
  169.                 const vehicleId = item.dataset.recommendedVehicleId;
  170.                 const partnerId = item.dataset.autanetPartnerId;
  172.                 if (!vehicleId || !partnerId) {
  173.                     return;
  174.                 }
  176.                 window.AutanetAnalytics.withIdentity(function (identity) {
  177.                     if (!identity) {
  178.                         return;
  179.                     }
  181.                     const formData = new FormData();
  182.                     formData.append('event_type', eventType);
  183.                     formData.append('vehicle_id', vehicleId);
  184.                     formData.append('partner_id', partnerId);
  185.                     formData.append('placement', 'R01');
  186.                     formData.append(
  187.                         'device',
  188.                         window.matchMedia('(max-width: 766px)').matches
  189.                             ? 'mobile'
  190.                             : 'desktop'
  191.                     );
  192.                     formData.append('visitor_key', identity.visitorKey);
  193.                     formData.append('session_key', identity.sessionKey);
  194.                     formData.append('pageview_key', identity.pageviewKey);
  196.                     fetch('{{ path('app_analytics_event') }}', {
  197.                         method: 'POST',
  198.                         body: formData,
  199.                         keepalive: true
  200.                     }).catch(function () {
  201.                     });
  202.                 }, 5000);
  203.             }
  205.             items.forEach(function (item) {
  206.                 item.addEventListener('click', function () {
  207.                     sendRecommendedEvent(item, 'recommended_vehicle_click');
  208.                 });
  209.             });
  211.             if (typeof window.IntersectionObserver !== 'function') {
  212.                 return;
  213.             }
  215.             const impressionTimers = new Map();
  216.             const trackedVehicleIds = new Set();
  218.             function clearImpressionTimer(vehicleId) {
  219.                 const timer = impressionTimers.get(vehicleId);
  221.                 if (timer) {
  222.                     clearTimeout(timer);
  223.                     impressionTimers.delete(vehicleId);
  224.                 }
  225.             }
  227.             const observer = new IntersectionObserver(function (entries) {
  228.                 entries.forEach(function (entry) {
  229.                     const item = entry.target;
  230.                     const vehicleId = item.dataset.recommendedVehicleId;
  232.                     if (!vehicleId || trackedVehicleIds.has(vehicleId)) {
  233.                         return;
  234.                     }
  236.                     if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
  237.                         if (impressionTimers.has(vehicleId)) {
  238.                             return;
  239.                         }
  241.                         const timer = setTimeout(function () {
  242.                             impressionTimers.delete(vehicleId);
  244.                             if (trackedVehicleIds.has(vehicleId)) {
  245.                                 return;
  246.                             }
  248.                             trackedVehicleIds.add(vehicleId);
  249.                             sendRecommendedEvent(item, 'recommended_vehicle_impression');
  250.                         }, 1000);
  252.                         impressionTimers.set(vehicleId, timer);
  253.                         return;
  254.                     }
  256.                     clearImpressionTimer(vehicleId);
  257.                 });
  258.             }, {
  259.                 threshold: [0, 0.5, 1]
  260.             });
  262.             items.forEach(function (item) {
  263.                 observer.observe(item);
  264.             });
  265.         })();
  266.     </script>
  268.     <script>
  269.         (function () {
  270.             const slider = document.getElementById('partners-slider');
  271.             if (!slider) return;
  273.             const ids = new Set();
  274.             slider.querySelectorAll('[data-partner-id]').forEach(function (item) {
  275.                 ids.add(item.dataset.partnerId);
  276.             });
  277.             if (!ids.size) return;
  278.             const data = new FormData();
  279.             ids.forEach(function (id) {
  280.                 data.append('ids[]', id);
  281.             });
  282.             fetch('{{ path('app_partner_track_views') }}', {method: 'POST', body: data}).catch(function () {
  283.             });
  285.             slider.addEventListener('click', function (e) {
  286.                 const item = e.target.closest('[data-partner-id]');
  287.                 if (!item) return;
  289.                 navigator.sendBeacon('/partner/' + item.dataset.partnerId + '/click');
  291.                 const autanetPartnerId = item.dataset.autanetPartnerId;
  293.                 if (
  294.                     !autanetPartnerId
  295.                     || !window.AutanetAnalytics
  296.                     || typeof window.AutanetAnalytics.withIdentity !== 'function'
  297.                 ) {
  298.                     return;
  299.                 }
  301.                 window.AutanetAnalytics.withIdentity(function (identity) {
  302.                     if (!identity) {
  303.                         return;
  304.                     }
  306.                     const formData = new FormData();
  307.                     formData.append('event_type', 'logo_click');
  308.                     formData.append('partner_id', autanetPartnerId);
  309.                     formData.append(
  310.                         'device',
  311.                         window.matchMedia('(max-width: 766px)').matches
  312.                             ? 'mobile'
  313.                             : 'desktop'
  314.                     );
  315.                     formData.append('visitor_key', identity.visitorKey);
  316.                     formData.append('session_key', identity.sessionKey);
  317.                     formData.append('pageview_key', identity.pageviewKey);
  319.                     fetch('{{ path('app_analytics_event') }}', {
  320.                         method: 'POST',
  321.                         body: formData,
  322.                         keepalive: true
  323.                     }).catch(function () {
  324.                     });
  325.                 }, 5000);
  326.             });
  328.             if (
  329.                 !window.AutanetAnalytics
  330.                 || typeof window.AutanetAnalytics.withIdentity !== 'function'
  331.                 || typeof window.IntersectionObserver !== 'function'
  332.             ) {
  333.                 return;
  334.             }
  336.             const impressionTimers = new Map();
  337.             const trackedPartnerIds = new Set();
  339.             function clearImpressionTimer(partnerId) {
  340.                 const timer = impressionTimers.get(partnerId);
  342.                 if (timer) {
  343.                     clearTimeout(timer);
  344.                     impressionTimers.delete(partnerId);
  345.                 }
  346.             }
  348.             function trackLogoImpression(item) {
  349.                 const partnerId = item.dataset.autanetPartnerId;
  351.                 if (!partnerId || trackedPartnerIds.has(partnerId)) {
  352.                     return;
  353.                 }
  355.                 window.AutanetAnalytics.withIdentity(function (identity) {
  356.                     if (!identity || trackedPartnerIds.has(partnerId)) {
  357.                         return;
  358.                     }
  360.                     trackedPartnerIds.add(partnerId);
  362.                     const formData = new FormData();
  363.                     formData.append('event_type', 'logo_impression');
  364.                     formData.append('partner_id', partnerId);
  365.                     formData.append(
  366.                         'device',
  367.                         window.matchMedia('(max-width: 766px)').matches
  368.                             ? 'mobile'
  369.                             : 'desktop'
  370.                     );
  371.                     formData.append('visitor_key', identity.visitorKey);
  372.                     formData.append('session_key', identity.sessionKey);
  373.                     formData.append('pageview_key', identity.pageviewKey);
  375.                     fetch('{{ path('app_analytics_event') }}', {
  376.                         method: 'POST',
  377.                         body: formData,
  378.                         keepalive: true
  379.                     }).catch(function () {
  380.                     });
  381.                 }, 5000);
  382.             }
  384.             const observer = new IntersectionObserver(function (entries) {
  385.                 entries.forEach(function (entry) {
  386.                     const item = entry.target;
  387.                     const partnerId = item.dataset.autanetPartnerId;
  389.                     if (!partnerId || trackedPartnerIds.has(partnerId)) {
  390.                         return;
  391.                     }
  393.                     if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
  394.                         if (impressionTimers.has(partnerId)) {
  395.                             return;
  396.                         }
  398.                         const timer = setTimeout(function () {
  399.                             impressionTimers.delete(partnerId);
  400.                             trackLogoImpression(item);
  401.                         }, 1000);
  403.                         impressionTimers.set(partnerId, timer);
  404.                         return;
  405.                     }
  407.                     clearImpressionTimer(partnerId);
  408.                 });
  409.             }, {
  410.                 threshold: [0, 0.5, 1]
  411.             });
  413.             slider.querySelectorAll('[data-autanet-partner-id]').forEach(function (item) {
  414.                 observer.observe(item);
  415.             });
  416.         })();
  417.     </script>
  419. {% endblock %}