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://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
  18.           {% endblock %}
  20. {% block body %}
  23.     <section class="contact">
  24.         <header class="contact__header">
  25.             <h1>{{ dealer.name }}</h1>
  26.             <figure class="contact__logo">
  27.                 {% if dealer.logo %}
  28.                 <img
  29.                         src="{{ asset('img-dealer/')~dealer.logo }}"
  30.                         {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  31.                             src: asset('img-dealer/')~dealer.logo
  32.                         }) }}
  33.                         width="200"
  34.                 >
  35.                 {% endif %}
  36.             </figure>
  37.         </header>
  39.         {% if dealer.description %}
  40.         <div class="contact__description">
  41.             <p>{{ dealer.description }}</p>
  42.         </div>
  43.         {% endif %}
  45.         <div class="contact__grid">
  46.             <div>
  47.                 <h2 class="contact__heading">Adresa</h2>
  48.                 <div class="contact__item">
  49.                     <i class="contact__icon icon icon-garage"></i>
  50.                     <div>
  51.                         {% if dealer.street %}{{ dealer.street }}<br>{% endif %}
  52.                         {% if dealer.city %}{{ dealer.city }}<br>{% endif %}
  53.                         {% if dealer.district %}{{ dealer.district.region.name }}{% endif %}
  54.                     </div>
  55.                 </div>
  56.             </div>
  57.             <div>
  58.                 <h2 class="contact__heading">Telefon</h2>
  59.                 <div class="contact__item">
  60.                     <i class="contact__icon icon icon-phone"></i>
  61.                     {% for p in dealer.dealerPhones %}
  62.                     <a href="">{{ p.name }}</a><br>
  63.                     {% endfor %}
  64.                 </div>
  65.             </div>
  66.             <div>
  67.                 <h2 class="contact__heading">E-mail</h2>
  68.                 {% if dealer.email %}
  69.                 <div class="contact__item contact__item--primary">
  70.                     <i class="contact__icon icon icon-email"></i>
  71.                     <a href="mailto:{{ dealer.email }}">{{ dealer.email }}</a>
  72.                 </div>
  73.                 {% endif %}
  74.             </div>
  75.         </div>
  76.         <footer id="mapa" class="contact__footer">
  77.             {% if hasVehicleImport %}
  78.             <a class="contact__button" href="{{ path('page_dealer_vehicle', { url:  dealer.url }) }}">
  79.                 <i class="icon icon-car"></i>
  80.                 Zobrazit nabídku vozidel
  81.             </a>
  82.             {% endif %}
  83.             {% if dealer.lat and dealer.lng %}
  84.             <a class="contact__button contact__button--secondary" href="https://www.google.com/maps/search/?api=1&query={{ dealer.lat }},{{ dealer.lng }}" target="_blank">
  85.                 Zobrazit trasu
  86.                 <i class="icon icon-map"></i>
  87.             </a>
  88.             {% endif %}
  89.             {% if dealer.www %}
  90.             <a class="contact__button contact__button--secondary" href="http://{{ dealer.www }}" target="_blank">
  91.                 Zobrazit web
  92.                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 64 64" fill="currentColor">
  93.                     <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>
  94.                 </svg>
  95.             </a>
  96.             {% endif %}
  97.         </footer>
  98.     </section>
  101.     <section    class="grid grid--gap40 grid--padding40">
  102.         <div>
  104.                 <div id="map" style="height: 400px" > </div>
  106.                 <script>
  108.                     function initMap() {
  109.                         const map = new google.maps.Map(document.getElementById("map"), {
  110.                             zoom: 7,
  111.                             center: {lat: 49.7887636, lng: 15.6634697},
  112.                         });
  114.                         setMarkers(map);
  115.                     }
  118.                     function setMarkers(map) {
  120.                         const image = {
  121.                             url: "{{ asset('img/icon-dealer.png') }}",
  122.                             // This marker is 20 pixels wide by 32 pixels high.
  123.                             size: new google.maps.Size(40, 40),
  124.                             // The origin for this image is (0, 0).
  125.                             origin: new google.maps.Point(0, 0),
  126.                             // The anchor for this image is the base of the flagpole at (0, 32).
  127.                             anchor: new google.maps.Point(0, 40),
  128.                         };
  130.                         const dealers = [
  131.                             {
  132.                                 id: {{ dealer.id }},
  133.                                 name: "{{ dealer.name }}",
  134.                                 city: "{{ dealer.city }}",
  135.                                 street: "{{ dealer.street }}",
  136.                                 lat: {{ dealer.lat }},
  137.                                 lng: {{ dealer.lng }}
  138.                             }
  139.                         ];
  141.                         const markers = [];
  143.                         for (let i = 0; i < dealers.length; i++) {
  145.                             const dealer = dealers[i];
  147.                             const marker = new google.maps.Marker({
  148.                                 position: {lat: dealer.lat, lng: dealer.lng},
  149.                                 map,
  150.                                 icon: image,
  151.                                 title: dealer.name + ' ' + dealer.city,
  152.                                 zIndex: dealer.id,
  153.                             });
  155.                             marker.addListener("click", () => {
  156.                                 const infowindow = new google.maps.InfoWindow({
  157.                                     content: '<div style="width: 350px; overflow: hidden">' +
  158.                                         '<b>'+dealer.name+'</b><br>'+dealer.city+', '+dealer.street+'</div>',
  159.                                 });
  160.                                 google.maps.event.addListener(map, 'click', function() {
  161.                                     infowindow.close();
  162.                                 });
  163.                                 infowindow.open({
  164.                                     anchor: marker,
  165.                                     map,
  166.                                 });
  167.                             });
  169.                             markers.push(marker);
  171.                         }
  173.                     }
  175.                     window.initMap = initMap;
  177.                 </script>
  179.         </div>
  181.         <div>
  182.             <article class="opening">
  183.                 <h2 class="opening__title">
  184.                     <i class="icon icon-hours"></i>
  185.                     Provozní doba
  186.                 </h2>
  187.                 <div class="opening__schedule">
  188.                     {% for t in  openTime %}
  189.                     <div>{{ t.day.value }}</div>
  190.                     <div>{{ t.description }}</div>
  191.                     {% endfor %}
  192.                 </div>
  193.                 {% if dealer.openingHoursNote %}
  194.                 <div class="opening__info">{{ dealer.openingHoursNote }}</div>
  195.                 {% endif %}
  196.             </article>
  198.         </div>
  199.     </section>
  202. <section class="grid grid--gap40 grid--padding40">
  203.     <div>
  204.         <div id="adform_squarem"></div>
  206.         {% if dealer.dealerImages|length > 1 %}
  207.         <section class="gallery gallery--columns3 js-gallery">
  208.             {% for g  in  dealer.dealerImages %}
  209.                 <a   {% if  loop.index > 3 %} style="display: none"   {% endif %}
  210.                         class="gallery__item" href="{{ asset('img-dealer/')~g.name }}" title="{{ dealer.name }}">
  211.                     <img
  212.                             src="{{ asset('img-dealer/')~g.name    }}"
  213.                             {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  214.                                 src: asset('img-dealer/')~g.name
  215.                             }) }}
  216.                             width="200"
  217.                     >
  218.                 </a>
  219.             {% endfor %}
  221.             {% if  dealer.dealerImages|length > 3 %}
  222.             <div class="gallery__show">
  223.                 <i class="icon icon-camera"></i>
  224.                 + {{ dealer.dealerImages|length - 3 }}
  225.             </div>
  226.             {% endif%}
  231.         </section>
  232.         {% endif %}
  234.         <!-- The Gallery as lightbox dialog, should be a document body child element -->
  235.         <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" aria-label="image gallery"
  236.              aria-modal="true" role="dialog">
  237.             <div class="slides" aria-live="polite"></div>
  238.             <h3 class="title"></h3>
  239.             <a class="prev" aria-controls="blueimp-gallery" aria-label="previous slide" aria-keyshortcuts="ArrowLeft"></a>
  240.             <a class="next" aria-controls="blueimp-gallery" aria-label="next slide" aria-keyshortcuts="ArrowRight"></a>
  241.             <a class="close" aria-controls="blueimp-gallery" aria-label="close" aria-keyshortcuts="Escape"></a>
  242.             <ol class="indicator"></ol>
  243.         </div>
  245.         {% if hasVehicleImport %}
  246.             <h2 class="grid__title">Novinky z nabídky</h2>
  248.             {% for v in vehicles %}
  249.                 {% include 'vehicle/_vehicle.html.twig' with { vehicle: v } %}
  251.                 {% if loop.index == 1 %}
  252.                     <div id="banner-mobile-container" class="banner-mobile"></div>
  253.                 {%  endif %}
  255.                 {% if loop.index == 4 %}
  256.                     <div id="adform_squarem2"></div>
  257.                 {%  endif %}
  258.             {% endfor %}
  260.             <footer class="contact__footer" style="float: right">
  261.                 <a class="contact__button" href="{{ path('page_dealer_vehicle', { url:  dealer.url }) }}">
  262.                     <i class="icon icon-car"></i>
  263.                     Zobrazit nabídku vozidel
  264.                 </a>
  265.             </footer>
  266.         {% else %}
  267.             <h2 class="grid__title">Tipy z autobazarů</h2>
  269.             {% for tip in vehicleTips %}
  270.                 {% include 'vehicle/_vehicle.html.twig' with { vehicle: tip.vehicle } %}
  272.                 {% if loop.index == 1 %}
  273.                     <div id="banner-mobile-container" class="banner-mobile"></div>
  274.                 {% endif %}
  275.             {% endfor %}
  277.             {% if dealer.district %}
  278.             <footer class="contact__footer" style="float: right">
  279.                 <a class="contact__button" href="{{ path('page_vehicle_search', {urlKind: 'osobni-vozidla'}) }}?place={{ dealer.district.region.url }}">
  280.                     <i class="icon icon-car"></i>
  281.                     Nabídka vozidel {{ dealer.district.region.name }}
  282.                 </a>
  283.             </footer>
  284.             {% endif %}
  285.         {% endif %}
  290.     </div>
  292.     <div>
  293.         <div id="adform_halfpage"></div>
  294.         <div id="banner-container" class="banner"></div>
  295.     </div>
  297. </section>
  301. {% endblock %}