Streaming live at 10am (PST)

Delivery area for store


#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?



#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)