Wordpress and Generatepress

Hi,
I’m using the generatepress theme for wordpress and I run into a small issue. The theme provides a quick link to expand a search field inside a navigation menu. It works well and the Algolia autocomplete dropdown as well, except I can’t close it when clicking the close search icon they provide. How do I close the Algolia dropdown? is there a specific method, I can’t find something in your doc. Thank you.

Problem solved, I simply add some jquery code on the close icon to hide the dropdown.

1 Like

Hey any chance you can share the code you created?

Something like this did the job

/* Forces Algolia autocomplete dropdown to close when clicking the GeneratePress close search icon */
('li.search-item a').on( "click", function() { (’.algolia-autocomplete’).hide();
})

So I added that to the site via the Generate press wp_footer hook and it did not work. Is there any advise on how best to implement it?

mcstaging.co.uk is the site I am working on.

Hi @peter,

I looked at the source for your site and I don’t see the jquery code on the page.

How did you add it to your footer?

Hey Cindy, I actually removed it. I previously added it to the footer using the elements feature on. On Generatepress.

I can add it back for you to take a look. Its there now

Hi @peter, I’m seeing a javascript error on your page which could make any jquery you’ve added quit working.

57%20AM

I suspect that if you fix this error, your jquery for hiding the search may work.

Looking at the code that is throwing the error, I suspect the $ is causing problems with the code you just added. I would try changing the $ to jQuery:

You have now:

$(‘li.search-item a’).on( “click”, function() {
    $(’.algolia-autocomplete’).hide();
})

I would try changing it to:

jQuery('li.search-item a').on( “click”, function() {
    jQuery(’.algolia-autocomplete’).hide();
});

In my experience, sometimes there are conflicts in WordPress which require using jQuery instead of $.

Let us know how that works for you!

Hey Cindy,

Here is how I entered it.

I am still not getting the result we are looking for.

Best,

Peter

Hi @peter, you still have a javascript error on your page which causes the javascript to stop working. The javascript error could be from another plugin or the theme. You will need to troubleshoot that error before you get this new code to work.

Hi Cindy,

I sorry if I come across as a bit amateur, but do you have any suggestion how I would debug that issue?

Best,

Peter

Hi @peter, This appears to be an error with WordPress or one of your plugins, and not with your Algolia integration, so I will be of limited help.

But, the usual way to troubleshoot WordPress is to deactive all plugins and change back to one of the WordPress supplied themes and see if you still have the error in your console in the browser developer tools.

If you do have an error, then I would reinstall WordPress as there is a core issue. If you don’t have the error (and my guess is you won’t), then activate the plugins one at a time, refresh your home page and see if the error still exists. If all the plugins are activated and you still don’t see the error, activate your theme and see if the error occurs.

When you find the plugin or theme that’s causing the issue, you can usually get support from the plugin or theme author.

You can find more information about troubleshooting WordPress here.

I hope this helps!

Thanks Cindy

I have been trying that method and it seems related to wordpress and emojis

Great @peter! I hope you find the conflicting plugin or theme so that you can solve your issue.

Keep us posted!

Hey Cindy,

I thought you might like to know that I resolved the issue.

It was actually the code that you gave me, which was causing the error.

Basically “” and ‘’ where somehow not right. I deleted them and re-entered them and the error was gone and everything worked.

Thank you for your help,

Peter

Hey Cindy,

I was wondering. That code, can it be modified to also delete the content of the search field?

Best,

Peter

Hi @peter,

Ah, yes, the dreaded quotes in the WordPress editor when you copy and paste.

Glad you got it working!

To delete the value of the searchbox, try replacing what you have with this:

jQuery('li.search-item.a').on( "click", function() {
   jQuery('.search-field').val("");   // Add this line 
    jQuery('.algolia-autocomplete').hide();
});

(If you copy and paste that, make sure to change the quotes :wink: )

1 Like

Fantastic! Thank you very much. :grinning: