Magento CMS page search styling

I seem to have an issue with the Magento module.

On custom CMS pages the Algolia styling is not being applied.

See attached;

Hello @ben1,

I just checked your website and couldn’t find a page where it breaks. Could you give me a link to a page with broken autocomplete so I can investigate?

Thanks!

Hi Jan Petr,

Find attached;

https://goo.gl/1py3eB

I’m using a custom CMS layout.

If the custom layout is 1 column, 2 or 3 columns the layout of the autocomplete drop-down is fine.

However, on the custom layout, it breaks.

Hi Jan, any updates on this?

Ben

Hello Ben,

unfortunately I was not able to debug properly :confused:
Can you switch the debug parameter to true and investigate why the CSS are not applied there?

This is applied now.

Ben

I’ve tried to assertain what could be causing the issue but I can’t seem to find it;

There are a few javascript errors;

common.js:290 Uncaught TypeError: Cannot read property 'top' of undefined
    at window.fixAutocompleteCssSticky (common.js:290)
    at autocomplete.js:105
    at dispatch (jquery.js:5226)
    at v.handle (jquery.js:4878)

(common.js)

window.fixAutocompleteCssSticky = function (menu) {
			var dropdown_menu = $('#algolia-autocomplete-container .aa-dropdown-menu');
			var autocomplete_container = $('#algolia-autocomplete-container');
			autocomplete_container.removeClass('reverse');

			/** Reset computation **/
			dropdown_menu.css('top', '0px');

			/** Stick menu vertically to the input **/
			var targetOffset = Math.round(menu.offset().top + menu.outerHeight());
			var currentOffset = Math.round(autocomplete_container.offset().top);

			dropdown_menu.css('top', (targetOffset - currentOffset) + 'px');

			if (menu.offset().left + menu.outerWidth() / 2 > $(document).width() / 2) {
				/** Stick menu horizontally align on right to the input **/
				dropdown_menu.css('right', '0px');
				dropdown_menu.css('left', 'auto');

				targetOffset = Math.round(menu.offset().left + menu.outerWidth());
				currentOffset = Math.round(autocomplete_container.offset().left + autocomplete_container.outerWidth());

				dropdown_menu.css('right', (currentOffset - targetOffset) + 'px');
			}
			else {
				/** Stick menu horizontally align on left to the input **/
				dropdown_menu.css('left', 'auto');
				dropdown_menu.css('right', '0px');
				autocomplete_container.addClass('reverse');

				targetOffset = Math.round(menu.offset().left);
				currentOffset = Math.round(autocomplete_container.offset().left);

				dropdown_menu.css('left', (targetOffset - currentOffset) + 'px');
			}
		};

Also this error on search;

common.js:290 Uncaught TypeError: Cannot read property 'top' of undefined
    at window.fixAutocompleteCssSticky (common.js:290)
    at HTMLSpanElement.<anonymous> (autocomplete.js:96)
    at HTMLSpanElement.dispatch (jquery.js:5226)
    at HTMLSpanElement.v.handle (jquery.js:4878)
    at Object.trigger (jquery.js:5130)
    at HTMLInputElement.<anonymous> (jquery.js:5860)
    at Function.each (jquery.js:370)
    at ge.fn.init.each (jquery.js:137)
    at ge.fn.init.trigger (jquery.js:5859)
    at r.trigger (event_bus.js:30)

Ok, I have solved this issue;

The following code was missing from my custom CMS .phtml file.

<?php echo $this->getChildHtml('content') ?>

Although I don’t use this within the design, Algolia seems to require it to display the autocomplete menu correctly.

Oh, my bad. I didn’t notice these errors /o\

The extension renders div id="algolia-autocomplete-container"></div> to beforecontent block.

But in your custom design that block is commented out for some reason:
32

Can you change your custom layout to start the comment after the container? When you do that everything should be alright.

Is there a way to change where the container renders to as I don’t really require the content block.

Wouldn’t it make more sense to renders it to the topSearch block?

Sorry it’s been a long day!

All sorted, thank you so much for your help!

Ben

1 Like

You are more than welcome!
I’m really happy you made it work! :slight_smile:

If you have anything else I can help you with, let me know.

Hi We have the very similar problem, we have a third party theme applied and auto-complete is not rendering properly - ONLY on the home page. It just works fine in other pages.

Any help would be appreciated.

our page

predev.gochilli.com