How to implement a locate me button in the cart drawer ?

Zackraez
Tourist
13 0 1

I have had a developer create a locate me button within the cart page of my store, But now that I have set my cart type to a drawer (Impulse theme), I have issues with setting the button on the cart drawer.

 

This was the code that was used on cart.liquid

   var map, infoWindow;
        var longitude, latitude;
        var geocoder;
        var abu_dhabi = { lat: 24.466, lng: 54.366 };
 
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: abu_dhabi,
                zoom: 13
            });
            infoWindow = new google.maps.InfoWindow;
            geocoder = new google.maps.Geocoder;
 
 
            // GET coordinates and adress
            map.addListener('center_changed', function() {
                longitude = map.getCenter().lng();
                latitude = map.getCenter().lat();
 
                document.getElementById('coordinates-lat-lng').value = latitude + ", " + longitude;
 
            });
 
            map.addListener('dragend', function() {
                longitude = map.getCenter().lng();
                latitude = map.getCenter().lat();
 
                geocodeLatLng(latitude, longitude, geocoder, map);
            })
 
        }
 
        // GEOLOCATION
        function geolocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
 
                    map.setCenter(pos);
                }, function() {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }
          revealMapAndCoordinates();
        }
 
        // GEOLOCATION Error
        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                                'Error: The Geolocation service failed.' :
                                'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
        }
 
        // FIND a place
        function findPlace() {
 
            var input = document.getElementById('address-input').value;
            console.log(input);
 
            var request = {
                query: input,
                fields: ['name', 'geometry'],
            };
 
            service = new google.maps.places.PlacesService(map);
 
            service.findPlaceFromQuery(request, function(results, status) {
                if (status === google.maps.places.PlacesServiceStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    console.log(results[0]);
 
                    lat = map.getCenter().lat();
                    lng = map.getCenter().lng();
 
                    geocodeLatLng(lat, lng, geocoder, map);
                }
            });
        };
 
        // GET address
        function geocodeLatLng(latitude, longitude, geocoder, map) {
            var latlng = {lat: latitude, lng: longitude};
            var address = document.getElementById('address-input');
 
            geocoder.geocode({'location': latlng}, function(results, status) {
                if (status === 'OK') {
                    if (results[0]) {
                        address.innerText = results[0].formatted_address;
                      recodeAddress(results[0].address_components);
                                passAddressToCheckout();
                    } else {
                        address.innerText = 'No results found';
                    }
                } else {
                    window.alert('Geocoder failed due to: ' + status);
                }
            });
        }
  
  function recodeAddress(address_components) {
                  console.log("recodeAdress function")
 
                  let keys = Object.keys(address_components);
                  tmp_data = address_components;
 
                  itemRoute = '';
                  itemSnumber = '';
                  itemCountry = '';
                  itemLocality = '';
 
                  // iterate through address_component array
                  for (const key of keys) {
                    console.log('address_component:' + key);
 
                    if (address_components[key].types == "route"){
                        console.log(": route:"+address_components[key].long_name);
                        itemRoute = address_components[key].long_name;
                    }
 
                    if (address_components[key].types == "locality" || address_components[key].types[0] == "locality" ){
                        console.log("town:"+address_components[key].long_name);
                        itemLocality = address_components[key].long_name;
                    }
 
                    if (address_components[key].types == "country" || address_components[key].types[0] == "country" ){ 
                        console.log("country:"+address_components[key].long_name); 
                        itemCountry = address_components[key].long_name;
                    }
 
                    // if (address_components[key].types == "postal_code_prefix"){ 
                    //     console.log("pc:"+address_components[key].long_name);  
                    //     itemPc = address_components[key].long_name;
                    // }
 
                    if (address_components[key].types == "street_number"){ 
                        console.log("street_number:"+address_components[key].long_name);  
                        itemSnumber = address_components[key].long_name;
                    }
                    //return false; // break the loop
                  }
                }
 
                // PASS adress to Checkout
                function passAddressToCheckout() {
                  // ?checkout[shipping_address][city]=Dubai
 
                  let form = document.getElementById('cart-form');
                  let prefillData = '';
 
                  if (itemRoute) {
                    prefillData += "checkout[shipping_address][address1]=" + itemRoute;
                    console.log(prefillData);
 
                    if (itemSnumber) {
                      prefillData += " " + itemSnumber;
                      console.log(prefillData);
                    }
                  }
 
                  if (itemLocality) {
                    prefillData += "&checkout[shipping_address][city]=" + itemLocality;
                    console.log(prefillData);
                  }
 
                  // if there are any data to prefill add question mark
                  if (prefillData) {
                    form.action = "?" + prefillData;
                    console.log(form.action);
                  }
 
                  // There is no option to prefill country. And Google does not share Zip code
 
                }
                
                function revealMapAndCoordinates() {
                  
                  let mapDiv = document.getElementById('map-column');
                  let coordinatesDiv = document.getElementById('coordinates');
                  
                  mapDiv.style.display="block";
                  
                  coordinatesDiv.classList.remove("hidden");
                  
                }
 
 
    </script>
        async defer></script>
 
And this is the code shown on the cart-drawer.liquid:
 

{% if settings.cart_type == 'drawer' %}
<div id="CartDrawer" class="drawer drawer--right">
<form action="{{ routes.cart_url }}" method="post" novalidate class="drawer__contents">
<div class="drawer__fixed-header">
<div class="drawer__header appear-animation appear-delay-1">
<div class="h2 drawer__title">{{ 'cart.general.title' | t }}</div>
<div class="drawer__close">
<button type="button" class="drawer__close-button js-drawer-close">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
</button>
</div>
</div>
</div>

<div id="CartContainer" class="drawer__inner"></div>
</form>
</div>
{% endif %}

 

Could someone help me with setting the locate me button to the cart drawer?

0 Likes