User Tools

Site Tools


Sidebar

magento_2:store_locator

For more details see the Store Locator for Magento 2 extension page.

Store Locator for Magento 2

Let customers know about location of the nearest offline stores where your products are available. Display stores on a Google map and provide extra information for each location to enhance shopping process.

  • Utilize Geo IP data
  • Provide extra store information
  • Assign products and categories to certain store locations
  • Attach images to store locations
  • Highlight stores on a map with different colors

Extension Configuration

To configure the extension settings please go to Stores → Configuration → Amasty Extensions → Store Locator.

General

Frontend Locator URL — specify the frontend URL for a store locator page. This value will influence frontend URL of the store locator page. If you leave this field blank then default URL should be amlocator and look like:

http://example.com/index.php/amlocator

Meta Description — fill in the meta description for the store locator page;

Meta Title — fill in the meta title for the store locator page.

The store locator page is available from all product pages around your store under the Available in stores link.

Geolocation

Use Geo IP — allows using Geo IP data which is very useful for the cases when a customer’s browser doesn’t provide location data; Use Browser Location — set this option to ‘Yes’ to use customers’ browser location data.

Main settings

Distance Units — set default distance units (kilometers/miles) or enable users to specify the units on the frontend;

Google Mark Template — define the template for the Google mark that will be displayed for each store location on the map. See details.

Store List Template — specify the stores' info you want to display in the store list. Add the necessary variables and remove the ones you don't need;

Attribute Template — choose the template for the tags-attributes that will be displayed for each store location on the map;

Frontend product URL text — specify the text for URLs that will be displayed on product pages. The links will redirect customers to the map with offline stores which sell corresponding products;

Open frontend URL on a new page — enable to open frontend URL on a new page;

Google API key — insert Google API Key. Please use this page to get a key;

Map Zoom — define the resolution at which the Google Map will be displayed;

Show additional attributes — display phone number, URL, and e-mail on the store list in the sidebar;

Text for shops which don't work in particular day — specify the text to display when a shop doesn't work in a particular day;

Search Radius — define the available search radius values;

Convert time format to 12 Hours AM/PM format on frontend — enable this option to utilize the AM/PM format for time on the frontend.

Please, make sure to fill in the Google API Key field correctly in order to make the extension functional.
You can specify main settings for different store views. When the store view is chosen, you can configure settings for it.

To edit settings for a certain store view unflag the corresponding checkboxes.

Setting Google Mark Template

With the extension, you can display additional information in a popup (e.g. phone, website, email).

To configure the popup you will need to add the following information about a marker with a text description to the modules' configuration Google Mark template. For example:

Phone number: {{phone}} </br>
Email: {{email}} </br>
Website: {{url}} </br>

The whole list of the available fields to display in the popup:

  • name
  • photo
  • country
  • state
  • city
  • zip
  • address
  • phone
  • email
  • website
  • description
  • lat
  • lng

In some cases you may have locations with and without a phone number. To display the number only when it exists, please, use this construction:

**{{ifphone}}{{phone}}{{/ifphone}}**

Style Settings

To adjust the store locator display, you can additionally configure the following options:

Map Width — specify the width of the map block;

Map Height — specify the height of the map block;

Store List Width — define the store list width;

Store List Height — define the store list height.

Importing Geo IP Data

Databases are needed for the correct work of the Store Locator module. Please download the necessary files from Amasty or from your own source. To add the files, please go to Stores → Configuration → Geo IP Data

Hit the Download and Import button to get databases from Amasty.

To import files from your own source, use the Import option. Choose the database files and click the Import button.

Creating New Locations

To create a new store location please go to Content → Store Locator and hit the Add New button or click the necessary location to start editing it.

Each store locator location consists of five tabs that should be configured to add data on a map. Let's do this step by step.

General Information

Specify the following data to provide information about certain location. Required fields are marked with *.

Location Name Description Status
Store View Zip Position
Country Address Phone Number
State/Province Email Address Image
City Website URL

You can use the Status option to quickly enable or disable certain store locations.

Then, switch to the Location on the Map tab to proceed.

Location on Map

The exact location coordinates will be defined automatically when you specify the location address and hit the Auto Fill button. It’s also possible to set them manually. Fill in the required Latitude and Longitude values.

Also, you can choose the desired location marker under the Custom marker option.

If everything is set up correctly you will see the location on a Google map.

Available Products

You can skip this tab if you need all products to be available. Alternatively, in case some products are available only in specific offline stores, you can assign them to the necessary store location with the help of conditions.

Store Schedule

The Store Schedule tab allows you to specify working schedule for each store location.

Store Attributes

Here you can specify additional store location details. E.g. parking availability, payment methods, brands, etc.

On top of that, with the extension, you can configure extra attributes to display them on a map. Go to Content → Amasty Strore Locator → Store Locator Attributes to edit already existing store attributes or create a new one.

The process of attribute configuration is quite simple. You need to:

  • Fill in the Default Label
  • Define the Catalog Input Type (supports Text Field, Text Area, Date, Yes/No, Multiple Select, Dropdown)
  • Enable or disable a condition to require values
  • Configure the desired options

Hit the Save button to finish configuring the attribute. Now, you can use it in the Store Attributes tab of your locations.

