I would check out https://github.com/WebDevStudios/wp-search-with-algolia/wiki/WPML as it has a lot of good information that may help get you in a good spot here with the topic at hand.
Thread Starter
aylon
(@aylonlimited)
I’ve checked that URL, thank you for posting it.
I duplicated the instantsearch.php template file as requested, unfortunately when I try to add the “filter” like explained there, my code differs A LOT from what is in the snippet.
I see that this guide was “edited on 20 Oct 2020”, so it must be outdated by now.
For example when it asks to add the filter:
/* Instantiate instantsearch.js */
var search = instantsearch({
appId: algolia.application_id,
apiKey: algolia.search_api_key,
indexName: algolia.indices.searchable_posts.name,
urlSync: {
mapping: {'q': 's'},
trackedParameters: ['query']
},
searchParameters: {
facetingAfterDistinct: true,
highlightPreTag: '__ais-highlight__',
highlightPostTag: '__/ais-highlight__',
filters: 'wpml.locale:"' + current_locale + '"', // This is the line we added
}
});
I have no idea where to add that, considering that my code looks like this:
/* Instantiate instantsearch.js */
var search = instantsearch({
indexName: algolia.indices.searchable_posts.name,
searchClient: algoliasearch( algolia.application_id, algolia.search_api_key ),
routing: {
router: instantsearch.routers.history({ writeDelay: 1000 }),
stateMapping: {
stateToRoute( indexUiState ) {
return {
s: indexUiState[ algolia.indices.searchable_posts.name ].query,
page: indexUiState[ algolia.indices.searchable_posts.name ].page
}
},
routeToState( routeState ) {
const indexUiState = {};
indexUiState[ algolia.indices.searchable_posts.name ] = {
query: routeState.s,
page: routeState.page
};
return indexUiState;
}
}
}
});
-
This reply was modified 3 years, 8 months ago by
aylon.
-
This reply was modified 3 years, 8 months ago by aylon.
Hmm, well spotted and very valid point.
I wonder if we need to update to make the documentation use https://www.algolia.com/doc/api-reference/widgets/configure/js/ for this part:
filters: 'wpml.locale:"' + current_locale + '"', // This is the line we added
Looks like the searchParameters property was deprecated a handful of years back according to https://github.com/algolia/instantsearch.js/issues/2075#issuecomment-289708587 and while the answer there points to the React version, it can also be done with vanilla JS.
Looks like this is all the search parameters
https://www.algolia.com/doc/api-reference/search-api-parameters/
for the configure widget, and then some help for the filters section there
https://www.algolia.com/doc/api-reference/api-parameters/filters/
Likely need to go with wpml.locale for the attribute stored on the indexed object, and then the current language chosen for the viewer on the page.
Thread Starter
aylon
(@aylonlimited)
I honestly wouldn’t know where to start if I have to pieces together different articles and guides to fix this issue. I was hoping there was a straightforward tutorial or just an “add these lines” fix.
Guess I’ll wait until the original link you sent me gets updated?
I definitely admit that page being outdated for old methods is on us, but I also can’t promise any specific turnaround times for getting it accurately updated either.
The templates out of box are kind of general overall, but that’s by intent too and able to be customized and updated to meet each site’s specific needs, including making use of Algolia’s extensive documentation for Instantsearch.
Impossible for me to know how long you’re willing to wait on this topic at hand.
That said, I did open an issue about our wiki and examples needing reviewed and that can be followed over at https://github.com/WebDevStudios/wp-search-with-algolia/issues/237 if you’re wanting.
Good day @aylonlimited
I have been doing some review and testing, and I have managed to successfully filter based on current language being displayed.
On these lines https://github.com/WebDevStudios/wp-search-with-algolia/blob/main/templates/instantsearch.php#L190-L194
You’ll want to add in this:
instantsearch.widgets.configure({
filters: 'wpml.locale:' + current_locale
})
Making something like this as a slightly more complete example.
instantsearch.widgets.poweredBy({
container: '#algolia-powered-by'
}),
instantsearch.widgets.configure({
filters: 'wpml.locale:' + current_locale
})
]);
If you haven't yet, you'll want to copy the instantsearch.php template file into your child theme, as mentioned at <a href="https://github.com/WebDevStudios/wp-search-with-algolia/wiki/Customize-your-search-page" rel="noopener" target="_blank">Customize your search page</a>.
The autocomplete version of filtering by locale is pretty much the same, the only line that really changed between template upgrades is:
source: algoliaAutocomplete.sources.hits(client.initIndex(config[‘index_name’]), {
to
source: algoliaHitsSource( client.initIndex( config[ ‘index_name’ ] ), {
`
otherwise same way to set and filter for that.
Thread Starter
aylon
(@aylonlimited)
Cheers Michael,
thank you for the update.
I correctly added the first edit:
instantsearch.widgets.configure({
filters: 'wpml.locale:' + current_locale
})
and it works flawlessly, after pressing “enter” in the search results I only see the right locale of products.
Unfortunately it’s not clear to me how to do the same edit for the autocomplete.
I see the rows you mention:
source: algoliaHitsSource( client.initIndex( config[ 'index_name' ] ), {
hitsPerPage: config[ 'max_suggestions' ],
attributesToSnippet: [
'content:10'
],
highlightPreTag: '__ais-highlight__',
highlightPostTag: '__/ais-highlight__'
} ),
but I can’t figure out how to make it filter for locale in here.
I guess it isn’t as easy as adding
filters: 'wpml.locale:' + current_locale
after the last highlightPostTag row.
It should be, at least depending on the version of the plugin you’re using.
I know I recently tested/updated the code shown on https://github.com/WebDevStudios/wp-search-with-algolia/wiki/WPML
The only difference was the previous version had this line:
source: algoliaAutocomplete.sources.hits(client.initIndex(config['index_name']), {
while the current version had this:
source: algoliaHitsSource( client.initIndex( config[ 'index_name' ] ), {
From your code above, you’re using the current/modern version.
The only way I could see this part still not working would be if your autocomplete indexes didn’t have the locale attribute, so if you haven’t yet, perhaps try a re-index of all of those.
