templates/homepage/detailDealer.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ seoTitle }}{% endblock %}
  5. {% block desc %}{{ seoDescription }}{% endblock %}
  7.         {% block stylesheets %}
  8.             {{ encore_entry_link_tags('app') }}
  9.            {% endblock %}
  10.           {% block javascripts %}
  11.               {{ encore_entry_script_tags('app') }}
  12.               <script
  13.                       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMvCFLEp2JWA1HQ5riIBgtCn8Hy5bS9nw&callback=initMap&v=weekly"
  14.                       defer
  15.               ></script>
  16.               <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  17.               <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
  19.           {% endblock %}
  21. {% block body %}
  24.     <section class="contact">
  25.         <header class="contact__header">
  26.             <h1>{{ dealer.name }}</h1>
  27.             <figure class="contact__logo">
  28.                 {% if dealer.logo %}
  29.                 <img
  30.                         src="{{ asset('img-dealer/')~dealer.logo }}"
  31.                         {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  32.                             src: asset('img-dealer/')~dealer.logo
  33.                         }) }}
  34.                         width="200"
  35.                 >
  36.                 {% endif %}
  37.             </figure>
  38.         </header>
  40.         {% if dealer.description %}
  41.         <div class="contact__description">
  42.             <p>{{ dealer.description }}</p>
  43.         </div>
  44.         {% endif %}
  46.         <div class="contact__grid">
  47.             <div>
  48.                 <h2 class="contact__heading">Adresa</h2>
  49.                 <div class="contact__item">
  50.                     <i class="contact__icon icon icon-garage"></i>
  51.                     <div>
  52.                         {% if dealer.street %}{{ dealer.street }}<br>{% endif %}
  53.                         {% if dealer.city %}{{ dealer.city }}<br>{% endif %}
  54.                         {% if dealer.district %}{{ dealer.district.region.name }}{% endif %}
  55.                     </div>
  56.                 </div>
  57.             </div>
  58.             <div>
  59.                 <h2 class="contact__heading">Telefon</h2>
  60.                 <div class="contact__item">
  61.                     <i class="contact__icon icon icon-phone"></i>
  62.                     {% for p in dealer.dealerPhones %}
  63.                     <a href="">{{ p.name }}</a><br>
  64.                     {% endfor %}
  65.                 </div>
  66.             </div>
  67.             <div>
  68.                 <h2 class="contact__heading">E-mail</h2>
  69.                 {% if dealer.email %}
  70.                 <div class="contact__item contact__item--primary">
  71.                     <i class="contact__icon icon icon-email"></i>
  72.                     <a href="mailto:{{ dealer.email }}">{{ dealer.email }}</a>
  73.                 </div>
  74.                 {% endif %}
  75.             </div>
  76.         </div>
  77.         <footer id="mapa" class="contact__footer">
  78.             {% if hasVehicleImport %}
  79.             <a class="contact__button" href="{{ path('page_dealer_vehicle', { url:  dealer.url }) }}">
  80.                 <i class="icon icon-car"></i>
  81.                 Zobrazit nabídku vozidel
  82.             </a>
  83.             {% endif %}
  84.             {% if dealer.lat and dealer.lng %}
  85.             <a class="contact__button contact__button--secondary" href="https://www.google.com/maps/search/?api=1&query={{ dealer.lat }},{{ dealer.lng }}" target="_blank">
  86.                 Zobrazit trasu
  87.                 <i class="icon icon-map"></i>
  88.             </a>
  89.             {% endif %}
  90.             {% if dealer.www %}
  91.             <a class="contact__button contact__button--secondary" href="http://{{ dealer.www }}" target="_blank">
  92.                 Zobrazit web
  93.                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 64 64" fill="currentColor">
  94.                     <path d="M 40 10 C 38.896 10 38 10.896 38 12 C 38 13.104 38.896 14 40 14 L 47.171875 14 L 30.585938 30.585938 C 29.804938 31.366938 29.804938 32.633063 30.585938 33.414062 C 30.976938 33.805063 31.488 34 32 34 C 32.512 34 33.023063 33.805062 33.414062 33.414062 L 50 16.828125 L 50 24 C 50 25.104 50.896 26 52 26 C 53.104 26 54 25.104 54 24 L 54 12 C 54 10.896 53.104 10 52 10 L 40 10 z M 18 12 C 14.691 12 12 14.691 12 18 L 12 46 C 12 49.309 14.691 52 18 52 L 46 52 C 49.309 52 52 49.309 52 46 L 52 34 C 52 32.896 51.104 32 50 32 C 48.896 32 48 32.896 48 34 L 48 46 C 48 47.103 47.103 48 46 48 L 18 48 C 16.897 48 16 47.103 16 46 L 16 18 C 16 16.897 16.897 16 18 16 L 30 16 C 31.104 16 32 15.104 32 14 C 32 12.896 31.104 12 30 12 L 18 12 z"></path>
  95.                 </svg>
  96.             </a>
  97.             {% endif %}
  98.         </footer>
  99.     </section>
  102.     <section    class="grid grid--gap40 grid--padding40">
  103.         <div>
  105.                 <div id="map" style="height: 400px" > </div>
  107.                 <script>
  109.                     function initMap() {
  110.                         const map = new google.maps.Map(document.getElementById("map"), {
  111.                             zoom: 7,
  112.                             center: {lat: 49.7887636, lng: 15.6634697},
  113.                         });
  115.                         setMarkers(map);
  116.                     }
  119.                     function setMarkers(map) {
  121.                         const image = {
  122.                             url: "{{ asset('img/icon-dealer.png') }}",
  123.                             // This marker is 20 pixels wide by 32 pixels high.
  124.                             size: new google.maps.Size(40, 40),
  125.                             // The origin for this image is (0, 0).
  126.                             origin: new google.maps.Point(0, 0),
  127.                             // The anchor for this image is the base of the flagpole at (0, 32).
  128.                             anchor: new google.maps.Point(0, 40),
  129.                         };
  131.                         const dealers = [
  132.                             {
  133.                                 id: {{ dealer.id }},
  134.                                 name: "{{ dealer.name }}",
  135.                                 city: "{{ dealer.city }}",
  136.                                 street: "{{ dealer.street }}",
  137.                                 lat: {{ dealer.lat }},
  138.                                 lng: {{ dealer.lng }}
  139.                             }
  140.                         ];
  142.                         const markers = [];
  144.                         for (let i = 0; i < dealers.length; i++) {
  146.                             const dealer = dealers[i];
  148.                             const marker = new google.maps.Marker({
  149.                                 position: {lat: dealer.lat, lng: dealer.lng},
  150.                                 map,
  151.                                 icon: image,
  152.                                 title: dealer.name + ' ' + dealer.city,
  153.                                 zIndex: dealer.id,
  154.                             });
  156.                             marker.addListener("click", () => {
  157.                                 const infowindow = new google.maps.InfoWindow({
  158.                                     content: '<div style="width: 350px; overflow: hidden">' +
  159.                                         '<b>'+dealer.name+'</b><br>'+dealer.city+', '+dealer.street+'</div>',
  160.                                 });
  161.                                 google.maps.event.addListener(map, 'click', function() {
  162.                                     infowindow.close();
  163.                                 });
  164.                                 infowindow.open({
  165.                                     anchor: marker,
  166.                                     map,
  167.                                 });
  168.                             });
  170.                             markers.push(marker);
  172.                         }
  174.                     }
  176.                     window.initMap = initMap;
  178.                 </script>
  180.         </div>
  182.         <div>
  183.             <article class="opening">
  184.                 <h2 class="opening__title">
  185.                     <i class="icon icon-hours"></i>
  186.                     Provozní doba
  187.                 </h2>
  188.                 <div class="opening__schedule">
  189.                     {% for t in  openTime %}
  190.                     <div>{{ t.day.value }}</div>
  191.                     <div>{{ t.description }}</div>
  192.                     {% endfor %}
  193.                 </div>
  194.                 {% if dealer.openingHoursNote %}
  195.                 <div class="opening__info">{{ dealer.openingHoursNote }}</div>
  196.                 {% endif %}
  197.             </article>
  199.         </div>
  200.     </section>
  203. <section class="grid grid--gap40 grid--padding40">
  204.     <div>
  205.         <div id="adform_squarem"></div>
  207.         {% if dealer.dealerImages|length > 1 %}
  208.         <section class="gallery gallery--columns3 js-gallery">
  209.             {% for g  in  dealer.dealerImages %}
  210.                 <a   {% if  loop.index > 3 %} style="display: none"   {% endif %}
  211.                         class="gallery__item" href="{{ asset('img-dealer/')~g.name }}" title="{{ dealer.name }}">
  212.                     <img
  213.                             src="{{ asset('img-dealer/')~g.name    }}"
  214.                             {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  215.                                 src: asset('img-dealer/')~g.name
  216.                             }) }}
  217.                             width="200"
  218.                     >
  219.                 </a>
  220.             {% endfor %}
  222.             {% if  dealer.dealerImages|length > 3 %}
  223.             <div class="gallery__show">
  224.                 <i class="icon icon-camera"></i>
  225.                 + {{ dealer.dealerImages|length - 3 }}
  226.             </div>
  227.             {% endif%}
  232.         </section>
  233.         {% endif %}
  235.         <!-- The Gallery as lightbox dialog, should be a document body child element -->
  236.         <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" aria-label="image gallery"
  237.              aria-modal="true" role="dialog">
  238.             <div class="slides" aria-live="polite"></div>
  239.             <h3 class="title"></h3>
  240.             <a class="prev" aria-controls="blueimp-gallery" aria-label="previous slide" aria-keyshortcuts="ArrowLeft"></a>
  241.             <a class="next" aria-controls="blueimp-gallery" aria-label="next slide" aria-keyshortcuts="ArrowRight"></a>
  242.             <a class="close" aria-controls="blueimp-gallery" aria-label="close" aria-keyshortcuts="Escape"></a>
  243.             <ol class="indicator"></ol>
  244.         </div>
  246.         {% if hasVehicleImport %}
  247.             <h2 class="grid__title">Novinky z nabídky</h2>
  249.             {% for v in vehicles %}
  250.                 {% include 'vehicle/_vehicle.html.twig' with { vehicle: v } %}
  252.                 {% if loop.index == 1 %}
  253.                     <div id="banner-mobile-container" class="banner-mobile"></div>
  254.                 {%  endif %}
  256.                 {% if loop.index == 4 %}
  257.                     <div id="adform_squarem2"></div>
  258.                 {%  endif %}
  259.             {% endfor %}
  261.             <footer class="contact__footer" style="float: right">
  262.                 <a class="contact__button" href="{{ path('page_dealer_vehicle', { url:  dealer.url }) }}">
  263.                     <i class="icon icon-car"></i>
  264.                     Zobrazit nabídku vozidel
  265.                 </a>
  266.             </footer>
  267.         {% else %}
  268.             <h2 class="grid__title">Tipy z autobazarů</h2>
  270.             {% for tip in vehicleTips %}
  271.                 {% include 'vehicle/_vehicle.html.twig' with { vehicle: tip.vehicle } %}
  273.                 {% if loop.index == 1 %}
  274.                     <div id="banner-mobile-container" class="banner-mobile"></div>
  275.                 {% endif %}
  276.             {% endfor %}
  278.             {% if dealer.district %}
  279.             <footer class="contact__footer" style="float: right">
  280.                 <a class="contact__button" href="{{ path('page_vehicle_search', {urlKind: 'osobni-vozidla'}) }}?place={{ dealer.district.region.url }}">
  281.                     <i class="icon icon-car"></i>
  282.                     Nabídka vozidel {{ dealer.district.region.name }}
  283.                 </a>
  284.             </footer>
  285.             {% endif %}
  286.         {% endif %}
  291.     </div>
  293.     <div>
  294.         <div id="adform_halfpage"></div>
  295.         <div id="banner-container" class="banner"></div>
  296.     </div>
  298. </section>
  302. {% endblock %}