Plugin Support
Marta
(@martadella)
Hi webwitnl,
Thanks for reaching out!
I couldn’t replicate the problems on my side. For a better understanding of your issue, we need the URL of your website. Keep in mind, links will not get removed any time later. Google will capture posts, including any available links within minutes, so if that is a concern to you, please do not add a link to your website here.
Regards,
Marta
Hi Marta,
Unfortunately it’s on a staging environment behind a firewall.
However, I’m not sure what you can’t replicate. The logic and, looking at it, the code is obvious:
In search.js there’s an initialize function which is called on load, which calls the registerEventsSearchBar function.
In there it does this:
that.el.on(‘focus.autocomplete’, function (e) {
that.onFocus(e);
});
And in the onFocus function it adds the dark layer.
So if you focus on the search input field before this script is loaded, obviously onFocus isn’t called, and the dark layer isn’t added.
I added a line of code in my own script to check if the search input field is already active when the script is loaded, in which case it triggers onFocus. That’s all you need to do.
-
This reply was modified 7 months, 1 week ago by
webwitnl.
P.S. I have a better temporary fix which seems quite robust, as it checks the dark layer when the details panel is shown. So that should catch all occurrences when the search results are shown but not the dark layer. Maybe something similar should be added to search.js getSuggestions().
jQuery( document ).on( ‘fibosearch/show-suggestions’, () => {
if (!jQuery(‘.dgwt-wcas-search-darkoverl-on’).length) {
const $input = jQuery(‘.dgwt-wcas-search-input’).first();
if ($input.length) {
const fiboAutocomplete = $input.data(‘autocomplete’);
if (fiboAutocomplete) {
fiboAutocomplete.enableOverlayDarkened();
}
}
}
});
Hi @webwitnl,
We’ll fix this in the upcoming v1.31.0 release. We have a few ideas. Let me know which one you think is best:
Until the script is fully loaded:
- The search bar is inactive (
pointer-events: none).
- A small preloader is displayed.
- The plain HTML is shown (as it is now), and once the script loads and detects focus, it initializes everything as if the user focused it after the script was ready.
The third option is probably preferable for most internet connections or site speeds. Because when I manage to focus on the search field before the script is loaded, and then start typing, the script loads within half a second anyway, sees that I’m typing and shows the auto results. That already works. So that would make 1 unnecessarily restrictive.
Hi @webwitnl,
We’ve implemented this fix. Now, if a user clicks the search bar and starts typing before the script has fully loaded, the darkened overlay will activate and suggestions will appear immediately once the script is ready.
It really works great, and thank you so much for reporting it! We’re very happy with this fix, which will be released soon in version 1.31.0.
You can already test it on your site if you’d like. Please follow these steps:
- Make a full backup of your site.
- Go to https://wordpress.org/plugins/ajax-search-for-woocommerce/advanced/ and scroll down to the “Previous Versions” section.
- Download the “Development Version”. The current development version is
v1.31.0-beta.2
- Install it on your WordPress site and test the fix.
