Getting `routeToState` to work with `hierarchicalMenu` refinements

Hello all,

I’m trying to figure out how to use the new routing logic to properly pass back hierarchal refinements on page load.

If you take a look at this example: https://codesandbox.io/s/005py264m0 straight from “Routing and urls” section of the documentation, you’ll see that when you refine the search, then refresh the page, it properly re-populates the refinements. I can get stateToRoute() working just fine, just not routeToState()

Here is the code I’m using that’s relevant to this question:

routing : {
	stateMapping : {
		stateToRoute : function(uiState) {

			return {
				q: uiState.query,
				category: uiState.hierarchicalMenu && uiState.hierarchicalMenu['taxonomies_hierarchical.product_cat.lvl0'].join('~'),
				idx: uiState.page
			};

		},
		routeToState : function(routeState) {

			return {
				q: routeState.query,
				hierarchicalMenu: {
					category: routeState.category && routeState.category.split('~')
				},
				idx: routeState.page
			};

		}
	}
},

I’ve tried multiple variations, but I can’t get it to work when it’s hierarchal. Any insight is welcome.

Thanks,

  • Lucas

Ha, figures, I had an epiphany after I wrote that post and was able to figure it out, so for those looking for the same thing, the routeToState() looks like this:

routeToState : function(routeState) {

	return {
		q: routeState.query,
		hierarchicalMenu: {
			'taxonomies_hierarchical.product_cat.lvl0': routeState.category && routeState.category.split('~')
		},
		idx: routeState.page
	};

}

This seems to do the trick.