Magento 2: Facet handlign: Don't create all of that


making first steps on the mage2 implementation.
I have two related issues that are a performance and UI problem:

  • The instantsearch result page always renders all facets configured in the system. This is super unusbale from a customer point of view, plus performance wise (we are having hundereds, and will go to thousands this year) an issue for the browser. Hiding them via JS/CSS aftrer creation is a non solution. They should just not be there in the first place
  • Related to that, the configuration.phtml spits out all those facets to the browser on every single page request. This again is a super blown up piece of JSON. I think this a.) should go to localstorage/cache and b.) should come as part of a search result.

Any idea how to fix that quickly?


Hi @alex1,

You can customize the instantsearch results page using this documentation.

You can determine which facets to retrieve with the ‘facets’ parameter on the instantsearch.

Let us know how it goes or if you have more questions!

Hey @cindy.cullen,
thanks for the quick reply. I’m fully aware of all customisations, having done a ton of that for magento1.
However, this is not what I really want , because to me it looks like I’d have to rewrite most of the algolia magento2 frontend. Could you get someone to look into those two aspects?
Tweaking system setting of facets doesn’t work, as this affects indexing as well. We are already generating those by code, btw, otherwise this crashes the backend (and doesn’t fit into the DB, as you use varchar instead of text).
Is there any magento2 reference installation with a three digit facet count?


Hi @alex1,

If you would like to remove some of the facets that are retrieved for your instantsearch page, you can use one of our front end custom events to change the configuration before the search is sent. No need to rewrite everything, just hook in the changes you would like to make.

Our Magento frontend uses the Algolia instantsearch, so the documentation for the instant search may also be helpful.

You can use the front end custom events to configure the instantsearch widgets to return what you would like instead of everything.

I hope this helps!

Hi Cindy,

I think you don’t understand the issue.
Facets should depend on query result, NOT on configuration. Say I have 500 facets in the system. The user has selected a category where all products only use 5 of those facets. Then there is no point in a,) confusing the user with 495 unused facets, and b.) putting all those 495 into the browser.
While a.) could be solved with frontend custom events, b.) cannot, as this seems a larger change, right?


Hi Alex,

You’ll have to modify your frontend to not show anything for empty facets.

I’m not sure what you mean by “putting all those 495 into the browser”. There is a way to not have anything added to the dom but there will still be 500 widgets added to the instantsearch instance.

Our extension tries to apply to most use cases and we do our best to please everyone but there is always some customization need. For instance, I’m sure that if we start hiding empty facets, there will be request to show empty facets.

I hope this answers your question :pray:


Hey Julien,

after getting my old head around instantsearch v4 and mage 2, I’m now at the point you suggested, i.e. all widgets go into instantsearch, but are hidden.
I still consider this horribly inefficient when the facet count is large.
We are now working on getting algoliconfig into browser cache and out of page html.
Additionally, rangesliders were not hidden when useless.
We fixed that with:

allWidgetConfiguration.rangeSlider.forEach( function (entry) {
        if(entry.panelOptions) {
            entry.panelOptions.hidden = function (opts) {
                if (!opts.results
                    || !opts.results._rawResults
                    || ! opts.results._rawResults[0].facets
                ) return true;
                if(opts.results._rawResults[0].facets_stats.hasOwnProperty(entry.attribute)) {
                    const stat = opts.results._rawResults[0].facets_stats[entry.attribute];
                    if(stat.min == stat.max) {
                        return true;
                    } else {
                        return false;
                } else {
                    return true;