Query your Stores
How to search and display stores using query by attributes and location bias.
Woosmap Store Locator JS API provides the woosmap.DataSource
class to fetch your assets from the Woosmap Data API. It does not need any parameters, just create a new object to
connect to the Data API.
const dataSource = new woosmap.DataSource();
This class has the method searchStoresByParameters() which takes as argument
a SearchParameters object describing your search.
All the available fields listed in the data api section can be queried.
Here is an example of combining search nearby a geocoded address (using Google Places Autocomplete) with filtering on specific tags.
Search for Nearby Stores
To search for stores nearby a latlng location, for example a geocoded address, you’ll need to build a
new SearchParameters object passing it the location properties and the number of stores to retrieve nearby the
position.
By this way, each returned store will have an extra field distance from the lat/lng point.
const dataSource = new woosmap.DataSource();
dataSource.searchStoresByParameters(
new woosmap.search.SearchParameters({
lat: 43.6,
lng: 3.883,
storesByPage: 10
}), (data) => {
//Here you get the 10 stores closest to the lat/lng provided
//Each stores in data.features will have an extra field 'distance' from the lat/lng point
});
To display on the Map the nearby stores and a marker for the searched location, set the properties 'stores'
and 'location' of the Woosmap TiledView.
const mapView = new woosmap.TiledView(map, woosmapOptions);
dataSource.searchStoresByParameters(searchParams, (data) => {
mapView.set('location', location); //The 'location' need to be set before the 'stores'
mapView.set('stores', data.features) //to display only the returned stores
});
To return the TiledView to its original display state, without any query or location marker, set the
properties 'stores' and 'location' to null.
mapView.set('location', null);
mapView.set('stores', null);
Search Stores by Attributes
Although you can build a querystring as required by the REST Search API, the
Woosmap JS Store Locator API provides the helper
class woosmap.query to ease the writing of
your woosmap.search.SearchParameters object.
Query Examples
The SearchParameters has a property called query where you’ll put your search query.
- With
ANDoperator - search for stores of types drive and click_and_collect.
const query = woosmap.query;
const searchQuery = q.and([q.F('type', 'drive'), q.F('type', 'click_and_collect')])
const searchParam = new woosmap.search.SearchParameters({query: searchQuery});
/* is equivalent to
const searchQuery = 'type:"drive" and tag:"click_and_collect"'
const searchParam = new woosmap.search.SearchParameters({query: searchQuery});
*/
- With
ORoperator - search for stores of types drive or click_and_collect.
const searchQuery = q.or([q.F('type', 'drive'), q.F('type', 'click_and_collect')])
//searchQuery.toString() will return '(type:"drive" OR type:"click_and_collect")'
- With
NOToperator - search for stores not of type drive.
const searchQuery = q.not(q.F('type', 'drive'))
//searchQuery.toString() will return 'NOT type:"drive"'
Map Display
To display only stores with given types and tags or any value
for supported searchable fields, implement
the TiledView.setSearchParameters({searchParams}) method. This method does not accept location bias (nearby
a lat/lng) but is useful when you don’t need to process the returned stores attributes.
const query = woosmap.query;
const searchQuery = q.and([q.F('type', 'drive'), q.F('type', 'click_and_collect')])
const mapView = new woosmap.TiledView(map, woosmapOptions);
mapView.setSearchParameters(new woosmap.search.SearchParameters({query: searchQuery}))
If you want to add a location bias or process the store attributes returned by your query, implement
the DataSource.searchStoresByParameters({searchParamas}) along with the TiledView property 'stores'.
const mapView = new woosmap.TiledView(map, woosmapOptions);
dataSource.searchStoresByParameters(searchParams, (data) => {
mapView.set('location', location); //The 'location' need to be set before the 'stores'
mapView.set('stores', data.features) //to display only the returned stores
});
Get Store By ID
The DataSource can also be used to simply retrieve a store data based on this ID.
const dataSource = new woosmap.DataSource();
dataSource.getStoreById("store_id_123456", (data) => {
//Get the store with the ID "store_id_123456"
});