I'm trying to view the search results of a search box in a popup not in a page, I've created an overlay with a search results rendering in it and then choose it as the "Search result page", the results are displayed fine in the overlay but it navigates to the Overlay URL not displaying it in the same page. Is there a way to make the overlay appears without navigating to it's URL?


You can accomplish this with a bit of a workaround. In order to do it you need to first understand how overlays work.

Overlays first check if there's any item with the class overlay-source on the page if so the javascript creates an overlay wrapper. and then upon clicking of an item the overlay gets loaded into that overlay wrapper.

In both the search results and search box scenarios the actual content is rendered dynamically (after the overlay javascript is initialized hence the overlay would never get invoked). In order to fix this you would need to do the following:

1- Add any div preferably with display:none in the page and has a class of overlay-source

2- Change the rendering of the searchbox to not only display the title but add a parent div with class overlay-source and make sure the <a> links to an overlay

3- reinitialize the overlay after the searchbox results are shown (add the following link to the searchbox js XA.component.overlay.init();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.