[urlSync] create widget

This widget should be able to keep the url in sync with the helper state.

API

// Setting some parameters
instant.addWidget(
  instantsearch.widgets.urlSync({
    // Parameters to be serialized and read from the URL
    trackedParameters : [
      // Any parameters of the SearchParameters can be chosen. Most likely to be chosen : 
      "query",
      "page",
      "hitsPerPage",
      // Also the index, as it can be changed for sorting purpose but is not in the SearchParameters
      "index",
      // Facets can be set through the usage of different widgets. But the user don't know much about that, only that it is based on an attribute
      "facet:myAttribute",
      // For simplicity sake, we can choose to track all the facets.
      "facet:*"
    ],
    // Minimum time after which we do a new serialization of the parameters into the URL
    timeout : 1000,
    useHash : false // should the url use #
  })
);

But with the use of default parameters, using the url sync is as simple as that :

instant.addWidget(instantsearch.widgets.urlSync());

Lifecycle hooks

Init

The url sync needs to override the defaults parameter set by any other components. So it should always come last in the initialisation.

Update of the URL

The update should take place each time there is an update of the SearchParameters. I’m not sure that the render would be the best time to update, and would prefer having it on the change of the helper (or any lifecycle we could implement that would mirror that event)

We could use _.debounce with the trailing and leading set to true.

Previous work

There is already an initial implementation, that could be used for bootstraping this widget.

https://github.com/algolia/algolia-ui-kit/blob/master/src/setup/url.js

[vvo]

always bet on PHP

[redox]

Just tested it on the Magento integration, and we had also all the refinements. I’m OK keeping p and q.

Wait, it seems to be caused by our PHP code actually 😃