templates/b2c/shops.html.twig line 1

Open in your IDE?
  1. {# @var this \Pimcore\Templating\PhpEngine #}
  2. {# @var view \Pimcore\Templating\PhpEngine #}
  3. {# @var app \Pimcore\Templating\GlobalVariables #}
  4. {# @var $this->product \AppBundle\Model\DefaultProduct #}
  5. {% extends 'layouts/layout_b2c.html.twig' %}
  6. {% block content %}
  7. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBY5eieFHCE5EhZ_-AtWU124rpenVg7BJE&libraries=geometry,places&callback=initMap&v=weekly&region=IT&language=it" defer></script>
  8. <section class="shops-container d-flex justify-content-center flex-wrap">
  9.                 <div class="shops-search" id="shops-search">
  10.                     <div class="inner">
  11.                         <h2>Punti vendita</h2>
  12.                         <div id="form_shops">   
  13.                             <div class="input-group">                         
  14.                                 <input type="text" class="searchbar form-control" id="search_shops_map" type="text" name="address" placeholder="Inserire città o CAP" />
  15.                                 <div class="searchbutton input-group-append">
  16.                                     <button class="btn" type="button" id="button_shops"><img src="/mecstore/b2c/assets/images/custom_icons/search-icon.svg" alt="search"></button>       
  17.                                     <button class="btn" type="button restore_search" id="restore_search">X</button>                          
  18.                                 </div>
  19.                             </div>
  20.                             <div class="geolocal">
  21.                                 <span class="geolocalize">USA LA GEOLOCALIZZAZIONE</span>
  22.                                 <span class="geolocalize_error">Attiva la geolocalizzazione nel browser</span>
  23.                             </div>
  24.                             <div id="shops_list" class="shops_list" style="height:600px; overflow-y:scroll;">
  25.                                 
  26.                             </div>
  27.                         </div>
  28.                     </div>
  29.                 </div>
  30.                 <div class="shops_map" id="shops_map" >
  31.                         
  32.                         
  33.                 </div>
  34.             </section>
  36.             <script>           
  37.                 const urlParams = new URLSearchParams(window.location.search);
  38.                 const latSent = urlParams.get('user_lat');
  39.                 const lngSent = urlParams.get('user_lng');
  41.                 window.dataLayer = window.dataLayer || [];
  43.                 let map;
  44.                 let markers = [];
  45.                 let infoWindows = [];
  46.                 let markerLinks = [];
  47.                 let watch;
  48.                 
  50.                 function geocodeLatLng(geocoder, coords, type) {
  51.                     const latlng = {
  52.                         lat: parseFloat(coords.latitude),
  53.                         lng: parseFloat(coords.longitude),
  54.                     };
  56.                     geocoder.geocode({ location: latlng }, (results, status) => {
  57.                         if (status === "OK") {
  58.                             if (results[0]) {
  59.                                 window.dataLayer.push({
  60.                                     'event': type,
  61.                                     'search_term': results[0].formatted_address || 'geolocalization'
  62.                                 });
  63.                             } else {
  64.                                 console.log("No results found");
  65.                             }
  66.                         } else {
  67.                             console.log("Geocoder failed due to: " + status);
  68.                         }
  69.                     });
  70.                 }
  72.                 function initMap(coords) {
  73.                     /* Posizione di Default */
  74.                     let default_location = new google.maps.LatLng(45.9584803,12.6411075);
  75.                     let geocoder = new google.maps.Geocoder();
  76.                     /* Mappa */
  77.                     map = new google.maps.Map(document.getElementById('shops_map'), {
  78.                         center: default_location,
  79.                         zoom: 8
  80.                     });
  82.                     let activeInfoWindow;
  83.                 
  84.                     fetch('/b2c/partners')
  85.                     .then((response) => response.json())
  86.                     .then((data) => {
  87.                         data.forEach(function (val, i){
  88.                             // Marker 
  89.                             let marker = new google.maps.Marker({
  90.                                 map: map,
  91.                                 title: val.name,
  92.                                 position: new google.maps.LatLng(val.luogoLat, val.luogoLon),
  93.                                         icon: { scaledSize: { width: 26, height: 43 }, url: "/mecstore/b2c/assets/images/custom_icons/marker_map.png" }
  94.                             });
  95.                             markers.push(marker);
  97.                             // InfoWindow 
  98.                             let infoWindow = new google.maps.InfoWindow({
  99.                                 content: `
  100.                                 <div class="info-window ">
  101.                                     <div class="">
  102.                                         <strong class="info-window-name">`+val.name+`</strong><br/>
  103.                                         `+val.indirizzo+`, `+val.cap+`, `+val.comune+` (`+val.provincia+`)<br/>
  104.                                     </div>
  105.                                     <div class="">
  106.                                         Tel. `+val.tel+`<br />
  107.                                         ${val.email ? 'Email: <a href="mailto:'+val.email+'" target="_blank">'+val.email+'<br />' : ''}
  108.                                     </div>
  109.                                     <a href="b2c_shop?pagename=`+val.pagename+`" class="" style="padding-top: 5px; text-align: right; width: 100%; display: inline-block;">Vedi scheda ></a>
  110.                                 </div>`
  111.                             });
  112.                             infoWindows.push(infoWindow);
  114.                             let markerLink = `
  115.                                 <div class="shop" data-alphabet='`+val.name+`' data-marker="marker_`+i+`" > 
  116.                                     <div class="shop_data">                              
  117.                                         <div class="info">
  118.                                             <p>
  119.                                                 <span class="shop_name">`+val.name+`</span><br>
  120.                                                 `+val.indirizzo+`, `+val.cap+`, `+val.comune+` (`+val.provincia+`)<br>
  121.                                             </p>
  122.                                             <a class="shop_openmap">vedi su mappa</a>
  123.                                         </div>
  124.                                         <div class="contacts">
  125.                                             <i class="fa-phone fas"></i> `+val.tel+`<br />
  126.                                             ${val.email ? 'Email: <a href="mailto:'+val.email+'" target="_blank">'+val.email+'<br />' : ''}
  127.                                         </div>
  128.                                     </div>
  129.                                     <div class="d-flex justify-content-end">
  130.                                         <a href="b2c_shop?pagename=`+val.pagename+`" class="shop_link"><span>Vedi scheda</span></a>
  131.                                     </div>
  132.                                 </div>
  133.                             `;
  134.                             markerLinks.push(markerLink);
  135.                         });  
  136.                         
  137.                         markers.forEach(function (ele, i) {
  138.                                 let shop = document.getElementById('shops_list');
  139.                             // Creo la lista 
  140.                             shop.innerHTML += markerLinks[i];
  141.                             // Apertura InfoWindow 
  142.                             ele.addListener('click', function() {
  143.                                 if (activeInfoWindow) { 
  144.                                     activeInfoWindow.close(); 
  145.                                 }
  146.                                 infoWindows[i].open(map, this);
  147.                                 activeInfoWindow = infoWindows[i];
  148.                             });
  149.                         });
  150.                         $('.shop_openmap').each(function(i, e) {
  151.                             $(e).click(function(i) {
  152.                                 return function(e) {
  153.                                     google.maps.event.trigger(markers[i], 'click');
  154.                                 }
  155.                             }(i));
  156.                         });
  157.                         shopsSortByAlphabet();
  159.                         
  160.                         // autocomplete punti vendita
  161.                         let autocomplete = new google.maps.places.Autocomplete(document.getElementById('search_shops_map'));
  162.                         
  163.                         // Marker Posizione Utente
  164.                         let user_place_marker = new google.maps.Marker({ map: map });
  166.                         // Search functions
  167.                         if ("geolocation" in navigator) {
  168.                             $('.geolocalize').css('display', 'block');
  169.                             $('.geolocalize').click(function () {
  170.                                 initGeo();
  171.                             });
  172.                         }
  173.                         function success(p) {
  174.                             $('.geolocalize_error').hide();
  175.                             $('.geolocalize').hide();
  176.                             //navigator.geolocation.clearWatch(watch);
  177.                         }
  178.                         function error() {
  179.                             $('.geolocalize_error').css('display', 'block');
  180.                             restore_button.click();
  181.                             return;
  182.                         }
  183.                         function initGeo() {
  184.                             $('.geolocalize_error').hide();
  185.                             if ("geolocation" in navigator) {
  186.                                 watch = navigator.geolocation.getCurrentPosition(success, error);
  187.                             }
  188.                         }
  189.                         
  190.                         document.getElementById("search_shops_map").addEventListener('focus', function () {
  191.                             document.getElementById('button_shops').style.display = 'block';
  192.                             document.getElementById('restore_search').style.display = 'none';
  193.                         });
  195.                         let search_button = document.getElementById('button_shops');
  197.                         search_button.addEventListener('click', function (event) {
  198.                             event.stopPropagation();
  199.                             searchByPosition();
  200.                         });
  202.                         if (coords) {
  203.                             searchByPosition(null, coords, null, null)
  204.                         } 
  205.                         if (latSent || lngSent){
  206.                             searchByPosition(null,null,latSent,lngSent)
  207.                         }
  210.                         function searchByPosition(e, p, lt, ln) {
  211.                             if (document.getElementById('search_shops_map').value == '' && !p) {
  212.                                 if(lt || ln){                                
  213.                                     var user_lat = parseFloat(lt);
  214.                                     var user_lng = parseFloat(ln);
  215.                                     /* Calcolo Distanze */      
  216.                                     markers.forEach(function (ele, i) {
  217.                                         let distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(user_lat, user_lng), ele.position);
  218.                                         //console.log('distance: '+distance);    
  219.                                         var float_distance = parseFloat((distance /1000 ).toFixed(1) );
  220.                                         //console.log('float_distance: '+float_distance);    
  221.                                         if (float_distance> 30.0 || isNaN(float_distance)) {
  222.                                             ele.setMap(null);
  223.                                             document.querySelector('[data-marker="marker_'+i+'"]').style.display = 'none';
  224.                                             document.querySelector('[data-marker="marker_'+i+'"]').dataset.distance = float_distance;
  225.                                         } else {
  226.                                             ele.setMap(map);
  227.                                             document.querySelector('[data-marker="marker_'+i+'"]').style.display = 'flex';
  228.                                             document.querySelector('[data-marker="marker_'+i+'"]').dataset.distance = float_distance;
  229.                                         }
  230.                                     });                                    
  231.                                     shopsSortByDistance();
  232.                                     // Inserisco l'utente
  233.                                     var pan = {user_lat, user_lng};
  234.                                     map.panTo(pan);
  235.                                     map.setZoom(10);
  236.                                 } else {
  237.                                     document.getElementById("search_shops_map").placeholder = "Inserisci un indirizzo";
  238.                                     user_place_marker.setMap(null);
  239.                                 }
  241.                             } else {
  242.                                 document.getElementById('button_shops').style.display = 'none';
  243.                                 document.getElementById('restore_search').style.display = 'block';
  245.                                 var user_place = p ? undefined : autocomplete.getPlace();
  247.                                 if (p) {
  248.                                     geocodeLatLng(geocoder, p, 'button_shops');
  249.                                 } else {
  250.                                     window.dataLayer.push({
  251.                                         'event': 'button_shops',
  252.                                         'search_term': document.getElementById('search_shops_map').value
  253.                                     });
  254.                                 }
  256.                                 if (!p && "geolocation" in navigator) {
  257.                                     $('.geolocalize').css('display', 'block');
  258.                                 }
  260.                                 if (user_place || p) {
  261.                                     if(user_place.geometry.location.lat() || user_place.geometry.location.lng()){
  262.                                         if (p) {
  263.                                             document.getElementById("search_shops_map").value = "";
  264.                                             document.getElementById("search_shops_map").placeholder = "Geolocalizzazione attiva, inserisci indirizzo per una nuova ricerca";
  265.                                             var newPos = { lat: p.latitude, lng: p.longitude };
  266.                                         }
  267.                                         var user_lat = p ? p.latitude : user_place.geometry.location.lat();
  268.                                         var user_lng = p ? p.longitude : user_place.geometry.location.lng();
  270.                                         /* Calcolo Distanze */      
  271.                                         markers.forEach(function (ele, i) {
  272.                                             let distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(user_lat, user_lng), ele.position);
  273.                                             console.log('distance: '+distance);    
  274.                                             var float_distance = parseFloat((distance /1000 ).toFixed(1) );
  275.                                             console.log('float_distance: '+float_distance);    
  276.                                             if (float_distance> 30.0 || isNaN(float_distance)) {
  277.                                             ele.setMap(null);
  278.                                             document.querySelector('[data-marker="marker_'+i+'"]').style.display = 'none';
  279.                                             document.querySelector('[data-marker="marker_'+i+'"]').dataset.distance = float_distance;
  280.                                         } else {
  281.                                             ele.setMap(map);
  282.                                             document.querySelector('[data-marker="marker_'+i+'"]').style.display = 'flex';
  283.                                             document.querySelector('[data-marker="marker_'+i+'"]').dataset.distance = float_distance;
  284.                                         }
  285.                                         });
  286.                                         
  287.                                         shopsSortByDistance();
  289.                                         // Inserisco l'utente
  290.                                         var pan = newPos || user_place.geometry.location;
  291.                                         map.panTo(pan);
  292.                                         map.setZoom(10);
  293.                                     } else {
  294.                                         document.getElementById('error').innerHTML= 'Non sono stati trovati punti vendita in questa zona.';
  295.                                         document.getElementById('error').style.display = 'block';
  296.                                     }
  297.                                 } else {
  298.                                     document.getElementById("search_shops_map").value = "";
  299.                                     document.getElementById("search_shops_map").placeholder = "Inserisci un indirizzo";
  300.                                     user_place_marker.setMap(null);
  302.                                     // Rimetto tutti i punti sulla mappa e sulla lista 
  303.                                     markers.forEach(function (ele, i) {
  304.                                         ele.setMap(map);
  305.                                         ele.setPosition(ele.position );
  306.                                         document.querySelector('[data-marker="marker_'+i+'"]').style.display = 'flex';
  307.                                     });
  308.                                 }
  309.                             }
  310.                         }
  312.                         /* restore search function */
  313.                         let restore_button = document.getElementById('restore_search');
  314.                         restore_button.addEventListener('click', function (event) {
  315.                             event.stopPropagation();
  316.                             restoreShops();
  317.                         });
  318.                         function restoreShops() {
  319.                                 document.getElementById('button_shops').style.display = 'block';
  320.                                 document.getElementById('restore_search').style.display = 'none';
  321.                                 document.getElementById('search_shops_map').value = "";
  322.                                 document.getElementById("search_shops_map").placeholder = "Inserisci un indirizzo";
  323.                                 user_place_marker.setMap(null);
  324.                                 map.panTo(default_location);
  325.                                 map.setZoom(8);
  327.                                 if ("geolocation" in navigator) {
  328.                                     $('.geolocalize').css('display', 'block');
  329.                                 }
  331.                                 // Rimetto tutti i punti sulla mappa e sulla lista 
  332.                                 markers.forEach(function (ele, i) {
  333.                                     ele.setMap(map);
  334.                                     ele.setPosition(ele.position );
  335.                                     document.querySelector('[data-marker="marker_'+i+'"]').style.display = 'flex';
  336.                                 });
  338.                             shopsSortByAlphabet();
  339.                         }
  340.                     });            
  341.                 }
  343.                 /* sort functions */
  344.                 function shopsSortByDistance() {
  345.                     var wrapper = document.getElementById('shops_list');
  346.                     var elements = [...document.getElementById('shops_list').querySelectorAll('.shop')];
  347.                     elements.sort(function (a, b) {
  348.                         return +parseFloat(a.dataset.distance) - +parseFloat(b.dataset.distance);
  349.                         console.log('a.dataset.distance: '+a.dataset.distance);
  350.                         console.log('b.dataset.distance: '+b.dataset.distance);
  351.                     });
  352.                     elements.forEach(function (el) {
  353.                         wrapper.appendChild(el);
  354.                     });
  355.                 };
  356.                 function shopsSortByAlphabet() {
  357.                     var wrapper = document.getElementById('shops_list');
  358.                     var elements = [...document.getElementById('shops_list').querySelectorAll('.shop')];
  359.                         console.log('elements: '+elements[0].dataset.alphabet);
  360.                     elements.sort(function (a, b) {
  361.                         return a.dataset.alphabet.localeCompare(b.dataset.alphabet);
  362.                     });
  363.                     elements.forEach(function (el) {
  364.                         wrapper.appendChild(el);
  365.                     });
  366.                 };
  367.             </script>
  369.             <!-- End .container -->
  371.             <!-- margin -->
  373.             <!-- End .container -->
  375.             <!-- margin -->
  376. {%  endblock %}