STORE LOATOR For Magento 2 › pub › media › wysiwyg › ... · STORE LOATOR For Magento 2 ......

1

The document covers the information regarding store locator and its features with step-wise guidance.

STORE LOCATOR For Magento 2

PREFACE

Store locator also known as “store finder” empowers user to add unlimited stores with functionality of adding tags to differentiate them. It allows user to locate nearby central retail stores. These locators also provide information about store name, address of store, phone number, hours of operation and services provided by them, and sometimes directions to the location. Store locator shows the nearest offline stores. Users can filter and limit the search by specifying radius to get the optimized results. It permits you to enter longitude and latitude to get accurate location of store. With store locator users can easily find store location nearest to them and obtain directions by specifying actual address, zip code and radius with single click via google maps. Basically, it will help shoppers easily find the store locations by specifying highlighted store clumps with different colors.

2


FEATURES & HIGHLIGHTS

1. Introducing “Geo IP” tracking of location based on IP of user.

2. Auto-filling latitude and longitude of location based on address.

3. Feature to display distance in miles or kilometers to user.

4. Set default distance (Radius in Km/Miles) in backend and our extension will automatically search you

stores available in range of default distance set.

5. Trio of functionality – Search by Tags, Search by Radius and Search by both tags and radius.

6. Import/Export feature for store.

7. Map Directions option available for every store created.

8. Shows hours of operation of store for all the 7 days of week.

9. Displays payment modes available at store i.e. Cash, Debit/Master Card.

10. Get best available directions to the store for modes of travel i.e. Driving, Walking, Transit, Bicycling.

11. Custom marker Geo pin used as a symbol for indicating destination.

12. Offering different radius distance to increase/decrease the search range of locator.

13. Multiple Store and Multiple Website supported.

14. Provision to upload SVG images.

15. Geo IP option can be enabled and disabled.

16. Selected Radius/Distance can be highlighted in map based on configuration.

17. Google Maps Street View functionality provides interactive imagery view of different stores to users.

Note: - For “Geo IP” tracking, Website must be secured with HTTPS.

3


How to Install extension using COMMAND LINE?

1. Download the Store Locator extension.

2. Unzip the file in a temporary directory/folder with name as StoreLocator

3. Put Magenticity directory as per this folder structure:

project_root/app/code/Magenticity/StoreLocator

4. Disable cache from System >> Cache Management.

5. Give proper file permission.

6. Enter following in the command line from your magento_store_root :

php bin/magento setup:upgrade

7. Enter following in the command line in your magento_store_root to compile

the code: php bin/magento setup:di:compile


9. Enter following in the command line in your magento_store_root to generate

static files into your pub directory: php bin/magento setup:static-content:deploy


11. Enable/Refresh cache from System >> Cache Management.

12. Once all above steps are done, see the module (Store Locator) at Stores >>

Configuration >> Magenticity >> Store Locator, the extension will be shown in the

admin panel.

For Google Maps features to work please check pricing details at below link:

https://cloud.google.com/maps-platform/pricing/sheet https://developers.google.com/maps/billing/understanding-cost-of-use

Add Google API key for Map Authentication Google https://developers.google.com/maps/documentation/javascript/get-api-key

https://cloud.google.com/maps-platform/pricing/sheet

https://developers.google.com/maps/billing/understanding-cost-of-use

4


Display Store Details

Login into Magento Admin Panel and click on “Store Locator” located on left side of page.

Then click on “All Store Location” which will display list of created stores.

5


Add Store Location

In the above (screenshot) you will see “Create New Location” button clicking it will take you to Location Detail page where stores are created by inputting necessary information. You can also create store by clicking on “Add Store Location” as shown in (screenshot). You will have 4 tabs to fill the information for creating new Stores. Each tab has different fields.

1. General 2. Location Status 3. Google Maps Settings

4. Store Schedule

1. Let's begin with “General” tab.

6


In the above screen-shot of “General” tab, there are 3 fields mentioned.

◦ Name - Here you must enter the store name within the limit of 50 characters.

◦ URL Key - Here you can write any name that you want to give in URL for store. Capital letters are not allowed.

In the above screenshot, URL key is location_1.

◦ Store Code - Here you can write any code for store. Example – store123.

