User Guide of Magento 2 Store Locator Extension

General Configurations

At the backend, go to FME EXTENSIONS > Configurations. Here you can find the extension configurations.

General Settings

Module Enable: Select ‘Yes’ or ‘No’ to enable or disable the extension, respectively. If the extension is disabled, users will not be able to view or change any modes from the back end and will be redirected to the store’s main page.
Page Title: Add the title you want to display on the front end.
Meta Keywords: Enter your meta keywords.
Meta Description: Enter your meta description.
Page Heading: Add the main heading to display on the front end. Note: This will be the primary heading of the Google Map Store Locator page.
Page Subheading: Add the subheading to display on the front end.
Standard Latitude: Set the default latitude for the store listing page focus on the Google Map.
Standard Longitude: Set the default longitude for the store listing page focus on the Google Map.
API Key: Enter the Google Maps API key. This key is used throughout the extension wherever data from the Google Maps API is required.
Map Zoom: Set the default zoom level for the store listing page on the Google Map.
Store Image: Upload an image to display with the store listing data.
Marker Image: Upload an image to use as a marker on Google Maps for the store listing page and store detail page.

Search

Default Radius: This defines the radius within which stores will be searched on the listing page and tag listing page. Searches will be limited to stores within this specified radius by default.
Maximum Radius: This sets the maximum allowable radius for searches on the listing page and tag listing page. Stores beyond this radius will not be included in the search results.

Manage Links

Enable Footer Link: Select ‘Yes’ or ‘No’ to enable or disable the footer link.
Footer Link Label: Specify the text to be used as the label for the footer link.

Search Engine Optimization

Store Identifier: Enter the identifier that will be used to access the store listing page on the front end.
URL Suffix: Specify a suffix (e.g., .html) to be added to the store identifier URL.
Tag URL Prefix: Define the prefix to be used for tag URLs.

How to Add Stores?

In the backend, navigate to FME EXTENSIONS > Manage Store. Here, you can view all the stores created for the extension. You can Edit, Delete, Import, or Export stores, or click the Add New Store button to create a new store.

add new.png

Provide the following information to create a store.

Enable Store: Select ‘Enable’ or ‘Disable’ to activate or deactivate the store.
Store Title: Enter the title of the store.
URL Key: Specify the unique URL key for the store.
Store Views: Select the store views where this store will be displayed.
Store Address: Enter the address of the store.
Store Description: Provide a description for the store.
Store Phone: Enter the phone number of the store.
Zoom Level: Define the zoom level for the map display.

store details.png

Google Map Settings

Latitude: Enter location latitude
Longitude: Enter location longitude
Search Field: Enter a Location, drag the marker to populate the latitude and longitude in the form fields

google map.jpg

Meta Information

Meta Description: Provide a meta description
Meta Keyword: Provide meta keywords

Store Timings

Select Store Timings: Select working hours of the store.

Store Tags

Specify tags for the store. Users can search stores by tags also.

Store Holidays

Specify holidays for the store.

Store Products

Attach products to the store.

attach products.png

How to Add Tags

In the backend, go to FME EXTENSIONS > Tags. Here, you can view all the tags for the extension. You can Edit or Delete any tag, or click the Add New Tag button to create a new tag.

add tags.png

Provide the following information:

Tag Title: Provide the tag title
Tag Description: Provide the tag description
Image: Upload image for the tag

tag form.png

How to Add Holidays?

In the backend, go to FME EXTENSIONS > Holiday. Here, you can view all the holidays for the extension. You can Edit or Delete any holiday, or click the Add New Holiday button to add a new holiday.

add holidays.png

Provide the following information:

Enable Holiday: Enable or disable the holiday.
Is a Special Holiday: Mark the holiday as a special holiday.
Start Date: Set the start date for the holiday.
End Date: Set the end date for the holiday.
Vacation Name: Provide the name of the holiday.
Explanation: Provide a description or explanation for the holiday.

holiday details.png

How to Add Timetable?

In the backend, go to FME EXTENSIONS > Timetable. Here, you can view all the timetables for the extension. You can Edit or Delete any timetable, or click the Add New Timetable button to create a new one.

add timetable.png

Enable Timetable: Enable/Disable timetable.
Timetable Name: Provide name for the timetable.

GraphQL APIs

1. Fetch Active Stores with Tags

Description: This GraphQL query fetches a complete list of all active stores along with detailed store information. It also retrieves associated tag data for each store, including tag name, description, and image. Useful for displaying store listings with categorized tags on the frontend.

Query

{  
  get_all_stores {  
 identifier  
 store_name  
 city  
 zip  
 state  
 address  
 store_description  
 image  
 country  
 website_url  
 store_phone  
 email  
 parking_availability  
 atm  
 new_arrivals  
 payment_methods  
 latitude  
 longitude  
 zoom_level  
 meta_description  
 meta_keyword  
 tags_info {  
   tag_name  
   tag_description  
   tag_image  
 }  
  }  
}

2. Retrieve Store Details by Identifier

Description: This GraphQL query retrieves detailed information of a specific store by its identifier. It includes store metadata, weekly opening hours, holidays, tags, and associated products. Perfect for rendering a detailed store profile page with dynamic timing and tag info.

{  
  store_detail(identifier: "istore") {  
 identifier  
 store_name  
 city  
 zip  
 state   
 address  
 store_description  
 image  
 country  
 website_url  
 store_phone  
 email  
 parking_availability  
 atm  
 new_arrivals  
 payment_methods  
 latitude  
 longitude  
 zoom_level  
 meta_description  
 meta_keyword  
 timetable_name  
 monday_open_time  
 monday_close_time  
 monday_break_time  
 monday_offbreak_time  
 tuesday_open_time  
 tuesday_close_time  
 tuesday_break_time  
tuesday_offbreak_time  
wednesday_open_time  
wednesday_close_time  
wednesday_break_time  
wednesday_offbreak_time  
thursday_open_time  
thursday_close_time  
thursday_break_time  
thursday_offbreak_time  
friday_open_time  
friday_close_time  
friday_break_time  
friday_offbreak_time  
saturday_open_time  
saturday_close_time  
saturday_break_time  
saturday_offbreak_time  
sunday_open_time  
sunday_close_time  
sunday_break_time  
sunday_offbreak_time  
store_products  
store_tags {  
tag_name  
tag_description  
tag_image  
}  
store_holidays {  
holiday_name  
holiday_description  
holiday_start_from  
holiday_ends_to  
holiday_is_special  
}  
}  
}

3. Fetch Stores by Tag Name with Full Details

Description: This GraphQL query fetches all stores associated with a specific tag name. It returns detailed store information, including location, contact, services, and SEO data. Useful for filtering and displaying stores by category or interest tag.

Query

{  
  stores_by_tag(tag_name: "Texas") {  
 identifier  
 store_name  
 city  
 zip  
 state  
 address  
 image  
 store_description  
 country  
 website_url  
 store_phone  
 email  
 parking_availability  
 atm  
 new_arrivals  
 payment_methods  
 latitude  
 longitude  
 zoom_level  
 meta_description  
 meta_keyword  
  }  
}