Modifying Magento default custom widget render function not working

Hello, I’m trying to use the hook “algoliaHookBeforeWidgetInitialization” (Magento 1.9 extension v1.14) to modify the default custom render function to show/hide an extra element.

The problem I’m having is that it just makes the render function do nothing. Here is my code, what am I missing?

// render function to autohide navmenu
function algoliaHookBeforeWidgetInitialization(allWidgetConfiguration) {    	
	// modify default custom widget
	allWidgetConfiguration.custom[0].render =
		function (data) {
			if (!algoliaConfig.isSearchPage) {
				if (data.results.query.length === 0) {
				        $('.navbar-collapse').show();
					$('.algolia-instant-replaced-content').show();
					$('.algolia-instant-selector-results').hide();
				}
				else {
				        $('.navbar-collapse').hide();
					$('.algolia-instant-replaced-content').hide();
					$('.algolia-instant-selector-results').show();
				}
			}
		};    	
	return allWidgetConfiguration;
}

Hello @jalals,

does it trigger any error in your browser’s console?

No errors in console. And once on the search page instantsearch works fine. It’s just on all other pages where it’s supposed to replace the main content that it does nothing. And it works as expected without my code as well, so it’s not some larger problem, I just have that element in the way that I’m trying to hide.

Also I tried using just the core function without my 2 added lines, which also doesn’t work. So I was assuming it is some js technicality with redefining the ‘allWidgetConfiguration.custom[0].render’ property that I am missing.

Update:

I have modified the code to be an ‘extra’ custom widget for testing purposes and added logging to track it. The function is firing but the result is bizarre to me.

// render function to autohide navmenu

function algoliaHookBeforeWidgetInitialization(allWidgetConfiguration) {
	console.log("begin");

	var widget = {
	    render: function (data) {
			if (!algoliaConfig.isSearchPage) {
				if (data.results.query.length === 0) {
				    console.log("about to attempt to show navbar");
					$('.navbar-collapse').show();
					console.log("attempted to show navbar");
				}
				else {
				    console.log("about to attempt to hide navbar");
					$('.navbar-collapse').hide();
					console.log("attempted to hide navbar");
				}
			}
	    }
	};
	
	allWidgetConfiguration.custom.push(widget);
	console.log("end");
	return allWidgetConfiguration;
}

The console logs the “about to attempt…”, but the jQuery command is a black hole; no error, no further console log. Any ideas?

Another update:

I tried simply adding the show and hide lines to the instantsearch.js core file render function and it works fine. So something is happening specifically when using the hook that is causing my jQuery actions to black hole.

Update:

This is a conflict with the prototype library (prototype black holes the invalid $ function). My solution, which I don’t really like, is to use the jQuery no conflict alias.

I’d rather make it work as a jQuery function for consistency, but can’t figure out how to define the function to use jQuery and still get it to respond to the hook call.