Query your Stores

How to search and display stores using query by attributes and location bias.

  1. Search for Nearby Stores
  2. Search Stores by Attributes
  3. Map Display
  4. Get Store By ID

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.

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});
 */
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")'
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"
});
Was this article helpful?
Have more questions? Submit a request