I’d like to have my own, custom URL with search parameters. When I’ve set “routing”: true I’ve got a default URL (after selecting a filter) like this:
http://mysite.com/therapists/?wp_posts_allc_therapist[menu][taxonomies.allc_tax_area_of_specialty]=Stress
But with my custom routing I’ve got this:
http://mysite.com/therapists/area_of_specialty-stress/
But I’ve got a problem: when I enter main page http://mysite.com/therapists/ and then select an option like this:
URL is not updated and it’s still http://mysite.com/therapists/ but filter applied properly.
But when I click a “Reset” button (checkbox “All results” ) which evokes:
funds_search.helper.setQuery('');
refine();
And then when I select an option, URL is properly created: http://mysite.com/therapists/area_of_specialty-stress/
Here’s my routing:
routing: {
router: instantsearch.routers.history({
createURL({ qsModule, routeState, location }) {
const urlParts = location.href.match(/^(.*?)\/therapists/);
const baseUrl = `${urlParts ? urlParts[1] : ''}/`;
const taxonomiesPath = getTaxonomiesPath(routeState)
? `${getTaxonomiesPath(routeState)}/`
: '';
const pagePath = routeState[ wlcAlgoliaCpt.index_name ].page
? `page/${routeState[ wlcAlgoliaCpt.index_name ].page}/`
: '';
const queryParameters = {};
if (routeState[ wlcAlgoliaCpt.index_name ].query) {
queryParameters.query = encodeURIComponent(routeState[ wlcAlgoliaCpt.index_name ].query);
}
const queryString = qsModule.stringify(queryParameters, {
addQueryPrefix: true,
arrayFormat: 'repeat'
});
return `${baseUrl}therapists/${taxonomiesPath}${pagePath}${queryString}`;
},
parseURL({ qsModule, location }) {
const pathnameMatches = location.pathname.match(/therapists\/(.*?)\/?$/);
const taxonomies = prepareTaxonomies(
(pathnameMatches && pathnameMatches[1]) || ''
);
const { query = '' } = qsModule.parse(
location.search.slice(1)
);
const page = getPageNumber( (pathnameMatches && pathnameMatches[1]) || null );
let menu = prepareMenu( taxonomies );
let state = {};
state[ wlcAlgoliaCpt.index_name ] = {
query: decodeURIComponent(query),
menu: menu,
page: page
};
return state;
}
})
},
I’ve also noticed, that when I remove parseURL function from router and left only createURL then it’s working. But then obviously it’s not setting state when i refresh the page.
Can You please help me with that?