Delivery area for store

Design help Ecommerce
1

Hello,
im designing a website for a friend who runs a food prep business. ive created a E-commerce store where people can add items to build a meal to the stripe shopping cart, then proceed to checkout. ideally what id like is a map similar to this, the client will enter their address to see if they qualify for delivery, if they dont theyll have to select the Pickup shipping method. but with the checkout form were unable to add any additional fields etc. any ideas?

delivery%20area
delivery%20area860×642 198 KB

2

Unfortunately the Beta version of E-commerce does not offer this feature.

This would have to be a custom app by a 3rd party or some JS code.

Try reposting this in the Freelance | Custom Code sections.

3

This can definitely be done, but it is quite difficult to achieve.

You’ll need the Google Maps JavaScript API as well as the Geolocation API.

Use the Google Maps JavaScript API to initialize the map, and draw a polygon boundary.

Use the Geolocation API to fetch the coordinates of the address.

Use the .contains() method of the google.maps.LatLngBounds() object to check if the specified coordinates is within the bounds.

Then use the result to set/unset/change the values on another form that the customer is going to submit. (i.e.: programatically select the Pickup shipping method if outside the bounds)

1 Like
5

If you’re ok with using an app - I just helped my client set up http://deliverychecker.co/

6

I have a very similar feature — I needed to limit addresses in a certain radius from the shop. So I solved it using Google Places Autocomplete.
At first, you should set Google Cloud Platform (you can find instruction here: https://brota-places-autocomplete.webflow.io)

And then I used this script:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places>
</script>

        <script>
            var geolocation = {            //coordinates of the circle center
                lat: 33.9848496,    
                lng: -118.4728372
            };
            var circle = new google.maps.Circle({center: geolocation, radius: 2000});     //radius in meters 
            var options = {
                strictBounds: true
            };
            var autocomplete = new google.maps.places.Autocomplete(document.getElementById('input-ID'),options);
            autocomplete.setBounds(circle.getBounds());
        </script>
7

Hi all.
Josh from Foxy here. Our Google Maps integration makes this pretty easy to do. Info on our seamless Webflow integration can be found here: Webflow | Foxy.io

Please don’t hesitate to reach out if you have any questions or need help getting started: hello@foxy.io

Thanks,
Josh