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?
