Magento 2 Store Locator Extension

Store Locator

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

email 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 (,)

Note: A comma is the default separator in a CSV file. If you want to use a different character, make sure that the data in the CSV file matches the character that you specify.

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!

Extension Product Page