templates/homepage/search.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}
  4.     {% if  activeManufacturer %}{{ activeManufacturer.name }} {% if activeModel %}{{ activeModel.name }} {% endif %}{% else %}{% if activeKind and activeKind.url == 'osobni-vozidla' or activeKind and activeKind.url == 'uzitkova-vozidla' or  activeKind and activeKind.url == 'nakladni-vozidla' or  activeKind and activeKind.url == 'obytna-vozidla' %}{{ activeKind.name|trans }} vozidla {% elseif(activeKind) %} {{ activeKind.name }} {% elseif(app.request.get('urlKind') ==  'nahradni-dily') %} Náhradní díly {% elseif(app.request.get('urlKind') ==  'prislusenstvi') %} Příslušenství {% endif %}  {% endif %} na prodej | Autanet.cz
  5. {% endblock %}
  7. {% block desc %}
  9.     {% if  activeManufacturer %}
  10.         Aktuální nabídka osobních vozidel  {{ activeManufacturer.name }} {% if activeModel %} {{ activeModel.name }}   {% endif %}  na prodej z autobazarů a autosalonů. Na prodej nová, předváděcí a ojetá auta všech značek.
  11.     {% else %}
  12.         {% if app.request.get('urlKind') == 'osobni-vozidla' %}
  13.             Aktuální nabídka osobních vozidel z autobazarů a autosalonů. Na prodej nová, předváděcí a ojetá auta všech značek.
  14.         {% elseif(app.request.get('urlKind') == 'uzitkova-vozidla') %}
  15.             Aktuální nabídka užitkových vozidel z autobazarů a autosalonů. Na prodej nová a ojetá vozidla značek Volkswagen, Ford, Fiat, Citroën a dalších.
  16.         {% elseif(app.request.get('urlKind') ==  'nakladni-vozidla') %}
  17.             Aktuální nabídka nákladních vozidel z autobazarů a autosalonů. Na prodej nová a ojetá vozidla všech značek.
  18.         {% elseif(app.request.get('urlKind') ==  'obytna-vozidla') %}
  19.             Aktuální nabídka obytných vozidel z autobazarů a autosalonů. Na prodej nová a ojetá vozidla značek Adria, Fiat, Volkswagen a dalších.
  20.         {% elseif(app.request.get('urlKind') ==  'motorky') %}
  21.             Aktuální nabídka motorek, čtyřkolek a skútrů z autobazarů a autosalonů. Na prodej motorky značek Honda, Ymaha, BMW, Can-Am a dalších.
  22.         {% elseif(app.request.get('urlKind') ==  'privesy-a-navesy') %}
  23.             Nabídka přívěsů a návěsů na prodej z autobazarů v inzerci na inzertním portálu Autanet.cz.
  24.         {% elseif(app.request.get('urlKind') ==  'autobusy') %}
  25.             Nabídka pracovních strojů na prodej z autobazarů v inzerci na inzertním portálu Autanet.cz.
  26.         {% elseif(app.request.get('urlKind') ==  'pracovni-stroje') %}
  27.             Nabídka autobusů na prodej z autobazarů v inzerci na inzertním portálu Autanet.cz.
  28.         {% elseif(app.request.get('urlKind') ==  'nahradni-dily') %}
  29.             Nabídka náhradních dílů na prodej z autobazarů v inzerci na inzertním portálu Autanet.cz.
  30.         {% elseif(app.request.get('urlKind') ==  'prislusenstvi') %}
  31.             Nabídka příslušenství na prodej z autobazarů v inzerci na inzertním portálu Autanet.cz.
  32.         {% endif %}
  33.     {% endif %}
  34. {% endblock %}
  36. {% block body %}
  37.     
  38.     {#
  39.     <section class="info">
  40.         <a class="info__item" href="">
  41.             <i class="icon icon-heart"></i>
  42.             Oblíbené inzeráty
  43.             <div class="info__number">0</div>
  44.         </a>
  45.         <a class="info__item" href="">
  46.             <i class="icon icon-search"></i>
  47.             Naposledy hledané
  48.             <div class="info__number">26</div>
  49.         </a>
  50.     </section>
  51.     #}
  53.     <form id="form-search" class="form form--mobile-sticky">
  55.         <div class="form__hidden-mobile">
  56.             <button class="form__toggler-mobile js-form__show-filter-desktop button" type="button">
  57.                 <span class="form__toggler-mobile-more">Zobrazit filtr</span>
  58.                 <span class="form__toggler-mobile-less">Skrýt filtr</span>
  59.                 <i class="icon icon-chevron-down"></i>
  60.             </button>
  61.         </div>
  63.         <div class="form__hidden-desktop">
  64.             <button class="form__toggler-mobile js-form__toggler-mobile button" type="button">
  65.                 <span class="form__toggler-mobile-more">Zobrazit filtr</span>
  66.                 <span class="form__toggler-mobile-less">Skrýt filtr</span>
  67.                 <i class="icon icon-chevron-down"></i>
  68.             </button>
  69.         </div>
  71.         <div class="form__collapse-mobile js-form__collapse-mobile" style="display: none;">
  72.             <div class="form__checkboxes">
  74.                 {% for c in categories %}
  77.                     {% if loop.index == 3 %}
  78.                         <div class="form__check-radio form__check-radio--strong">
  79.                             <input type="checkbox" id="condition-2" name="condition[]" value="2"
  80.                                     {% if app.request.get('condition') and 2 in  app.request.get('condition')  or not app.request.get('condition') and   not  app.request.get('category') %}   checked   {% endif %} >
  81.                             <label for="condition-2">Předváděcí</label>
  82.                         </div>
  83.                     {% endif %}
  86.                     {% if  c.name != 'Náhradní díl' and c.name != 'Příslušenství' %}
  87.                         <div class="form__check-radio form__check-radio--strong">
  88.                             <input type="checkbox" id="cat-{{ c.id }}" name="category[]" value="{{ c.id }}"
  89.                                     {% if app.request.get('category') and  c.id in  app.request.get('category')  or (not app.request.get('condition') and not  app.request.get('category')) %}   checked    {% endif %} >
  90.                             <label for="cat-{{ c.id }}">{{ c.name }}  </label>
  91.                         </div>
  92.                     {% endif %}
  96.                 {% endfor %}
  98.                 <div class="form__check-radio form__check-radio--strong">
  99.                     <input type="checkbox" id="condition-14" name="condition[]" value="14"
  100.                             {% if app.request.get('condition') and  14 in  app.request.get('condition')  == 14 or  not app.request.get('condition') and  not  app.request.get('category') %}   checked   {% endif %} >
  101.                     <label for="condition-14">Havarované</label>
  102.                 </div>
  103.             </div>
  106.             <div class="form__columns form__columns--3">
  107.                 <fieldset>
  110.                     <div class="form__group">
  111.                         <label>Značka</label>
  112.                         <!-- if you need a search input in select 2 use class .js-select2-search -->
  113.                         <select id="manufacturer" class="js-select2" name="manufacturer">
  114.                             <option value="">Nezadáno</option>
  115.                             {% for m in manufacturers %}
  116.                                 <option value="{{ m.url }}" {% if activeManufacturer and m.id == activeManufacturer.id %}  selected  {% endif %} >{{ m.name }}</option>
  117.                             {% endfor %}
  118.                         </select>
  119.                     </div>
  120.                     <div class="form__group">
  121.                         <label>Model</label>
  122.                         <select class="js-select2" name="model">
  123.                             <option value="">Nezadáno</option>
  124.                             {% for m in models %}
  125.                                 <option value="{{ m.url }}" {% if activeModel and  m.id == activeModel.id %}  selected  {% endif %} >{{ m.name }}</option>
  126.                             {% endfor %}
  127.                         </select>
  128.                     </div>
  130.                     <script>
  131.                         const modelSelect = document.querySelector('select[name="model"]')
  132.                     
  133.                         $('#manufacturer').on("select2:select", function (e) {
  134.                     
  135.                             fetch('/api/vehicle-models?vehicles.visible=true&vehicles.manufacturer.url=' + e.target.value, {
  136.                                 method: 'GET',
  137.                                 headers: {
  138.                                     'Accept': 'application/json',
  139.                                 },
  140.                             })
  141.                                 .then(response => response.json())
  142.                                 .then(
  143.                                     function (response) {
  144.                                         //add to select values
  145.                                         modelSelect.innerHTML = '<option value="">Model</option>'
  146.                                         response.forEach(function (item) {
  147.                                             modelSelect.innerHTML += '<option value="' + item.url + '">' + item.name + '</option>'
  148.                                         })
  149.                                     })
  150.                         });
  151.                     </script>
  153.                     {#
  154.                     <div class="form__controls">
  155.                         <button class="button form__plus">
  156.                             Přidat značku
  157.                         </button>
  158.                     </div>
  159.                     #}
  160.                 </fieldset>
  161.                 <fieldset>
  162.                     <div class="form__row">
  163.                         <div class="form__group">
  164.                             <label>Rok od</label>
  165.                             <select class="js-select2" name="yearFrom">
  166.                                 <option value="">Nezadáno</option>
  167.                                 {% for i in ("now"|date("Y"))..1990 %}
  168.                                     <option value="{{ i }}" {% if i == app.request.get('yearFrom') %}  selected  {% endif %} >{{ i }}</option>
  169.                                 {% endfor %}
  170.                                 <option value="1980" {% if 1980 == app.request.get('yearFrom') %}  selected  {% endif %} >
  171.                                     1980
  172.                                 </option>
  173.                                 <option value="1970" {% if 1970 == app.request.get('yearFrom') %}  selected  {% endif %} >
  174.                                     1970
  175.                                 </option>
  176.                                 <option value="1930" {% if 1930 == app.request.get('yearFrom') %}  selected  {% endif %} >
  177.                                     1930
  178.                                 </option>
  179.                             </select>
  180.                         </div>
  181.                         <div class="form__group">
  182.                             <label>Rok do</label>
  183.                             <select class="js-select2" name="yearTo">
  184.                                 <option value="">Nezadáno</option>
  185.                                 {% for i in ("now"|date("Y"))..1990 %}
  186.                                     <option value="{{ i }}" {% if i == app.request.get('yearTo') %}  selected  {% endif %} >{{ i }}</option>
  187.                                 {% endfor %}
  188.                                 <option value="1980" {% if 1980 == app.request.get('yearTo') %}  selected  {% endif %} >
  189.                                     1980
  190.                                 </option>
  191.                                 <option value="1970" {% if 1970 == app.request.get('yearTo') %}  selected  {% endif %} >
  192.                                     1970
  193.                                 </option>
  194.                                 <option value="1930" {% if 1930 == app.request.get('yearTo') %}  selected  {% endif %} >
  195.                                     1930
  196.                                 </option>
  197.                             </select>
  198.                         </div>
  199.                     </div>
  200.                     <div class="form__row">
  201.                         <div class="form__group">
  202.                             <label>Cena od</label>
  203.                             <select class="js-select2" name="priceFrom">
  204.                                 <option value="">Nezadáno</option>
  205.                                 <option value="25000" {% if "25000" == app.request.get('priceFrom') %}  selected  {% endif %} >
  206.                                     25 000
  207.                                 </option>
  208.                                 <option value="50000" {% if "50000" == app.request.get('priceFrom') %}  selected  {% endif %} >
  209.                                     50 000
  210.                                 </option>
  211.                                 <option value="75000" {% if "75000" == app.request.get('priceFrom') %} selected {% endif %}>
  212.                                     75 000
  213.                                 </option>
  214.                                 <option value="100000" {% if "100000" == app.request.get('priceFrom') %} selected {% endif %}>
  215.                                     100 000
  216.                                 </option>
  217.                                 <option value="125000" {% if "125000" == app.request.get('priceFrom') %} selected {% endif %}>
  218.                                     125 000
  219.                                 </option>
  220.                                 <option value="150000" {% if "150000" == app.request.get('priceFrom') %} selected {% endif %}>
  221.                                     150 000
  222.                                 </option>
  223.                                 <option value="175000" {% if "175000" == app.request.get('priceFrom') %} selected {% endif %}>
  224.                                     175 000
  225.                                 </option>
  226.                                 <option value="200000" {% if "200000" == app.request.get('priceFrom') %} selected {% endif %}>
  227.                                     200 000
  228.                                 </option>
  229.                                 <option value="225000" {% if "225000" == app.request.get('priceFrom') %} selected {% endif %}>
  230.                                     225 000
  231.                                 </option>
  232.                                 <option value="250000" {% if "250000" == app.request.get('priceFrom') %} selected {% endif %}>
  233.                                     250 000
  234.                                 </option>
  235.                                 <option value="275000" {% if "275000" == app.request.get('priceFrom') %} selected {% endif %}>
  236.                                     275 000
  237.                                 </option>
  238.                                 <option value="300000" {% if "300000" == app.request.get('priceFrom') %} selected {% endif %}>
  239.                                     300 000
  240.                                 </option>
  241.                                 <option value="325000" {% if "325000" == app.request.get('priceFrom') %} selected {% endif %}>
  242.                                     325 000
  243.                                 </option>
  244.                                 <option value="350000" {% if "350000" == app.request.get('priceFrom') %} selected {% endif %}>
  245.                                     350 000
  246.                                 </option>
  247.                                 <option value="375000" {% if "375000" == app.request.get('priceFrom') %} selected {% endif %}>
  248.                                     375 000
  249.                                 </option>
  250.                                 <option value="400000" {% if "400000" == app.request.get('priceFrom') %} selected {% endif %}>
  251.                                     400 000
  252.                                 </option>
  253.                                 <option value="500000" {% if "500000" == app.request.get('priceFrom') %} selected {% endif %}>
  254.                                     500 000
  255.                                 </option>
  256.                                 <option value="600000" {% if "600000" == app.request.get('priceFrom') %} selected {% endif %}>
  257.                                     600 000
  258.                                 </option>
  259.                                 <option value="700000" {% if "700000" == app.request.get('priceFrom') %} selected {% endif %}>
  260.                                     700 000
  261.                                 </option>
  262.                                 <option value="800000" {% if "800000" == app.request.get('priceFrom') %} selected {% endif %}>
  263.                                     800 000
  264.                                 </option>
  265.                                 <option value="900000" {% if "900000" == app.request.get('priceFrom') %} selected {% endif %}>
  266.                                     900 000
  267.                                 </option>
  268.                                 <option value="1000000" {% if "1000000" == app.request.get('priceFrom') %} selected {% endif %}>
  269.                                     1 mil
  270.                                 </option>
  271.                                 <option value="1250000" {% if "1250000" == app.request.get('priceFrom') %} selected {% endif %}>
  272.                                     1.25 mil
  273.                                 </option>
  274.                                 <option value="1500000" {% if "1500000" == app.request.get('priceFrom') %} selected {% endif %}>
  275.                                     1.5 mil
  276.                                 </option>
  277.                                 <option value="2000000" {% if "2000000" == app.request.get('priceFrom') %} selected {% endif %}>
  278.                                     2 mil
  279.                                 </option>
  280.                                 <option value="5000000" {% if "5000000" == app.request.get('priceFrom') %} selected {% endif %}>
  281.                                     5 mil
  282.                                 </option>
  283.                             </select>
  284.                         </div>
  285.                         <div class="form__group">
  286.                             <label>Cena do</label>
  287.                             <select class="js-select2" name="priceTo">
  288.                                 <option value="">Nezadáno</option>
  289.                                 <option value="25000" {% if "25000" == app.request.get('priceTo') %}  selected  {% endif %} >
  290.                                     25 000
  291.                                 </option>
  292.                                 <option value="50000" {% if "50000" == app.request.get('priceTo') %}  selected  {% endif %} >
  293.                                     50 000
  294.                                 </option>
  295.                                 <option value="75000" {% if "75000" == app.request.get('priceTo') %} selected {% endif %}>
  296.                                     75 000
  297.                                 </option>
  298.                                 <option value="100000" {% if "100000" == app.request.get('priceTo') %} selected {% endif %}>
  299.                                     100 000
  300.                                 </option>
  301.                                 <option value="125000" {% if "125000" == app.request.get('priceTo') %} selected {% endif %}>
  302.                                     125 000
  303.                                 </option>
  304.                                 <option value="150000" {% if "150000" == app.request.get('priceTo') %} selected {% endif %}>
  305.                                     150 000
  306.                                 </option>
  307.                                 <option value="175000" {% if "175000" == app.request.get('priceTo') %} selected {% endif %}>
  308.                                     175 000
  309.                                 </option>
  310.                                 <option value="200000" {% if "200000" == app.request.get('priceTo') %} selected {% endif %}>
  311.                                     200 000
  312.                                 </option>
  313.                                 <option value="225000" {% if "225000" == app.request.get('priceTo') %} selected {% endif %}>
  314.                                     225 000
  315.                                 </option>
  316.                                 <option value="250000" {% if "250000" == app.request.get('priceTo') %} selected {% endif %}>
  317.                                     250 000
  318.                                 </option>
  319.                                 <option value="275000" {% if "275000" == app.request.get('priceTo') %} selected {% endif %}>
  320.                                     275 000
  321.                                 </option>
  322.                                 <option value="300000" {% if "300000" == app.request.get('priceTo') %} selected {% endif %}>
  323.                                     300 000
  324.                                 </option>
  325.                                 <option value="325000" {% if "325000" == app.request.get('priceTo') %} selected {% endif %}>
  326.                                     325 000
  327.                                 </option>
  328.                                 <option value="350000" {% if "350000" == app.request.get('priceTo') %} selected {% endif %}>
  329.                                     350 000
  330.                                 </option>
  331.                                 <option value="375000" {% if "375000" == app.request.get('priceTo') %} selected {% endif %}>
  332.                                     375 000
  333.                                 </option>
  334.                                 <option value="400000" {% if "400000" == app.request.get('priceTo') %} selected {% endif %}>
  335.                                     400 000
  336.                                 </option>
  337.                                 <option value="500000" {% if "500000" == app.request.get('priceTo') %} selected {% endif %}>
  338.                                     500 000
  339.                                 </option>
  340.                                 <option value="600000" {% if "600000" == app.request.get('priceTo') %} selected {% endif %}>
  341.                                     600 000
  342.                                 </option>
  343.                                 <option value="700000" {% if "700000" == app.request.get('priceTo') %} selected {% endif %}>
  344.                                     700 000
  345.                                 </option>
  346.                                 <option value="800000" {% if "800000" == app.request.get('priceTo') %} selected {% endif %}>
  347.                                     800 000
  348.                                 </option>
  349.                                 <option value="900000" {% if "900000" == app.request.get('priceTo') %} selected {% endif %}>
  350.                                     900 000
  351.                                 </option>
  352.                                 <option value="1000000" {% if "1000000" == app.request.get('priceTo') %} selected {% endif %}>
  353.                                     1 mil
  354.                                 </option>
  355.                                 <option value="1250000" {% if "1250000" == app.request.get('priceTo') %} selected {% endif %}>
  356.                                     1.25 mil
  357.                                 </option>
  358.                                 <option value="1500000" {% if "1500000" == app.request.get('priceTo') %} selected {% endif %}>
  359.                                     1.5 mil
  360.                                 </option>
  361.                                 <option value="2000000" {% if "2000000" == app.request.get('priceTo') %} selected {% endif %}>
  362.                                     2 mil
  363.                                 </option>
  364.                                 <option value="5000000" {% if "5000000" == app.request.get('priceTo') %} selected {% endif %}>
  365.                                     5 mil
  366.                                 </option>
  367.                             </select>
  368.                         </div>
  369.                     </div>
  371.                     {% if  app.request.get('urlKind') != 'privesy-a-navesy' and app.request.get('urlKind') != 'nahradni-dily' and app.request.get('urlKind') != 'prislusenstvi' %}
  373.                         <div class="form__group">
  375.                             <label>Stav tachometru</label>
  376.                             <select class="js-select2" name="millage">
  377.                                 <option value="">Nezadáno</option>
  378.                                 {% for k,  mv in mileageValues %}
  379.                                     <option value="{{ k }}" {% if k == app.request.get('millage') %} selected {% endif %}>{{ mv }}</option>
  380.                                 {% endfor %}
  381.                             </select>
  383.                         </div>
  384.                         <div class="form__group">
  385.                             <label>Karoserie</label>
  386.                             <select class="js-select2" name="body">
  387.                                 <option value="">Nezadáno</option>
  388.                                 {% for b in bodies %}
  389.                                     <option value="{{ b.id }}" {% if b.id == app.request.get('body') %}  selected  {% endif %} >{{ b.name }}</option>
  390.                                 {% endfor %}
  391.                             </select>
  392.                         </div>
  394.                     {% endif %}
  395.                 </fieldset>
  396.                 <fieldset>
  399.                     {% if  app.request.get('urlKind') != 'privesy-a-navesy' and app.request.get('urlKind') != 'nahradni-dily' and app.request.get('urlKind') != 'prislusenstvi' %}
  400.                         <div class="form__group">
  401.                             <label>Palivo</label>
  402.                             <select class="js-select2" name="fuel">
  403.                                 <option value="">Nezadáno</option>
  404.                                 {% for f in fuels %}
  405.                                     <option value="{{ f.id }}" {% if f.id == app.request.get('fuel') %}  selected  {% endif %} >{{ f.name }}</option>
  406.                                 {% endfor %}
  407.                             </select>
  408.                         </div>
  409.                         <div class="form__group">
  410.                             <label>Převodovka</label>
  411.                             <select class="js-select2" name="gearbox">
  412.                                 <option value="">Nezadáno</option>
  413.                                 {% for g in gearbox %}
  414.                                     <option value="{{ g }}" {% if g  == app.request.get('gearbox') %}  selected  {% endif %} >{{ g }}</option>
  415.                                 {% endfor %}
  416.                             </select>
  417.                         </div>
  418.                         <div class="form__group">
  419.                             <label>Výkon</label>
  420.                             <select class="js-select2" name="engine_power">
  421.                                 <option value="">Nezadáno</option>
  422.                                 {% for k,  mv in powerValues %}
  423.                                     <option value="{{ k }}" {% if k == app.request.get('engine_power') %} selected {% endif %}>{{ mv }}</option>
  424.                                 {% endfor %}
  425.                             </select>
  426.                         </div>
  427.                     {% endif %}
  429.                     {% if  app.request.get('urlKind') == 'prislusenstvi' or app.request.get('urlKind') == 'nahradni-dily' %}
  431.                         <div class="form__group">
  432.                             <label>Kategorie</label>
  433.                             <select class="js-select2" name="partKind">
  434.                                 <option value="">Nezadáno</option>
  435.                                 {% for pk in vehiclePartKindValues %}
  436.                                     <option value="{{ pk.id }}" {% if  pk.id  == app.request.get('partKind') %}  selected  {% endif %} >{{ pk.name }}</option>
  437.                                 {% endfor %}
  438.                             </select>
  439.                         </div>
  440.                     {% endif %}
  442.                     <div class="form__group">
  443.                         <label>Kraj / okres</label>
  444.                         <select class="js-select2" name="place">
  445.                             <option value="">Nezadáno</option>
  446.                             {% for p in selectPlaceValues %}
  447.                                 <option value="{{ p.url }}" {% if  p.url  == app.request.get('place') %}  selected  {% endif %} >{{ p.name }}</option>
  448.                             {% endfor %}
  449.                         </select>
  450.                     </div>
  451.                 </fieldset>
  452.             </div>
  455.             <footer class="form__footer">
  456.                 <div class="form__footer-cell"></div>
  458.                 <div class="form__footer-cell">
  459.                     <button class="form__submit" type="submit">
  460.                         Zobrazit vozidla
  461.                     </button>
  462.                 </div>
  463.             </footer>
  464.             <div class="form__sticky">
  465.                 <button class="form__submit" type="submit">
  466.                     Zobrazit vozidla
  467.                 </button>
  468.             </div>
  469.         </div>
  471.         <input type="hidden" name="order" value="{{ app.request.get('order') }}">
  472.         <input type="hidden" name="kind" value="{{ app.request.get('kind') }}">
  474.     </form>
  476.     <section class="grid grid--padding40 grid--gap20" id="order">
  477.         <div>
  478.             <div class="grid__results">
  479.                 <h2 class="grid__title">
  481.                     {% if  activeManufacturer %}
  482.                         {{ activeManufacturer.name }}
  483.                         {% if activeModel %} {{ activeModel.name }}   {% endif %}
  484.                     {% else %}
  486.                         {% if activeKind and activeKind.url == 'osobni-vozidla' or
  487.                             activeKind and activeKind.url == 'uzitkova-vozidla' or  activeKind and activeKind.url == 'nakladni-vozidla'
  488.                             or  activeKind and activeKind.url == 'obytna-vozidla' %}
  489.                             {{ activeKind.name|trans }} vozidla
  490.                         {% elseif(activeKind) %}
  491.                             {{ activeKind.name }}
  492.                         {% elseif(app.request.get('urlKind') ==  'nahradni-dily') %}
  493.                             Náhradní díly
  494.                         {% elseif(app.request.get('urlKind') ==  'prislusenstvi') %}
  495.                             Příslušenství
  496.                         {% endif %}
  498.                     {% endif %}
  500.                     na prodej</h2>
  501.                 <div class="grid__results-label">{{ vehicles.totalItemCount }} inzerátů</div>
  502.                 <form class="grid__results-form" style="min-width: 220px">
  503.                     <select id="select-order" class="js-select2" name="order">
  504.                         <option value="1" {% if app.request.get('order') == '1' %} selected {% endif %}>Nejlevnější
  505.                         </option>
  506.                         <option value="2" {% if app.request.get('order') == '2' %} selected {% endif %}>Nejdražší
  507.                         </option>
  508.                         <option value="3" {% if app.request.get('order') == '3' %} selected {% endif %}>Stav
  509.                             tachometru
  510.                         </option>
  511.                         <option value="4" {% if app.request.get('order') == '4' %} selected {% endif %}>Rok výroby
  512.                         </option>
  513.                         <option value="5" {% if app.request.get('order') == '5' %} selected {% endif %}>Nejnovější
  514.                         </option>
  515.                     </select>
  516.                 </form>
  517.             </div>
  520.             <script>
  522.                 const formSearch = document.getElementById('form-search')
  524.                 $(document).ready(function () {
  525.                     const hasActiveFilters = checkActiveFilters();
  526.                     const wasFormSubmitted = sessionStorage.getItem('formSubmitted') === 'true';
  528.                     if (!hasActiveFilters && !wasFormSubmitted) {
  529.                         $('.js-form__collapse-mobile').show();
  530.                         $('.js-form__show-filter').hide();
  531.                         $('.js-form__show-filter-desktop').show();
  533.                         $('.form__toggler-mobile-more').hide();
  534.                         $('.form__toggler-mobile-less').show();
  535.                         $('.js-form__toggler-mobile').addClass('active');
  537.                         if ($('.form__hidden-desktop').is(':visible')) {
  538.                             $('.form').addClass('fixed');
  539.                             $('body').addClass('no-scroll');
  540.                         }
  541.                     } else {
  542.                         $('.js-form__collapse-mobile').hide();
  543.                         $('.js-form__show-filter').show();
  545.                         $('.form__toggler-mobile-more').show();
  546.                         $('.form__toggler-mobile-less').hide();
  547.                         $('.js-form__toggler-mobile').removeClass('active');
  548.                     }
  550.                     if (wasFormSubmitted) {
  551.                         sessionStorage.removeItem('formSubmitted');
  552.                     }
  553.                 });
  555.                 function checkActiveFilters() {
  556.                     const pathData = window.location.pathname.split('/');
  557.                     return pathData.length > 2;
  558.                 }
  560.                 formSearch.addEventListener('submit', (e) => {
  561.                     e.preventDefault();
  562.                     const formData = new FormData(document.getElementById('form-search'))
  564.                     formData.delete('order')
  565.                     formData.append('order', e.target.value)
  567.                     let manufacturer = formData.get('manufacturer')
  568.                     let model = formData.get('model')
  570.                     formData.delete('manufacturer')
  571.                     formData.delete('model')
  573.                     const asString = new URLSearchParams(formData).toString();
  575.                     sessionStorage.setItem('formSubmitted', 'true');
  577.                     $('.js-form__collapse-mobile').slideUp();
  578.                     $('.js-form__toggler-mobile').parent().hide();
  579.                     $('.js-form__toggler-mobile').removeClass('active');
  580.                     $('.js-form__show-filter').show();
  581.                     $('.form').removeClass('fixed');
  582.                     $('body').removeClass('no-scroll');
  584.                     if (manufacturer && model) {
  585.                         window.location.href = "/{{ app.request.get('urlKind') }}/" + manufacturer + "/" + model + "/?" + asString;
  586.                     } else if (manufacturer) {
  587.                         window.location.href = "/{{ app.request.get('urlKind') }}/" + manufacturer + "/?" + asString;
  588.                     } else {
  589.                         window.location.href = "/{{ app.request.get('urlKind') }}/?" + asString;
  590.                     }
  592.                 })
  594.                 $('.js-form__show-filter-btn').click(function () {
  595.                     $('.js-form__show-filter').hide();
  596.                     $('.js-form__toggler-mobile').parent().show();
  597.                     $('.js-form__collapse-mobile').slideDown();
  598.                 });
  600.                 $('.js-form__show-filter-desktop').click(function () {
  601.                     const $btn = $(this);
  602.                     const $collapse = $('.js-form__collapse-mobile');
  604.                     if ($collapse.is(':visible')) {
  605.                         $collapse.slideUp();
  606.                         $btn.find('.form__toggler-mobile-more').show();
  607.                         $btn.find('.form__toggler-mobile-less').hide();
  608.                         $btn.removeClass('active');
  609.                     } else {
  610.                         $collapse.slideDown();
  611.                         $btn.find('.form__toggler-mobile-more').hide();
  612.                         $btn.find('.form__toggler-mobile-less').show();
  613.                         $btn.addClass('active');
  614.                     }
  615.                 });
  617.                 $('#select-order').on("select2:select", function (e) {
  618.                     const formData = new FormData(document.getElementById('form-search'))
  619.                     formData.append('order', e.target.value)
  622.                     let manufacturer = formData.get('manufacturer')
  623.                     let model = formData.get('model')
  625.                     formData.delete('manufacturer')
  626.                     formData.delete('model')
  629.                     const asString = new URLSearchParams(formData).toString();
  631.                     if (manufacturer && model) {
  632.                         window.location.href = "/{{ app.request.get('urlKind') }}/" + manufacturer + "/" + model + "/?" + asString;
  633.                     } else if (manufacturer) {
  634.                         window.location.href = "/{{ app.request.get('urlKind') }}/" + manufacturer + "/?" + asString;
  635.                     } else {
  636.                         window.location.href = "/{{ app.request.get('urlKind') }}/?" + asString;
  637.                     }
  640.                 });
  641.             </script>
  643.             {% for v in vehicles %}
  645.                 {% if loop.index == 4 %}
  646.                     <article class="pre-purchase">
  647.                         <img class="pre-purchase__image" src="{{ asset('img/pre-purchase__image.png') }}" alt="">
  648.                         <h2 class="pre-purchase__title">Kupujete ojeté auto?</h2>
  649.                         <div class="pre-purchase__text">
  650.                             <p>Prověřením historie vozu před koupí vyřešíte případné problémy po koupi.</p>
  651.                             <ul class="pre-purchase__list">
  652.                                 <li>Upravený tachometr</li>
  653.                                 <li>Problémová historie</li>
  654.                                 <li>Oprava po havárií</li>
  655.                                 <li>Nepravidelný servis</li>
  656.                             </ul>
  657.                             <a class="pre-purchase__button" href="/proverit-auto#cenik">
  658.                                 Prověřit auto
  659.                                 <i class="icon icon-arrow-right"></i>
  660.                             </a>
  661.                         </div>
  662.                     </article>
  663.                 {% endif %}
  665.                 {% include 'vehicle/_vehicle.html.twig' with {
  666.                     vehicle: v,
  667.                     analyticsContext: 'vehicle_listing',
  668.                     autanetPartnerId: activeAutanetPartners[v.dealer.id] ?? null
  669.                 } %}
  671.                 {% if loop.index == 1 %}
  672.                     <div id="banner-mobile-container" class="banner-mobile" data-autanet-partner-banner-placement="B02"></div>
  673.                 {% endif %}
  675.                 {% if loop.index == 5 %}
  676.                     <div id="adform_squarem"></div>
  677.                 {% endif %}
  679.                 {% if loop.index == 10 %}
  680.                     <div id="AdTrackGenericInterscrollerMobile"></div>
  681.                 {% endif %}
  683.                 {% if loop.index == 15 %}
  684.                     <div id="adform_squarem2"></div>
  685.                 {% endif %}
  686.             {% endfor %}
  688.             <div class="navigation">
  689.                 {{ knp_pagination_render(vehicles) }}
  690.             </div>
  692.         </div>
  693.         <div>
  694.             <div id="adform_halfpage"></div>
  695.             <br>
  696.             <div id="banner-container" class="banner" data-autanet-partner-banner-placement="B02"></div>
  697.             {{ render(controller(
  698.     'App\\Controller\\VehicleTipController::tip',
  699.     { pageContext: 'vehicle_listing' }
  700. )) }}
  701.             <div id="adform_halfpage2"></div>
  702.         </div>
  703.     </section>
  706.     <script>
  707.         document.addEventListener('DOMContentLoaded', function () {
  708.             const logos = document.querySelectorAll('[data-autanet-partner-logo-l05]');
  710.             if (!logos.length || !window.IntersectionObserver || !window.AutanetAnalytics) {
  711.                 return;
  712.             }
  714.             const visibleTimers = new Map();
  715.             const tracked = new Set();
  717.             const observer = new IntersectionObserver(function (entries) {
  718.                 entries.forEach(function (entry) {
  719.                     const logo = entry.target;
  720.                     const partnerId = logo.dataset.autanetPartnerId;
  721.                     const dealerId = logo.dataset.dealerId;
  722.                     const vehicleId = logo.dataset.vehicleId;
  723.                     const trackingKey = partnerId + ':' + vehicleId;
  725.                     if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
  726.                         if (tracked.has(trackingKey) || visibleTimers.has(logo)) {
  727.                             return;
  728.                         }
  730.                         const timer = window.setTimeout(function () {
  731.                             visibleTimers.delete(logo);
  733.                             if (tracked.has(trackingKey)) {
  734.                                 return;
  735.                             }
  737.                             tracked.add(trackingKey);
  739.                             window.AutanetAnalytics.withIdentity(function (identity) {
  740.                                 if (!identity) {
  741.                                     tracked.delete(trackingKey);
  742.                                     return;
  743.                                 }
  745.                                 const body = new URLSearchParams({
  746.                                     event_type: 'logo_impression',
  747.                                     placement: 'L05',
  748.                                     partner_id: partnerId,
  749.                                     dealer_id: dealerId,
  750.                                     vehicle_id: vehicleId,
  751.                                     device: window.matchMedia('(max-width: 767px)').matches ? 'mobile' : 'desktop',
  752.                                     visitor_key: identity.visitorKey,
  753.                                     session_key: identity.sessionKey,
  754.                                     pageview_key: identity.pageviewKey
  755.                                 });
  757.                                 fetch('{{ path('app_analytics_event') }}', {
  758.                                     method: 'POST',
  759.                                     headers: {
  760.                                         'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  761.                                     },
  762.                                     body: body.toString(),
  763.                                     keepalive: true
  764.                                 }).then(function (response) {
  765.                                     if (!response.ok) {
  766.                                         tracked.delete(trackingKey);
  767.                                     }
  768.                                 }).catch(function () {
  769.                                     tracked.delete(trackingKey);
  770.                                 });
  771.                             });
  772.                         }, 1000);
  774.                         visibleTimers.set(logo, timer);
  775.                     } else {
  776.                         const timer = visibleTimers.get(logo);
  778.                         if (timer) {
  779.                             window.clearTimeout(timer);
  780.                             visibleTimers.delete(logo);
  781.                         }
  782.                     }
  783.                 });
  784.             }, {
  785.                 threshold: [0.5]
  786.             });
  788.             logos.forEach(function (logo) {
  789.                 observer.observe(logo);
  790.             });
  791.         });
  792.     </script>
  796.     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  798.     <script>
  801.         $(".js-select2").select2({
  802.             language: "cs",
  803.             minimumResultsForSearch: -1,
  804.             width: "100%",
  805.         });
  806.     </script>
  811. {% endblock %}