7


Below is the image of next fields of “General” tab.

Here user must enter email and contact number of a store, Address with city where store is located, Pin code of the store, Country and State where store exists. 2. Moving forward we have “Location Status” tab.

8


◦ Is Active - This field controls the displaying of details like store image, store details and hours of operations being shown in front end. When turned to “Disabled” it hides the details of store. ◦ Parking Availability - This field has 2 status that is Yes or No. If set to “Yes” means, there is parking facility available at the store. ◦ Payment Methods - User here can specify different payment methods available at store by writing down in the field. 3. Third we have “Google Maps Settings” tab.

9


◦ Description on Marker – Clicking on Marker a popup will appear showing description. See below image for example.

10


◦ About us – This information will be displayed when you click on “Map Directions” button of a specific store. See below image for example.

◦ Location Image - You can upload the store image using this option as you can see store image/location image in above screen-shot. ◦ Marker Image - Here you can upload custom marker image. These marker image will be shown in

maps at the point of your current location. ◦ Latitude and Longitude – Here you need to click on “Fill Latitude & Longitude” button which will auto detect it based on address, pin code, city and country details entered. To find them manually you need to click on blue color link. It will redirect you to https://www.latlong.net/convertaddress-to-lat-long.html. User need to enter address in order to get latitude and longitude.

11


◦ Store Tags - Indicates the category of store. Example store of pizza will have Food tag. Similarly store of mobile and gadgets will have Electronics tag. You can create store tags and give any name as per your choice. Functionality to search, Tag specific store is also provided. For Example – Clicking on “Food” tab will load stores coming under Food Category. ◦ Website - This field will contain the website URL if the store has its own website. ◦ Fax - Will contain Fax number widely used for pharmacy.

◦ Meta Title - Will contain the text that is shown at top of browser tab. ◦ Meta Description and Meta Keywords used for SEO purpose and to safely avoid Google crawling.

4. Last we have “Store Schedule”. ◦ Below is the screen-shot showing Open and Close time of stores day-wise. ◦ You can also set “Schedule Title” as Open or Close for stores or as per user's own choice.

12


Adding Google API Key, Tags and Radius

Go to Store Locator → Locator Setting and follow below screen-shot.

Importing Store

With the use of excel file user can import store with all its detail. Go to Store Locator → Import Location Under “Import Settings” section select “Store Locator Import” in “Entity Type” drop-down. Rest of the options

can be ignored as they are by default provided by Magento which are of no use for importing store. Under “Import Behavior” section select “Add/Update” in “Import Behavior” drop-down. Under “File to Import” section upload file by clicking “Choose File” button.

13


Export Feature

Once the stores are created the store details can be exported in different file formats such as XML, CSV and excel. Go to → Store Locator → All Store Location. Then in next page → Location page, you will see Export feature to the right side of page.

14


Upload SVG Images

To allow SVG images uploading for location marker and marker image Go to Store → Configuration → Advanced → Developer → Image Processing Setting → Image Adapter → select GD2NEW with SVG (Magenticity_StoreLocator) → Save Config.

Street View

Street view displays interactive images for a store when clicked on Street View button as shown below.

15


Street view allows to rotate view, zoom in/zoom out of map, path option to forward and backward.

Below are the criteria for street view to work

• Few countries do not allow street view functionality.

• Street view works based on system graphic card configurations. https://support.google.com/maps/answer/3096703 Above link contains minimum system requirements that are required for street view to work.

• Check your system graphics card and system properties using : https://help.sketchup.com/en/sketchup/how-can-i-find-out-which-graphics-card-i-have-my-pc

• If your graphic card is in the list of not supporting street-view. You can set browser setting as below, after changing these settings street view will load properly: Browser > Setting >> Use hardware acceleration when available >> Off.

https://support.google.com/maps/answer/3096703

https://help.sketchup.com/en/sketchup/how-can-i-find-out-which-graphics-card-i-have-my-pc

STORE LOATOR For Magento 2 › pub › media › wysiwyg › ... · STORE LOATOR For Magento 2 ......

Documents

Transcript of STORE LOATOR For Magento 2 › pub › media › wysiwyg › ... · STORE LOATOR For Magento 2 ......