Magento 2 Store Locator Extension
Introduction
Magento 2 Store Locator Extension helps shoppers find the nearest physical stores with your products on a handy Google map.
Installation
The extension has 2 separate ways of installation, via Composer or by copying the code.
Please follow this Installation Guide to install the extension.
Extension Configuration
Configuration Settings
To access the configuration settings of the extension, log into the Magento Admin panel and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Store Locator.
The module’s configuration contains four sections: General, Links, Map, and Product Page
General
Locator URL - specify the store locator URL in the frontend
Meta Title - define the meta title of the store locator page
Meta Description - specify the meta description of the store locator page
Links
Show Locator Link in Top Links - set "Yes" to show the store locator link at the top links of the page, and define the Link Text to appear at the top link
Show Locator Link in Footer - set "Yes" to show the store locator link at the footer of the page, and define the Link Text to appear at the footer link
Map
Google Maps API Key - insert your Google Maps API Key. Please check how to get the API key at the API Configuration section;
Zoom Levels - define the initial resolution at which a map will be displayed. Eg: from 1 to 20. You can check the most common values with a zoom level of Google Map: here
Search Radius - define the available search radius values, separated with a comma;
Closed Store Text - specify the text to appear when a store doesn't work on a specific day;
Use AM/PM for schedule time - if "Yes", the store schedule time will use the AM/PM format. Eg 6:22 am - 10:05 pm
Product Page
Display location block at product page - if "Yes", the locator link will show at the product page if there is a store assigned to the product
Location Text - define the text to appear at the location link. Eg "Available In Stores"
Open URL on new tab - set to "Yes" to open URL at new tab or page on click, or "No" to open at the current tab
Managing Locations
To view, edit or create a new location, please go to CONTENT ⟶ Locations.
Click "Add New" button to create a new location. The location contains General, Address, Products, and Schedule tabs.
General
In the General tab the following settings are available :
Active - choose "Yes" to enable the location in the storefront or "No" to disable it;
Name - defines the name of the location that will be shown on the storefront;
Description - defines the location description;
Show Schedule - choose "Yes" to show the schedule for this location or "No" to hide it;
Image - upload the location image;
Store Views - select store views the location will be displayed at;
Sort Order - specify the position of the location. 0 is the highest position;
Address
Choose the location Country, State/Province.
Specify the location Street, City, and Zip/Postal Code
In Phone field, enter the location phone number. Example: +44 20 7660 4453. If empty "null" will display.
In E-mail field, enter the location email. Example: [email protected]. If empty "null" will display.
In Website Url field, enter the location site url. Example: mysite.com. If empty "null" will display.
Click the Auto Get From Address to automatically coordinate from the address specified above. You can also define the coordinates manually by filling in the required Latitude and Longitude values.
Upload a Custom marker to override the default marker for the location. You can choose the desired location marker
Products
You can leave blank (If ALL of these conditions are TRUE :) to assign the location to all products. In case some products are available only in the location, you can add the conditions that the product should meet to be included in this location.
Schedule
In the Schedule tab, you can specify the working schedule for the location
Monday - Friday opening and closing hours
Saturday - Sunday opening and closing hours
Prepare CSV Import File
Before you import locations via a CSV file, you need to prepare the CSV file.
To download the sample location file :
- go to SYSTEM ⟶ System⟶ Data Transfer ⟶ Import
- In Import Settings -> Entity Type field, select "Store Locator by Ulmod" entity
- Click Download Sample File link that is close to the Entity Type field, the sample location CSV file (eg. ulmod_storelocator.csv) will be downloaded
Please edit the CSV file to import on google docs or similar tools. If you edit on google docs, make sure to download as CSV (File ⟶ Download as ⟶ Comma-separated values(.csv, current sheet))
| Field /Column Heading | Data | Meaning |
| id | Eg. 1 | Required to enter data if Import Behavior type: Replace or Delete is used.
No record will be replaced/delete if empty |
| name | Eg. Store Computer Shop |
Location name |
| country | Eg. US |
Country code. You can find the list of country codes here. |
| city | Eg. Washington |
City |
| zip | Eg. 20001 |
Zip code. |
| address | Eg. 2501 Oakridge Farm Lane |
Address |
| status | 1 = enabled; 0 = disabled |
Status |
| lat | Eg: 39.226402 |
Latitude. Leave empty to auto get from address (country, city, zip, address) |
| lng | Eg: -80.571313 |
Longitude. Leave empty to auto get from address (country, city, zip, address) |
| position | Eg: 1 |
Location sort order |
| state | Eg: Washington |
State |
| description | Eg: The meats are delicious and fresh! |
Location description |
| phone | Eg: 262-284-9903 |
Location contact phone |
| Eg: [email protected] |
Location contact email |
|
| website | Eg: website2.com |
Location website URL |
| store_img | Eg: storelocation.png |
Location image. If specified, make sure that the filename exists under "pub/media/ulmod/umlocator/" directory. Eg. pub/media/ulmod/umlocator/storelocation.png. Leave empty for no image |
| stores | Eg: ,1, |
Store view(s) to which the location will be assigned. Use store_id. Eg if you want to assign to the store_id = 1, use this: ,1, To assign to store ids 1, 2 and 3, use: ,1,2,3, To assign a location to all store view use: ,0, |
| schedule | Eg: {"monday":{"from":["01","15"],"to":["06","11"]},"tuesday":{"from":["00","00"],"to":["00","00"]},"wednesday":{"from":["00","00"],"to":["00","00"]},"thursday":{"from":["00","00"],"to":["00","00"]},"friday":{"from":["00","00"],"to":["00","00"]},"saturday":{"from":["00","00"],"to":["00","00"]},"sunday":{"from":["00","00"],"to":["00","00"]}} |
Location schedule. Replace each time by keeping the format. |
| marker_img | Eg: custommarker.png |
Custom location marker image. If specified, make sure that the filename exists under "pub/media/ulmod/umlocator/" directory. Eg. pub/media/ulmod/umlocator/custommarker.png. Leave empty for no custom marker |
| show_schedule | 1 = yes; 0 = no |
Show schedule in frontend |
Import Locations
To import locations, please go to SYSTEM ⟶ Data Transfer ⟶ Import.
In the Entity Type field, select Store Locator by Ulmod.
You can Download Sample File to get the example of the correct CSV file that can be imported. While preparing your CSV import file, make sure that the column headings are spelled correctly. Check the sample import file for more details.
Specify Import Behaviour:
- Add/Update - this option is used to add new locator to the database;
Choose to Stop on Error or Skip error entries when an error is encountered when importing data
In the Allowed Errors Count field, specify the number of errors that can occur before the import is canceled. The default value is 10
In the Field separator and Multiple value separator, accept the default value of a comma (,)
Leaves the Fields Enclosure field unchecked by default. Or, if you want to enclose any special characters that might be found in the data as an “escape sequence, you can mark/check/tick that Fields Enclosure field.
In the Select File to Import field, upload the CSV file that you've prepared to import and click the Check Data button to validate. When the validation is complete, click the "Import" button to import the file.
The location file will be imported.
You can check the locations imported under CONTENT -> Locations grid.
Make sure to flush your cache before checking the locations imported in the frontend.
Frontend View
Once the locations are created, they will display on the frontend
Index Page
Example of locations displaying in the index page
Product Page
If locations are assigned to a product, the location block will display on the product page providing customers with additional information related to physical stores and their details.
API Configuration
How Configure Google Maps API
To show locations in the map, you'll need to get the Google API Key, please follow these steps:
Step 1
Please go to Google Cloud Platform and log in
If you have an existing project, select it in the Select a project dropdown, or click the NEW PROJECT button to create a new project
Define the Project Name and click the CREATE button:
Step 2
Go to Google Places API and Maps JavaScript API and click the Enable button to enable both API
Step 3
Go to APIs & Services > Credentials, click the Create Credentials dropdown and select the API Key option
Step 4
A new API Key will be created
Click to open the API created
In the Application restrictions tab select the HTTP Referrers (websites) and add your website name
Step 5
In the API restrictions tab select the Maps JavaScript API and Places API. You can also select any APIs that can be called with the created key.
Step 6
Copy the created API key by clicking the ⧉ button and add the API key in the Map -> Google Maps API Key field under the extension settings
Extension Support
Need Help?
Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.
Got Questions?
Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!