StoreLocator (optional)
https://github.com/magesuite/store-locator
Storelocator module provides a separate page with Google map filled with markers for store subsidiaries. In the sidebar, there is a list of shops that are currently visible on the map. Thanks to search input a user can search for a specific location. Click on marker displays and information popup with a custom template that contains information about a specific shop.
Installation
This module is optional.
composer require "creativestyle/magesuite-store-locator" ^1.0.0Admin settings
The basic setting for the store locator page can be found in; Stores -> Configuration -> MageSuite -> Store Locator
Field | Option | Comment |
|---|---|---|
Is Enabled | Yes/No
| If disabled customer will be redirected to the Base URL. |
Meta title |
| Field is used to set meta tile for store locator page. |
Meta description |
| Field is used to set meta description for store locator page. |
Backend
In progress
Controller
vendor/creativestyle/magesuite-store-locator/Controller/Index/Index.php:34
class Index extends \Magento\Framework\App\Action\Action
{
public function execute()
{
$result = $this->pageFactory->create();
.....
if (!empty($this->configuration->getMetaTitle())) {
$result->getConfig()->getTitle()->set($this->configuration->getMetaTitle());
}
if (!empty($this->configuration->getMetaDescription())) {
$result->getConfig()->setDescription($this->configuration->getMetaDescription());
}
return $result;
}
}Frontend
Files structure
storelocator_index_index.xml is a store locator layout.
There are 2 container hotspots, which allow adding some project-specific content above and below the store locator:
<container name="before.store.locator" label="Above Storelocator map" htmlTag="div" htmlClass="cs-container cs-store-locator__before" before="-"/> The basic phtml file is MageSuite_StoreLocator::storelocator.phtml
Scripts and styles for the store locator module are located in theme-creativeshop, in theme-creativeshop/src/MageSuite_StoreLocator folder.
The store locator page uses cms bundle as a base. There is an additional separate entry file (theme-creativeshop/src/entries/magesuite-store-locator.ts) that generates store locator styles and scripts.
The store locator is initialized in store-locator/index.ts file. The class accepts 2 arguments - jquery dom element and optional options.
In order to pass custom options in a child project the above file should be overwritten.
Store locator page structure
The main HTML elements of the store locator are:
sidebar
sidebar toggle
search input
autocomplete
action buttons
results list
map
Screens and user journey:
When the StoreLocator class is initialized a google map is initialized on the DOM element with store-locator-map ID. Also _attachEvents method is executed - this method attaches events not directly connected to the map. There is for example sidebar toggle functionality or events connected with screen resizing.
Then graphql request is sent in order to fetch all stores and their details.
When the request succeeds response.data.storePickupLocations.items are assigned to this.stores array and _initMap method is executed. _initMap method takes care of creating markers on the map and also tries to set the user's location and zoom map to display shops in the area nearby the user’s current location. The left sidebar is then populated with shops visible on the map (up to limitOfShopsInitiallyDisplayed - see options section below).
If a number of shops that is visible on the current map zoom exceed the limitOfShopsInitiallyDisplayed limit, a show more button is added at the bottom of the sidebar list.
When a user searches for a location in the sidebar input the request is initialized in order to get the coordinates of the inserted query. The method responsible for the action is called searchButtonClickHandler. Then the script pan (zoom) to coordinates returned by the backend and sets the user location to this place. Additionally, distances for all stores are recalculated.
There is also autocomplete feature introduce in order to help a user quickly find the desired location. When a user types anything in the search form modified Magento search widget is executed (magesuite.quickSearch). The widget is modified in store-locator/form-mini.js file.
After clicking on a marker a popup with shop information is displayed.
Options (default values)
Option | Default value | Comment |
|---|---|---|
mapOptions → zoom | 7 | Initial zoom that is set when the map is loaded. It is usually quite small to show at least a greater part of an area where the majority of stores is located |
mapOptions → center | { lat: 51, lng: 9 } | Coordinates for initial central point of the map. By default they are set to show the most part of Germany. |
mapOptions → mapTypeControl | false | https://developers.google.com/maps/documentation/javascript/controls |
mapOptions → streetViewControl | false | https://developers.google.com/maps/documentation/javascript/controls |
mapOptions → fullscreenControl | false |
|
basicZoom | 13 | Desktop basic zoom is set when the map centers on a specific location (for example when the user is geolocalized or when we pan to a specific store or a location) |
basicZoomSmallDesktop | 12 | Tablet/small desktop map zoom. |
basicZoomMobile | 12 | Mobile zoom. |
useDefaultMapStyles | false | When set to true default google maps styles are used. If not, styles from store-locator/ map-style.js file are used. |
markerIcons |
|
|
clusterStyles |
| Styles for clusters (circles that groups stores ans show their amount if there is no space to show all markers separately) |
limitOfShopsInitiallyDisplayed | 50 | Browsers may have problems with rendering hundreds or thousands of store in the sidebar. If there is a lot os subsidiaries limit is necessary to avoid performance problems |
storeData |
| Fields included in graphql call |
In order to learn more about possible google map options visit: https://developers.google.com/maps/documentation/javascript