Documentation You are here: start » v » 2.0 » snippets » restrict_shipping_to_specific_map_area

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
v:2.0:snippets:restrict_shipping_to_specific_map_area [2019/12/12 10:20] – [Generate Google Maps Platform API Key] adamv:2.0:snippets:restrict_shipping_to_specific_map_area [2019/12/12 10:27] (current) – [Add custom template code] adam
Line 16: Line 16:
  
 ===== Create allowed address area polygon ===== ===== Create allowed address area polygon =====
 +
 +In order to dictate what the supported address zone is, we need to generate a polygon, where each point of the polygon is a set of coordinates. We can use Google's My Maps functionality to build out that polygon visually, and export it to get the coordinates.
  
   - Head to https://www.google.com/mymaps, and log in, or create an account if you don't have one already.   - Head to https://www.google.com/mymaps, and log in, or create an account if you don't have one already.
Line 56: Line 58:
  
 ===== Build custom shipping code ===== ===== Build custom shipping code =====
 +
 +Now for the fun part - adding the custom shipping code to your store!
  
   - Open your store's Foxy administration and head to the "shipping" section   - Open your store's Foxy administration and head to the "shipping" section
Line 129: Line 133:
   - Next you'll update the ''shipping_polygon'' array. On the blank line in this code, paste in the coordinates array you generated in the last section:<code javascript>const shipping_polygon = [   - Next you'll update the ''shipping_polygon'' array. On the blank line in this code, paste in the coordinates array you generated in the last section:<code javascript>const shipping_polygon = [
          
-];</code>.+];</code>
   - The beginning of the snippet should now look something like this:<code javascript>// Google Maps API key   - The beginning of the snippet should now look something like this:<code javascript>// Google Maps API key
 const google_maps_api_key = 'abCd12eFGh__zyXw34vUT'; const google_maps_api_key = 'abCd12eFGh__zyXw34vUT';
Line 143: Line 147:
     [-73.9546793,40.8478817,0],     [-73.9546793,40.8478817,0],
 ];</code> ];</code>
-  - Next, you'll need to set the shipping rates and error that is displayed to customers. The snippet above sets a $15 "Standard Delivery" rate, but you'll obviously want to customise that to show your own rates. Check out the documentation here on interacting with our rates. Specifically you'll be editing this section:<code javascript>if (coordinates.length == 2 && checkGeoFence(coordinates, shipping_polygon)) {+  - Next, you'll need to set the shipping rates and error that is displayed to customers. The snippet above sets a $15 "Standard Delivery" rate, but you'll obviously want to customise that to show your own rates. Check out [[..:shipping:custom_code:|the documentation here on interacting with our rates]].\\ \\ Specifically you'll be editing this section:<code javascript>if (coordinates.length == 2 && checkGeoFence(coordinates, shipping_polygon)) {
     // Shipping is allowed!     // Shipping is allowed!
     rates.add(10000, 15, '', 'Standard Delivery');     rates.add(10000, 15, '', 'Standard Delivery');
Line 180: Line 184:
   - Save the configuration   - Save the configuration
  
 +===== Test it out! =====
 +
 +At this stage - you've completed all the configuration! You should now be able to add a product to your cart, proceed to the checkout, and enter shipping addresses that are inside and outside of your shippable zone to test it out.

Page Tools

Site Tools