Can't get collapsible widgets to work

Hi,
I’m trying to get some facet widgets collapsed by default and all collapsible.
Thought this can’t be to hard, but I seem to be missing something. I’m running a rather standard algolia installation (so far, more to come;) on a quite customized magento 1.9.3.3. Can share link in PM when needed.
My current code is rather straight forward I’d say:

function algoliaHookBeforeWidgetInitialization(allWidgetConfiguration) {
    	allWidgetConfiguration.rangeSlider.forEach(function(entry) {
    		entry.collapsible = {
    			"collapsible" : true,
    			"collapsed": true
    		};
    		console.log(entry.attributeName);
    	});
    	allWidgetConfiguration.refinementList.forEach(function(entry) {
    		entry.collapsible = {
    				"collapsible" : true,
    				"collapsed": true
    			};
    		console.log(entry.attributeName);
    	});
    	return allWidgetConfiguration;
}

It just has no effect…
I also tried
entry.collapsible = true;
Which does nothing as well.

Hello @alex1,

your code is OK and actually works. However, the distribution of Magento extension doesn’t contain CSS for “collapsible” function - so the correct classes are added, but the widgets are not collapsed as the CSS is missing.

You can add this style to your CSS:

.ais-root__collapsed .ais-body, .ais-root__collapsed .ais-footer {
    display: none;
} 

Then it should work OK. Let me know how it works for you.

Amazing. That did the trick. Certainly should go into the docs!!

Better - I added it directly to the extension’s CSS - https://github.com/algolia/algoliasearch-magento/pull/859
It’ll be part of the next release.

Thanks for bringing it up! :rocket: :heart:

For anyone comming here we are now using something like this, which is a bit more usefull I guess:

Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] === obj) {
            return true;
        }
    }
    return false;
}

algoliaBundle.instantsearch.expandedAttributes = [ "color", "size", "material", "shape", "length", "width", "height" ];

function setCollapsible(entry) {
	var collapsed = ! algoliaBundle.instantsearch.expandedAttributes.contains(entry.attributeName);
	if (entry.attributeName.startsWith("price")) {
		collapsed = false;
	}
	entry.collapsible = {
		"collapsible" : true,
		"collapsed": collapsed 
	};
}

function algoliaHookBeforeWidgetInitialization(allWidgetConfiguration) {
	allWidgetConfiguration.rangeSlider.forEach(setCollapsible);
	allWidgetConfiguration.refinementList.forEach(setCollapsible);

	return allWidgetConfiguration;
}
1 Like