How to load search result based on user location by default

Question

I want to load the search results by user’s current location by default or first time when user lands on the page.

Does Sitecore supports this feature OOTB or or any custom solution available?

I’m thinking of custom filter with no UI just JavaScript part, where Filter will be responsible for getting the user location and update the hash of the URL with coordinates.

Do you see any issue with this approach?

Please provide your suggestions or idea.

SXA 1.9

Answer 1

I'm not aware of an ootb solution. What you could do is create a custom search token that handles the logic you need. You can add that token to the search scope that you use for the search components.

More info: https://ggullentops.blogspot.com/2019/01/extending-sxa-search-query-tokens.html

You need to create a ResolveSearchQueryTokensProcessor. Override the public override void Process(ResolveSearchQueryTokensEventArgs args) method:

First you need to search your token (loop over all SearchStringModels in args.Model) Each SearchStringModel defines a part of the query and has a value, a type and an operation:

• the type of the SearchStringModel is the first part
• the value of the model is the second part (e.g. "ItemsWithTheSameValueInField|FieldName")
• the operation is "must", "should" or "not"

Once you found the model, you need to create a new one that can be send to the index and remove the one you handled. Building the search model is something like:

protected virtual SearchStringModel BuildModel(string fieldName, string fieldValue)
{
  var name = SomeBusinessLogicWithFieldName(fieldName);
  var value = SomeBusinessLogicWithFieldValue(fieldValue);
  return new SearchStringModel("custom", FormattableString.Invariant(FormattableStringFactory.Create("{0}|{1}", name, value)))
  {
    Operation = "must"
  };
}

Add your processor the the <resolveSearchQueryTokens> pipeline and it should appear as option in the search tokens so you can add it to the scope.

In your case you'll need to add the location logic (or any other logic you want) to the BuildModel. That function is custom, so you can also arrange the parameters as you want. You just need to be able to pass everything from the Process method.

Answer 2

You can use the existing JS API. Take a look at how it is done in the Location Finder script (component-search-location-filter.js). Base on the mode it can translate the location name provided by the user or just detect current location. To detect the current location it is using HTML Geolocation API present in the browser (the code for it is located in component-location-service.js).

This is how you can get current user location for the user inside of your filter script:

XA.component.locationService.detectLocation(
     function (location) {
          ...
     },
     function (errorMessage) {
          console.log(errorMessage);
     }
);