| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| v:2.0:snippets:restrict_shipping_to_specific_map_area [2019/12/05 07:55] – adam | v:2.0:snippets:restrict_shipping_to_specific_map_area [2019/12/12 10:27] (current) – [Add custom template code] adam |
|---|
| ===== Generate Google Maps Platform API Key ===== | ===== Generate Google Maps Platform API Key ===== |
| 1. Head to the Google Maps Platform site at https://cloud.google.com/maps-platform, and log in or create an account if needed. | |
| 1. Click the "Get Started" button. | To get the coordinates of the customer's shipping address, we will be using the Google Maps API. They require an account with billing account connected for access there though, so you'll need to sign up and create an account if you haven't already. They provide a $200 free allowance per month, which should allow for 40,000 requests per month before any billing would kick in. |
| 1. In the popup that appears, select the "Places" product option and continue | |
| 1. On the next panel you'll be prompted to either select an existing project or create a new one. Make a selection there and continue. | - Head to the Google Maps Platform site at https://cloud.google.com/maps-platform, and log in or create an account if needed. |
| 1. If prompted to create a billing account, complete that. Google has a $200 free allowance per month, but requires you assign a billing account in case you go over that allowance. | - Click the "Get Started" button. |
| 1. Once you've created your new project, you'll be redirected to the Google Maps Platform portal. | - In the popup that appears, select the "Places" product option and continue |
| 1. Select the hamburger menu in the top left, and select "APIs & Services" and "Credentials" | - On the next panel you'll be prompted to either select an existing project or create a new one. Make a selection there and continue. |
| 1. Click "Create Credentials" on the Credentials page, and select "API Key". | - If prompted to create a billing account, complete that. Google has a $200 free allowance per month, but requires you assign a billing account in case you go over that allowance. |
| 1. Copy the resulting API key into a text file to use later | - Once you've created your new project, you'll be redirected to the Google Maps Platform portal. |
| 1. If given the option to restrict your API key - currently you won't be able to use Application restrictions, but you can set an API restriction to only allow the ''Geocoding API''. | - Select the hamburger menu in the top left, and select "APIs & Services" and "Credentials" |
| | - Click "Create Credentials" on the Credentials page, and select "API Key". |
| | - Copy the resulting API key into a text file to use later |
| | - If given the option to restrict your API key - currently you won't be able to use Application restrictions, but you can set an API restriction to only allow the ''Geocoding API''. |
| |
| |
| ===== Create allowed address area polygon ===== | ===== Create allowed address area polygon ===== |
| 1. Head to https://www.google.com/mymaps, and log in, or create an account if you don't have one already. | |
| 1. Create a new map | 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. |
| 1. In the editor, zoom to the area that you want to create your allowed shipping area. | |
| 1. Click the "Draw a line" button (the icon with three dots and lines joined together) and select "Add line or shape" | - Head to https://www.google.com/mymaps, and log in, or create an account if you don't have one already. |
| 1. Click on the map to create an area, completing the area by clicking back on the first point you made. Once you complete the shape, it should become a shaded area on the map - this is the area that you will allow shipping to. | - Create a new map |
| 1. Click the 3 vertical dot menu icon in the map panel in the top left, and select "Export to KML/KMZ" | - In the editor, zoom to the area that you want to create your allowed shipping area. |
| 1. In the dropdown of the export panel, select the layer that your polygon is on - unless you specifically named it, it will probably be called "Untitled layer" | - Click the "Draw a line" button (the icon with three dots and lines joined together) and select "Add line or shape" |
| 1. Check the box labelled "Export as KML instead of KMZ. Does not support all icons." | - Click on the map to create an area, completing the area by clicking back on the first point you made. Once you complete the shape, it should become a shaded area on the map - this is the area that you will allow shipping to. |
| 1. Click Download to download the file to your computer. | - Click the 3 vertical dot menu icon in the map panel in the top left, and select "Export to KML/KMZ" |
| 1. Open the downloaded file in a code or text editor on your computer, and look for the ''coordinates'' section of the XML, it'll look like this:<code xml> | - In the dropdown of the export panel, select the layer that your polygon is on - unless you specifically named it, it will probably be called "Untitled layer" |
| | - Check the box labelled "Export as KML instead of KMZ. Does not support all icons." |
| | - Click Download to download the file to your computer. |
| | - Open the downloaded file in a code or text editor on your computer, and look for the ''coordinates'' section of the XML, it'll look like this:<code xml> |
| <Polygon> | <Polygon> |
| <outerBoundaryIs> | <outerBoundaryIs> |
| </LinearRing> | </LinearRing> |
| </outerBoundaryIs> | </outerBoundaryIs> |
| </Polygon> | </Polygon></code> |
| 1. Copy the values within the ''coordinates'' node (of your file, not the example code above), and paste it into a new file. | - Copy the values within the ''coordinates'' node (of your file, not the example code above), and paste it into a new file. |
| 1. Wrap each line in square brackes, and add a comma at the end, so it looks something like this:<code>[-73.9546793,40.8478817,0], | - Wrap each line in square brackes, and add a comma at the end, so it looks something like this:<code>[-73.9546793,40.8478817,0], |
| [-74.0205973,40.741837,0], | [-74.0205973,40.741837,0], |
| [-74.0549296,40.6304119,0], | [-74.0549296,40.6304119,0], |
| [-73.8297098,40.6481274,0], | [-73.8297098,40.6481274,0], |
| [-73.8599223,40.799039,0], | [-73.8599223,40.799039,0], |
| [-73.9546793,40.8478817,0],</code> | [-73.9546793,40.8478817,0]</code> |
| 1. We'll come back to this code in the next step | - We'll come back to this code in the next step |
| |
| ===== Build custom shipping code ===== | ===== Build custom shipping code ===== |
| 1. Open your store's Foxy administration and head to the "shipping" section | |
| 1. If it's not already enabled, enable the "use custom code" option at the bottom of the page. | Now for the fun part - adding the custom shipping code to your store! |
| 1. Copy and paste the following code into the code editor that appears:<code javascript>// Google Maps API key | |
| | - Open your store's Foxy administration and head to the "shipping" section |
| | - If it's not already enabled, enable the "use custom code" option at the bottom of the page. |
| | - Copy and paste the following code into the code editor that appears:<code javascript>// Google Maps API key |
| const google_maps_api_key = ''; | const google_maps_api_key = ''; |
| // Shipping area polygon | // Shipping area polygon |
| return oddNodes; | return oddNodes; |
| }</code> | }</code> |
| 1. Update the line of code ''const google_maps_api_key = %%''%%;'' to use your Google Maps API key you generated above, pasting it within the quotations. | - Update the line of code ''const google_maps_api_key = %%''%%;'' to use your Google Maps API key you generated above, pasting it within the quotations. |
| 1. 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> |
| 1. 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'; |
| // Shipping area polygon | // Shipping area polygon |
| [-73.9546793,40.8478817,0], | [-73.9546793,40.8478817,0], |
| ];</code> | ];</code> |
| 1. 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'); |
| rates.error("Sorry, we're unable to deliver to your address"); | rates.error("Sorry, we're unable to deliver to your address"); |
| }</code> | }</code> |
| 1. Save your custom shipping code | - Save your custom shipping code |
| 1. Wait 15-20 seconds and refresh the page to ensure the shipping code has saved (it's a separate system so takes a moment to initialize) | - Wait 15-20 seconds and refresh the page to ensure the shipping code has saved (it's a separate system so takes a moment to initialize) |
| 1. If you haven't already, you'll also need to update any categories that will use this shipping rate code to have a delivery type of "Shipped using live shipping rates". | - If you haven't already, you'll also need to update any categories that will use this shipping rate code to have a delivery type of "Shipped using live shipping rates". |
| |
| ===== Add custom template code ===== | ===== Add custom template code ===== |
| | |
| As a last step, you'll just need to add in some custom code to your store. The lookup relies on the customers address line 1, which isn't currently sent to the shipping rate endpoint natively. We'll add some custom code to make it pass over, and also hide the shipping estimate on the cart, so it's only calculated after the customer has entered their full address. | As a last step, you'll just need to add in some custom code to your store. The lookup relies on the customers address line 1, which isn't currently sent to the shipping rate endpoint natively. We'll add some custom code to make it pass over, and also hide the shipping estimate on the cart, so it's only calculated after the customer has entered their full address. |
| |
| 1. In the Foxy administration, head to the "configuration" section | - In the Foxy administration, head to the "configuration" section |
| | - If not already, enable the "Add custom header and footer code to your templates" |
| | - In the "custom header" section, paste this code after any existing code you have in that field:<code css><style type="text/css"> |
| | #fc .fc-sidebar--cart .fc-address-entry { |
| | display: none; |
| | } |
| | </style></code> |
| | - In the "custom footer" section, paste this code after any existing code you have in that field:<code javascript>{% if context == "checkout" %} |
| | <script> |
| | FC.client.on("render.done", function() { |
| | $("[name^='shipping_address1']").attr("data-fc-shipping-custom-field", true); |
| | }); |
| | |
| | FC.client.on("checkout-shipping-options-update", function() { |
| | return $('[data-fc-shipping-custom-field]:visible').filter(function() { |
| | return this.value == ""; |
| | }).length == 0; |
| | }); |
| | </script> |
| | {% endif %}</code> |
| | - 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. |
