-
Posts
-
Hey Gunter,
We would like to change the functionality of the search button in enfold. We have some custom code we have developed for how we want the search box to appear and we have it working via a header widget. We had to do it this way to get the html to be able to span full width in the header over the top of the menu items.
What we now want to achieve is:
1) Unhook the js event that normally fires when you click on the search button in the header. The code that pops up the input box to type your search term in.
2) Add our own js hook on the click event of the search button.We can do step 2 easily but removing the existing hooks for step 1 is harder. We have tried removing all click events from it but it doesn’t seem to work. There is some more advance event setup using virtualMouseBindings that we got lost in. How can we remove the event that fires when you click on the search button.
Thanks,
Tim
Hey Tim,
Sorry for the late reply.
The underlying js for the search icon behaviour can be found in enfold\js\avia.js line 69:
new $.AviaTooltip({ …..
and line 90:
new $.AviaAjaxSearch({scope:’#header, .avia_search_element’});
As far as I see there is no easy way to remove this without hacking core js. If you do this and use minify or merged files you need to minifiy this js file again (or make a copy of unminified and name it avia.min.js
You could try to rename the class avia-search-tooltip and remove data-avia-search-tooltip on pageload before avia.js is executed.
Or remove the HTML completly and insert your own icon HTML and bind this to your js (which seems to be the easiest and clean solution for me).Hope this helps you.
Best regards,
GünterHi Gunter,
Thanks a lot for the reply. Shame there’s no easier way to interact with this.
To help us further with this, can I ask how Enfold adds the search icon to the header so that it always stays in its position in the header both on desktop and mobile? Eg: on mobile it doesn’t get added to the hamburger menu, but rather sits next to it, which is what we want.
Thanks
Tim
Hi,
To add a search icon to the default and mobile menu in the Enfold theme, the wp_nav_menu_items and avf_fallback_menu_items filters are used. The avf_append_search_nav callback function can be found in the functions-enfold.php file located in the themes/enfold directory. This function is responsible for appending the search icon to the default and mobile menu using the appropriate filters.
Best regards,
IsmaelHey Gunter & Ismael,
Thanks for pointing us in the right direction, we have been able to achieve what we needed.
One other search related question…
At the moment when the AJAX search box is open, you can click outside of it to remove/hide it. This is good/logical, but it has a flaw. While attempting to click away from the AJAX search box, if you click on something that is actually a link then the link click registers and you now navigate away from the page you were just on.
This becomes especially problematic on shop category pages for example where basically everything on the screen has a link attached to it, so clicking to remove the search box almost always results in navigating to a new page by mistake.
Can we please get some code/functionality to ensure the first click is only to hide the search box, and does not register an on-page click?
Thanks a lot as always
Tim
Hi Tim,
Thanks for your feedback!
To be honest, I think the current behavior is better for user experience because if the links are disabled when the search window is open, then users would need to click twice to navigate away. The search icon can be used to close the search window.
That being said, I forwarded your request and shared a link to this thread as a reference. We’ll let you know when we have an update :)
Best regards,
YigitHi Yigit,
Thanks for the response.
We’ve worked out a solution for our needs, this can be closed.
Regards
Tim
Hey!
Glad to know that you’ve found a solution. In case you require an alternative, please try this code in the functions.php file.
// custom script: disable link when AJAX search is open function ava_custom_script_search_disable_links() { ?> <script type="text/javascript"> (function($) { $('a').on('click', function(e) { var search = $('.avia-search-tooltip'); if(search && search.css('display') == 'block') { e.preventDefault(); return; } }); })(jQuery); </script> <?php } add_action( 'wp_footer', 'ava_custom_script_search_disable_links', 9999 );Cheers!
Ismael
- The topic ‘Search question’ is closed to new replies.