Instant Search

[allmart]

I'm sure there is a way to add that and looking at https://www.cloudways.com/blog/live-...hp-mysql-ajax/ might give some pointers BUT,

I'm not sure you could successfully present enough space to show enough of the product description to make it worthwhile.

Even using more... to truncate the presented info, you would still need 100-150 characters to show to even start making sense of what might be in the description. Google truncates its search results at 160 characters.

Whereever you decide to truncate for the search, you would need to make sure the characters shown are not just filler but contain enough information to "tease" the customer.

I would rather have the product description in the dropdown than the item code which is less useful to the customer, at least in the search

[allmart]

Experiencing an issue only on Safari browsers (iOS and Mac) where the dropdown seems to close too early on clicking a product link. You click on a result in the dropdown menu but you aren't routed to the link you clicked on, you remain on the same page. I was able to track it down to this block of code:

function handleBlur(event: React.FocusEvent<HTMLInputElement>) {
// If focus is moved to the results container, do not hide the results
if (event.relatedTarget && event.relatedTarget instanceof HTMLElement && event.relatedTarget.classList.contains('instantSearchResultsDropdownContainer__l ink')) {
return;
}

setShowResults(false);
}

She made a small change to the equivalent vanilla JavaScript file (instant_search_dropdown) which wraps this function's logic in a small setTimeout of 300ms, and the addition of this short delay resolves the issue for me. It is a hacky workaround though, so I am posting in the hopes that there is a better solution:

e.createElement(
e.StrictMode,
null,
e.createElement(
W,
{ client: p },
e.createElement("input", {
type: "text",
value: i,
onChange: (e) => o(e.currentTarget.value),
onFocus: () => _(),
onBlur: function (e) {
// NM - This setTimeout wrapper is a hacky workaround. Replace this file when the plugin is updated with a fix --
// dropdown closes in Safari without routing to the product page.
setTimeout(() => {
(e.relatedTarget && e.relatedTarget instanceof HTMLElement && e.relatedTarget.classList.contains("instantSearchResultsDropdownContainer__link" )) || s(!1);
}, 300);
},
"aria-expanded": u && c,
autoComplete: "off",
role: "combobox",
"aria-autocomplete": "list",
"aria-owns": u ? `#${pe}-${n}` : "",
ref: d,
}),
u && e.createElement(he, { queryTextParsed: l, containerIndex: n, setIsResultsContainerExpanded: f })
)
)
);
},

Once again, great plugin, thanks!!!

[marcopm]

Experiencing an issue only on Safari browsers (iOS and Mac) where the dropdown seems to close too early on clicking a product link. You click on a result in the dropdown menu but you aren't routed to the link you clicked on, you remain on the same page. I was able to track it down to this block of code:

Huge thanks for noticing this bug, pretty serious by the way, unfortunately I don't have access to an Apple device so I couldn't test it properly (shame on me).
I can run a webkit browser on my development environment, but for some reason this js script isn't working properly (seems to have something to do with react-query but I don't have enough patience/time to go through it properly now).
Also because of this, it took me a while to find the cause of the problem, which is partly explained here https://stackoverflow.com/a/70870755

The timeout workaround is actually a pretty good idea (it's also suggested among the answers on that stackoverflow thread).
I managed to find another viable solution (I hope): https://github.com/marco-pm/zencart_...arch/issues/23
You can try download the new instant_search_dropdown.min.js file from github and see if it works.

[allmart]

Sorry for the late reply, your fix works on Apple devices. Thanks!

[delia]

It installed easily but it's not working. No error messages - just nothing. ZC 1.5.7d php 7.4. What could I be missing? I am making the assumption that all files are uploaded and the plugin manager is checking for that issue.

[dbltoe]

Have you tried the newest version (4.02) on GitHub? Also, if you are using boootstrap, turn on the search there.

[delia]

You don't state what template you are using. Bootstrap includes a great search feature but, you have to turn it on.

This one says it has some options so you might want to look through the files for possible switches.

Not using bootstrap. It’s my own template. There are a lot of options but not one to enable the mod itself. But then again my brain got fried earlier today so hoping I just overlooked a minor detail.

[carlwhat]

It installed easily but it's not working. No error messages - just nothing. ZC 1.5.7d php 7.4. What could I be missing? I am making the assumption that all files are uploaded and the plugin manager is checking for that issue.

when you say no error messages, what do you mean?

i would say to open the developer tools and see if there is a javascript error listed in the console.

assuming that you properly uploaded all of the files, my guess is that you are having some sort of javascript issue and the console in the dev tools would indicate if that is the case.

best.

[marcopm]

I am making the assumption that all files are uploaded and the plugin manager is checking for that issue.

It does not, you must manually double-check that all the files have been uploaded correctly

Not using bootstrap. It’s my own template. There are a lot of options but not one to enable the mod itself. But then again my brain got fried earlier today so hoping I just overlooked a minor detail.

If you're using your own template, check out the "Autocomplete dropdown list doesn't appear" FAQ in the readme file. In short, you may need to specify your own custom CSS selector in settings.
Also, as carlwhat said, check if there are any JS errors in the developer console.

[delia]

Thanks Marco, I'm sure that's the issue. Forgive me but "keyword" denotes CSS class or div? Or something else? Nothing I've tried has made a difference. I did check on the upload - all good.