Algolia Search Implementation on Genesis

[amitramani]

Not sure if anyone here has worked with Algolia Search before. It is an Instant Search Solution by Algolia.

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>s containing the search results. So I know that the network piece is working.

Any ideas or suggestions on what to try? I have asked Algolia but the plugin is Development mode, so support is almost non-existent.

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.

https://www.tacknrider.com/

[Victor Font]

The search tool is generating jQuery errors. It's probably a good reason why it's not working as you expect it to.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[amitramani]

@Victor, thanks.

But I do not see any errors in the Console under Google Chrome Inspect Tools.

Can you please post what errors you are receiving?

[Victor Font]

The error I saw yesterday is gone. You just have warnings now:

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Victor Font]

Here's the error: TypeError: this._searchContext is undefined

enter anything into the search field and hit enter. The error comes up right away.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[amitramani]

I was able to figure out (with help from Algolia engineers) why this was not working on Genesis themes. For anyone else looking for an answer to this, please change the CSS in your child theme's style.css:

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

[Author]

Posts