CODEWITHSUNDEEP
wordpresswoocommercealgolia
Amit Ramani
Amit Ramani

Reputation: 11

Algolia Search Not working with Genesis theme in WordPress

I am trying to get Algolia Search to work on Genesis child theme.

I have downloaded the Beta WordPress plugin from https://github.com/algolia/algoliasearch-wordpress. While I can see that network wise, everything works well, the Search Results do not show up in the AJAX drop down just below the Search Box.

Another interesting observation is that while the main Search Bar on the front end of the website does not show any results, the small Search bar within the Admin menu on the top right corner of the page does show the results. That is because the Algolia code attaches to any DOM element with [name="s"].

However, I have checked using the Inspect tools that the Main Search bar is also surrounded by Algolia <span class>. As I type into the Main Search Bar, I can see the DOM changing dynamically to add the <div> tags containing the search results. So I know that the network piece is working.

Any ideas or suggestions on what to try?

Other things I have tried:

  1. I placed the Search bar in the footer as well (thinking that maybe the opacity might be a problem in the header). Same result
  2. I have tested the same plugin on a similar site (with identical plugins) but with a non-Genesis theme. It works fine. That is why I have concluded that this might be related to Genesis.
  3. As I stated above, when I type in the Search bar in the top right corner within the WordPress Admin menu, it does work.

Upvotes: 0

Views: 284

Answers (2)

rayrutjes
rayrutjes

Reputation: 798

A new version of the plugin was released recently, 0.2.6 at the time of writing this.

In the new version, the dropdown is no longer injected in the same container as the search input container but is attached to the document instead.

You should no longer need to tweak the CSS like it is shared in your own answer.

You can download the latest version from: https://community.algolia.com/wordpress

Best

Upvotes: 0

Amit Ramani
Amit Ramani

Reputation: 11

For anyone else that is trying to get this to work on genesis, here is the CSS change: The issue is that the parent .search-form is configured with a weird "overflow: hidden". To fix your theme, just add the following CSS rule:

.search-form {
overflow: visible !important;
}

Upvotes: 1

Related Questions