Store Locator Widget

With the extension, you can add the store locator section to any page of your site as a widget. Please, go to Content → Widgets to create a new one. Hit the Add Widget button.

First, set the Widget Type to Amasty Store Locator and choose your current theme in the Design Package/Theme dropdown.

Then, please, specify the Widget Title, choose stores in the Assign to Store Views menu, and define the Sort Order if needed.

When done, hit the Add Layout Update button. Next, select required place to add widget to in the Display on dropdown menu and specify the rest details.

Next, please, proceed to the Widget Options tab. Here you can adjust the store locator widget functionality and look with the following options:

  • Show Store List On Widget
  • Show Nearby And Radius Filter
  • Store List Width
  • Store List Height
  • Map Width
  • Map Height
  • Widget Description
  • Enable Widget Block Wrapping
  • Link Text In Widget

When done, please, click the Save button.

Adding Widget to Pages and Blocks

Please, go to Content → Pages or Content → Blocks in order to add the store locator widget to pages or blocks respectively.

Select the required page or block (or create the new one if needed), than proceed to the Content section.

Use the Insert Widget button in the Show Editor mode to add a new widget and adjust the same settings as for the new widget.

Import

You can import various Store Locator data from other Magento 2 installations. Go to System → Data Tranfer → Import.

Supported .CSV IDs

To import data you will need the correct .CSV file.

Set Entity Type as Amasty Store Locator. Use the Download Sample File link to get the example of the correct .CSV file that can be imported to the Store Locator module.

Download the correct .CSV file: amasty_storelocator.zip

Generally, you can utilize the following IDs as new columns in the .CSV file and specify their values to add store locations and modify their details:

id address lng marker_img
name state lat
country description stores
city phone status
zip email store_img
You can find the list of country codes here.
You can use the custom marker image using the marker_img column during the import.

Then, you can specify Import Behaviour:

  • Add/Update — this option is used to add new or update existing files;
  • Replace — this option is used to replace the original file with the new one;
  • Delete — this option is used to delete certain files of the same name.

Also, you need to specify whether the import process should stop in case of an error or skip error entities. Moreover, you can define the number of errors to halt the import process.

Then, you need to select files to import using the Choose File button and hit the Check Data button.

Attributes Import

The Store Locator extension for Magento 2 allows you to import store attributes. Follow this step by step guide for details:

  1. To import attributes you should create the corresponding attributes in the backend of your store;
  2. Then, please, download and unzip the example: attributes-to-import.zip;
  3. In the CSV file to use for import you should name columns as your existing attribute_codes;
  4. For each location you need to specify values according to the attribute type.

For text field you can specify just a value. In case of select or multiselect you will need to specify the attribute's option_id.

Map Customization

You can customize the map appearance to fit your store pages design.

The described below method requires special skills. So, please, make sure you have ones before proceeding to the next steps. Your actions can ruin the functionality of the module. Always make a backup of the files you are going to modify to have the ability to restore the default configuration.

Usually, Google Map styles look like that:

[{"stylers":[{"saturation":-100},{"gamma":0.8},{"lightness":4},{"visibility":"on"}]},{"featureType":"landscape.natural","stylers":[{"visibility":"on"},{"color":"#5dff00"},{"gamma":4.97},{"lightness":-5},{"saturation":100}]}]

You can find custom styles on the web or create yourself but it requires special knowledge.

When you get the required styles, please, go to your server and find the main.js file in the extension folder. The full address depends on where you've installed the extension: /app/code/Amasty/Storelocator/view/frontend/web/js/main.js /vendor/amasty/storelocator/view/frontend/web/js/main.js

Then, find the myOptions variable in the initializeMap method. Here, you need to paste your custom style. The massive key is = styles.

Save changes and check the result on the frontend.

Frontend View

The extension affects product pages and provides customers with additional information related to offline stores inventory and their details.

Customers can filter stores using certain predefined attributes.

Locate Nearby button uses customer's current geolocation data based on IP address to locate the nearest stores from the list. However, the list will include all stores sorted by distance. Please note that this feature requires the Geo IP database to be installed. See this section for more information.

Please, note, that the Locate Nearby button works only when you are using HTTPS.
Remember, that you can also configure the information about the stores displayed in the store list left to the map. Go to Stores → Configuration → Store Locator → Main Settings and specify the necessary values in the Store List Template field.

Troubleshooting

Sometimes, it is unable to complete the database import due to execution time limit of PHP scripts. You can avoid this error by increasing the maximum execution time for your PHP scripts.

You need to set the max_execution_time to the number of seconds that all your scripts are allowed to run in your PHP's configuration file. The file location may differ from system to system but in general you need to find the PHP.INI file and modify it.

We need to set the value to 18000.

For example:

; Maximum execution time of each script, in seconds
; http://php.net/max-execution-time
; Note: This directive is hardcoded to 0 for the CLI SAPI
max_execution_time = 18000

Setting the value to 0 means there's no time limit.

You'll have to restart your web server for this solution to work.


Find out how to install the Store Locator extension via Composer.

Rate the user guide
 stars  from 1 votes (Details)
magento_2/store_locator.txt · Last modified: 2018/10/09 08:10 by karpova