fixed my issus. searches.php in the root was the issue, re uploaded and now working, must of been currpt from download or unpacking.
Printable View
fixed my issus. searches.php in the root was the issue, re uploaded and now working, must of been currpt from download or unpacking.
Hello, I have uploaded the files of the form, but nothing happens, I do not understand how does it work searches.php uploaded the file in the root, since it has no reference to the uploaded files in the template, so in no way constitute work there must be a reference to the search box or something is missing in the package. Thanks Giancarlo
i am having some problems, is anyone good at javascript?
I managed to finally fix mine. It was caused by a conflict in Ultimate SEO causing rewrites. A bit of playing manages to get it working lovely.
I've also tweaked it to get it how I want it with a lot of help from this thread. I just wanted to pass my thanks.
Does this work on ZanCart version 1.5.1?
Hi all, I was trying to run instant search, adding a query that also appear the image of the product, there is someone who knows how to retrieve from the database query right? Thank You
Hi!
Can someone help me?
If there is only one product in the search result i would like to redirect the customer to the product page.
How can i do this?
This is a great add-on, works well and easy to install. We have a hidden category where the products are only linked to by advertisements outside our website and we don't want them searchable, is there away to modify this module to block categories/products?
Thank you.
Yes, you can add a code that prevents searching if category id = 10 or product id = 12 for example.
A slightly different approach would be to add a checkbox 'allow search' to each category/product, this would be available site wide and involve some coding.
If you wanted to get more complicated/secure have a peek at the Twitch Restrict, Twitch Product Switch code.
A very elegant and clever implementation. Thank you!
Nice, but I had some problems with links. It fails to see product types within the link so everything is set to main_page=product_info&products_id=.. which is grate if that's the only product type you have!
I've set it up a bit different, but the two files I modified are attached.. so far working to see different product types and change the link to the correct info page.
Dave, when you're satisfied with your changes, it would be great if you would bundle them and submit them to the plugins section as an update to this mod. Thanks.
I love this mod.. I'm using it on 1.5.6
I would like to add manufacturer to the search.. Has anyone done this?
Thanks!
Brian
It's currently not searching the manufacturer data.. I don't list or use manufacturers, what's the desired results of searching that database? Would the desired link take them away form your site by using manufacturer URL... Only see manufacturer name, image, and URL...
OK.. looking at a vanilla install to figure out the other possibilities.. Looks like a hit on manufacturer name pulls a list of all products made by them… this should be possible to do..
At the same time, even through its working with PHP7.3, it needs some cleanup.. well work on it as time permits.
Is there a Github for this mod?
Here's one you can use:
https://github.com/zencart/zencart
Ha ha just serious. Create a PR to add it to the core. It's a killer mod.
Yes, a great mod, definitely should be added to core, good suggestion!
We ain't afraid of no ghosts.
Does that mean a little or a lot?Quote:
but there's a ghost of a delay
I have an instant response.
Don't wait until you have time to work on it, just get it on Github for now, add any issues that already occur to you, and let others polish it.
pushed up.. https://github.com/davesaddle/InstantSearch
Still need to spend time on it and not had a chance to add manufacturers...
Open an issue detailing what is lacking, and issues for anything else that comes to mine. That helps others who may be looking at it.Quote:
not had a chance to add manufacturers...
Maybe I'll look at it, if I have time this lifetime.
Added manufacturers name search. Like categories, adds link to advance search results showing all products with the same manufacturers name.
Tested only on ZC156b and PHP7.3x
No code changes so should down grade to older versions of ZC and PHP...
sent updated into ZC and Github...
Just downloaded this, its a great start. I have only had a minute to test, but looks like I need to add functionality to search categories as well, plus products_model field as it doesnt pickup part numbers, rather product name in product description table I guess. Anyway I can answer all this myself and get it up to speed.
Does anyone else have any suggestions to add onto this great start so we can improve the UX?
There are a couple github projects on this you may want to fork. I think this one (instant Search) may have already look at models... I'm at where I need to be with mine.. The more you add to the search, the more links are built, I'm still toying with the logic..
I find that products that appear in the drop down, and are then clicked and followed, don't appear in the search log. Is there a way to fix this so that they do? I'm using ZC 1.5.7, search log 2.4.2, Instant Search 1.0.2.
Just recently ran across an interesting use on a non-ZC site. The dropdown showed the product's main image next to the title.
Attachment 19487
In case anyone's interested, I made a fork of this plugin: https://github.com/marco-pm/zencart_instantsearchplus
It mainly has slightly better search and results sorting logic. At the moment it searches only the product description and model (while the original plugin also searches within categories names and manufacturers).
It also shows the product image on the result.
Version 2.0.0 of the plugin is available! (I also submitted it for review and it should be available in the Plugins download section soon)
- Added configuration options in the Admin
- enable/disable plugin- max # of results to be displayed- enable/disable display of images, model, price- enable/disable search on product's model, category, manufacturer- Optional search on categories and manufacturers
- Code refactoring
- Various code and visual improvements
For help, issues and request you can write here, or in the github repo https://github.com/marco-pm/zencart_instantsearch
Good afternoon, I downloaded the plug in, but it doesn't install, the zc_plugins folder but placed in the root of the site? then makes an error [08-Mar-2022 12:45:58 Europe / Rome] PHP Parse error: syntax error, unexpected ':', expecting '{' in / includes / functions / extra_functions / instant_search_functions.php on line 17 Una else this plug in if it also works from the images in the search? Thanks You
Thanks, for previous versions? I use 155e
Use version 1.0.2 of the plugin, you can find it in the download page https://www.zen-cart.com/downloads.php?do=file&id=1336
Hello, I did a clean install of zen cart 157d but when I install the pug in me it gives this error: [22-Mar-2022 11:47:11 Europe / Rome] PHP Parse error: syntax error, unexpected ':', expecting '{' in /includes/functions/extra_functions/instant_search_functions.php on line 17
[22-Mar-2022 11:47:11 Europe / Rome] Request URI: /index.php?main_page=index, IP address: 151.26.166.102
-> PHP Parse error: syntax error, unexpected ':', expecting '{' in /includes/functions/extra_functions/instant_search_functions.php on line 17.
I installed the current version into my 1.5.7d it works in the product search box but not in any other search box.[FONT=system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji] All the files are in the correct locations and I have uninstalled and re-installed but it still only works in the product search. Since it works in the product search box but nowhere else I suspect I have something installed incorrectly.
Do you have any suggestion's where I should look to solve the problem?[/FONT]
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.
Getting this error non stop for all instant searches. Just would like to see what I could do to stop the errors in my Debug Logs.
Log File:
[05-Sep-2022 11:31:05 America/Los_Angeles] PHP Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 16384 bytes) in /includes/classes/db/mysql/query_factory.php on line 44
[05-Sep-2022 11:31:05 America/Los_Angeles] Request URI: /ajax.php?act=ajaxInstantSearch&method=instantSearch, IP address: xxxxxxxx
--> PHP Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 16384 bytes) in /includes/classes/db/mysql/query_factory.php on line 44.
Ensure that "Search product's attributes values" under Instant Search settings is set to false and/or increase PHP memory limit from 256M to 512M
I sometimes get that error as well on my dev environment where php's memory_limit is set to 128M or so. I'll try to see if I can make some changes to the plugin to avoid those errors
I am using the Responsive template.
zc 1.58 php8.0 responsive classic template
I just tried to install this v2.1.0 version instant search from zc plug-in library. It still works!
It is my first time to use this plug-in and I have one question. My instant search result doesn't search the product description. For example, I have a sample text "ABCDE" in one of the listing description. If I search "ABCDE", I will get empty result from the instant search. I checked the previous posts and this plug-in should also search the listing description, correct? I checked the settings of this plug-in and I cannot find an on/off switch for description search...
It doesn't search the product description. I might add this feature in a future version with another on/off switch setting, but, if enabled, I'm afraid it would slow down the search too much (it already has some slowness/memory consumption problems). At that point it would be like a normal ("advanced") search, while the focus of the instant search is to be faster and less refined than the normal search.
Please correct me if I am wrong, but you mean the AJAX search in ZCA Bootstrap Template.
As I thought instant search was also an AJAX search, I am interested in learning the difference between the two.
Was a version of the Instant Search mod incorporated into ZCA Bootstrap Template or is its search a completely different build?
Thanks
They may both be. I just know I prefer the one in bootstrap. topkayakerDOTcom is from mod. silversageherbsDOTcom is bootstrap.
there are significant differences between the two. few points:
- they are both ajax searches.
- the display of results is different between the two; however this always somewhat customizable in your template.
- the search logic, as in the guts of them, is very different.
- the resources necessary to do said searches could be completely different.
i will only comment on the logic differences. the bootstrap template incorporated changes made to zc v158. prior to v158, zc searching was woefully inadequate. changes now make use of boolean matches of the words that are being searched. you can see the bootstrap logic here:
https://github.com/lat9/ZCA-Bootstra...ch.php#L23-L50
and see the similarities to the new zc (as of v158) function zen_build_keyword_where_clause here:
https://github.com/zencart/zencart/b....php#L163-L204
the instant search mod makes use of the mysql operator REGEXP which uses regular expressions. you can see some of that logic here:
https://github.com/marco-pm/zencart_...ch.php#L86-L92
i will not go on with a discussion of the power of regular expressions. i will suffice to quote something here from the 'net:
"What is the difference between RegExp and like in MySQL?
Basically, LIKE does very simple wildcard matches, and REGEX is capable of very complicated wildcard matches. In fact, regular expressions ( REGEX ) are so capable that they are [1] a whole study in themselves [2] an easy way to introduce very subtle bugs."
as the person responsible for the zen_build_keyword_where_clause, i think it is a vast improvement over previous searching in zc. however, i have implemented the instant search plugin on a few client sites, and i am duly impressed with its power and ability to provide excellent results. as previously stated somewhere, there are some potential performance pitfalls with instant search, but in general, i am a big fan of that plugin.
hope that helps.
Indeed! Thanks to both @marcopm and @carlwhat for making Zen Cart better with these code contributions.
Thanks for providing the file comparisons.
It is going to take me a while to fully appreciate the coding differences (and the use of github).
Are the three little dots placed on the LHS of the line numbers and the pale yellow highlighting in the github files your doing.
Cheers
Thanks for the site comparison.
At first glance I am inclined to agree with you, however, I say this without having investigated the full capabilities of either search function nor whether these sites have fully used the capabilities of their search function.
The topkayaker search is setup to provide a vertical list beneath the search box where individual lines consists of tiny product thumbnail and product title. However the search box disappears from view upon shrinking down the display to mobile phone size, which suggests the site has not really been designed to be fluid responsive.
The silversageherbs search is setup to provide considerably more information in a larger boxed display format that takes advantage of the broader centre column and fluid responsive design, and therefore seems more forgiving of fat finger syndrome on small screens such as a mobile.
Cheers
The new 3.0.0 version of the plugin is available on GitHub and I have submitted it for review for the plugins section here.
This is a BIG update that brings new features and substantial improvements to previous versions:
- Code almost entirely rewritten – no more slow searches or out of memory errors!
- New search and rank logic, a combination of MySQL Full-Text search with Query Expansion and LIKE/REGEXP queries
- New, additional search results page with sortable product list and infinite scroll
- New admin settings, including control of which fields to search and their order
- More robust dropdown auto-positioning
- Support for Zen Cart 1.5.8 language files and plugin upgrade functionality
- Additional template files for the Bootstrap theme
- Integration with Search Log plugin
- Admin settings validation
- Removed jQuery dependency
- Bug fixes
It's compatible with ZC 157 and 158, and PHP version 7.4 through 8.2. There are no modifications to ZC core files.
Highly recommended to read the included HTML readme, not only for the installation instructions but also for additional useful information within.
I report here some of the FAQs included in the readme:
What's the difference between Instant Search and the Advanced Search included in Zen Cart?
Instant Search uses Ajax (no page reload) and searches for matches only on specific fields (product's name, model and description) with the goal of being fast and relevant. It does not load all results at once, but rather stops once it has found enough, and sorts them by relevance to the user query. It can also find similar results (Query Expansion).
The storefront (formerly "Advanced") Search doesn't use Ajax and aims for completeness and flexibility. The user can apply various filter conditions, such as limiting the search to certain categories or price ranges and using AND/OR in the query. It is therefore the tool to use for tailored searches on all available fields. The storefront Search also shows the exact total number of results, but in order to do this and provide pagination, it must first retrieve them all from the database. Additionally, it does not sort the results by relevance.
What's the difference between Instant Search and the Ajax Search of the Bootstrap template?
Aside from a visual difference (Bootstrap Ajax search shows results in a modal instead of a dropdown), both use Ajax (no page reload) and only look for matches on specific product fields (product's name and model, also product's description – if enabled – in the case of Instant Search).
The difference is that Bootstrap Ajax Search is still partially based on the storefront Search algorithm. It retrieves all the results first to count them, and it doesn't sort them by relevance. Compared to the storefront Search though, it's very fast.
Depending on your needs, if you're using the Bootstrap template you may prefer the Bootstrap Ajax Search to Instant Search. You can easily switch between them in the configuration settings.
The search is slow
Ideally, the results should be returned in less than 1 second.
If that's not the case, disable the search in product descriptions (i.e. in the admin Fields to Search and Order setting, use name instead of name-description).
If the search is still slow, disable Query Expansion.
The autocomplete dropdown does not appear
If you have enabled dropdown results and nothing happens when the user types, you may be using a custom template and your search entry boxes have a different CSS selector. You can set the CSS selector in the admin Dropdown - Input Box Selector setting.
The look of the results listing page doesn't fit my store template
The plugin provides template files for Responsive Classic and Bootstrap templates. If you're using a different template, you might need to customize these files to fit your store's theme:
/includes/modules/YOUR_TEMPLATE/product_listing_instant_search.php
/includes/templates/YOUR_TEMPLATE/templates/tpl_instant_search_result_default.php
/includes/templates/YOUR_TEMPLATE/templates/tpl_ajax_instant_search_results_listing.php
The search returns too many non-relevant results
Disable Query Expansion.
The results listing page is slow when a sort is applied
A custom sort (e.g. sort by price) in the product list basically negates the speed advantage of Instant Search, because it has to find and load all products first in order to sort them.
Finally, some more "technical" considerations that led me to rewrite the plugin almost entirely.
The first step of a search is always to break down the search query entered by the user into tokens (separated by spaces) and then search the database for them. Using REGEXP (aka RLIKE) token1|token2|... or using (LIKE %token1% OR LIKE %token2% OR...) doesn't actually change much, execution times are comparable even with a very large number of records (I tried). Reading online, there are instances where one seems to work better than the other, but in general it doesn't make much difference. Nowadays db engines are usually smart enough to use indexes when they need it and do different optimizations to the query on their own.
What really makes the difference in terms of execution time is the sorting of the result according to relevance to the user's query. And here is the sore point.
Loading all the results into memory and then sorting them is a bad idea no matter what (see out of memory errors of the previous versions). Finding and sorting things in the database using indexes will of course always be more efficient. The query_factory class (the class of the global $db object) is also not the best in terms of performance. Using a PDO connection seems better (I tried for example with the DB facade provided by Laravel capsule, now that it's included in ZC 1.5.8), but still: loading and sorting result in memory = very bad idea.
Also, the plugin's custom rating function that I wrote was extremely basic and questionable, to say the least.
There's no need to reinvent the wheel: MySQL already provides a great search and sorting tool, the Full-Text search. It's actually nothing really new, in fact I even used, among others, the same technique described in this famous 13-year-old post that still applies perfectly today (product names have higher priority than product descriptions in search results).
The plugin now creates two full-text indexes (product name and product description) on the product_description table and takes advantage of MySQL Full-Text search function, in combination with some LIKE/REGEXP queries to cover all cases. From what I've tested so far, the performance is good. Searching in product descriptions could obviously lead to longer search times, in which case you should disable the option as explained in the readme.
Full-Text search also comes with the nice optional Query Expansion feature, which can provide similar products to display in the results. More about this in the readme.
Obviously all this is not comparable to the use of a specialized search engine (algolia, elasticsearch and the like), which offers unbeatable performance and many more features (among many, the "did you mean?" feature). But all things considered I think it's still a pretty good result, obtained without the need of install or configure anything else.
big :thumbsup:
can't wait to check it out.
thanks for your work on this very cool plugin. as well as the detailed description on it and differences with other search methods in ZC.
best.
Wow! For the exemplary post and the major effort. Many thanks in advance.
Dear Marcopm
You're making us all feel very excited about being here!
I am just wondering whether a somewhat detailed explanation/instruction upon how best to setup or structure the wording of the product description field would be highly beneficial to all and sundry.
Best Regards
As for the search results, don't worry too much. If there is a search word in the product description, the product is included in the results. Simple as that.
However, I'm considering including the product keywords meta tag field as an additional field to search. This way you could add some keywords that are not included in the description but that you still want to associate with the product in the search.
Meta keywords are no longer used by search engines (since quite a long time ago) by the way, so at least we make some use of them :D
Version 3.0.1 of the plugin is available. It includes a bugfix and the possibility to include the product keywords meta tag in the searchable fields.
This is a great plugin marcopm and thanks for your work on it.
I have downloaded the newest version from Github and installed it into v.1.5.8 and when running it I get this error in the Debug Logs and it does not output results.....
PHP Parse error: syntax error, unexpected 'string' (T_STRING), expecting function (T_FUNCTION) or const (T_CONST) in C:\wamp64\www\158\zc_plugins\InstantSearch\v3.0.1\classes\InstantSearch.php on line 31
[14-Jan-2023 06:32:35 America/Los_Angeles] Request URI: /158/ajax.php?act=ajaxInstantSearchDropdown&method=instantSearch, IP address: 127.0.0.1
--> PHP Parse error: syntax error, unexpected 'string' (T_STRING), expecting function (T_FUNCTION) or const (T_CONST) in C:\wamp64\www\158\zc_plugins\InstantSearch\v3.0.1\classes\InstantSearch.php on line 31.
Any ideas on what this is referring to???
Thanks for your help,
Jeff
Perfect suggestion....I upped the PHP to 7.4.9 (was 7.3.21) and it now works perfectly and throws no errors!
Thanks for your help....and again for updating this very useful plugin.
Thanks again,
Jeff
@NWCE
Please note that PHP 7.4 is End Of Life (EOL) and not supported. You should consider going to 8.0 as a minimum if you are running 1.5.8.
Version 4.0.0 Beta of the plugin is available on the GitHub repo (https://github.com/marco-pm/zencart_...earch/releases):
- Refactor of the search class to allow the use of different search engines (with automatic fallback to MySQL if the search engine is unavailable)
- Support for using Typesense as a search engine (with the Typesense add-on)
- Improved display of categories and brands in the dropdown
- Search in the product category and brand
- Complete rewrite of the JavaScript code of dropdown and results page with React and TypeScript
- Improved dropdown accessibility and keyboard navigation
- Various bug fixes and improvements
Apologies for yet another major version change after last month's v3 release, I know keeping up with the constant changes is quite frustrating.
I had to make some major code changes to accommodate the Typesense add-on (which allows you to use Typesense as engine for Instant Search instead of MySQL).
There are other major changes as well, especially regarding the results dropdown, hence the "Beta" tag. It would be extremely helpful if any of you could try installing the release and let me know about any bugs :smile:
If everything seems to work fine, I'll remove the "beta" tag and submit it to the plugin sections here as usual.
Works on zc158 php7.4 to php8.2
I installed v3.0.1 first , ran it then dumped v 4.0.0 over it. V4.0.0 installed correctly. Ran well. It is fast.
It stopped my search box in side_boxes
Uninstalled it
PHP 8.2 Fatal Error: Undefined constant "FILENAME_INSTANT_SEARCH_RESULT" in \includes\classes\observers\auto.instant_search_observer.php:37
I'm getting this error
"The used table type doesn't support FULLTEXT indexes"
I'm using Zen Cart 1.5.7C with Responsive_Classic template
I had an older version working and wanted to update to this new version.
Thanks!
Can you check if you're using MySQL engine version 5.5 (from the Zen Cart Admin, Tools > Server/version info, look for "Database Engine")?
If that's the case, I would first recommend to upgrade MySQL to a more recent version, as 5.5 is EOL since many years. If that's not possible, replace the word "InnoDB" with "MyISAM" in zencart_instantsearch/zc_plugins/InstantSearch/v<x.y.z>/Installer/ScriptedInstaller.php and try installing again.
Using instantSearch v4.0.0 on a freshly-minted zc158a installation with a clone of the responsive_classic template on PHP 7.4.30.
When I type in the search box, I'm getting the following log:
Code:[03-Apr-2023 17:13:33 Europe/Berlin] PHP Fatal error: Uncaught TypeError: strip_tags() expects parameter 1 to be string, null given in C:\xampp\htdocs\mysite\includes\classes\ajax\zcAjaxInstantSearch.php:282
Stack trace:
#0 C:\xampp\htdocs\mysite\includes\classes\ajax\zcAjaxInstantSearch.php(282): strip_tags(NULL)
#1 C:\xampp\htdocs\mysite\includes\classes\ajax\zcAjaxInstantSearch.php(196): zcAjaxInstantSearch->formatDropdownResults(Array)
#2 C:\xampp\htdocs\mysite\ajax.php(85): zcAjaxInstantSearch->instantSearch()
#3 {main}
thrown in C:\xampp\htdocs\mysite\includes\classes\ajax\zcAjaxInstantSearch.php on line 282
[03-Apr-2023 17:13:33 Europe/Berlin] Request URI: /mysite/ajax.php?act=ajaxInstantSearch&method=instantSearch, IP address: 127.0.0.1
--> PHP Fatal error: Uncaught TypeError: strip_tags() expects parameter 1 to be string, null given in C:\xampp\htdocs\mysite\includes\classes\ajax\zcAjaxInstantSearch.php:282
Stack trace:
#0 C:\xampp\htdocs\mysite\includes\classes\ajax\zcAjaxInstantSearch.php(282): strip_tags(NULL)
#1 C:\xampp\htdocs\mysite\includes\classes\ajax\zcAjaxInstantSearch.php(196): zcAjaxInstantSearch->formatDropdownResults(Array)
#2 C:\xampp\htdocs\mysite\ajax.php(85): zcAjaxInstantSearch->instantSearch()
#3 {main}
thrown in C:\xampp\htdocs\mysite\includes\classes\ajax\zcAjaxInstantSearch.php on line 282.
Fixed in this commit that I'll include in the next release: https://github.com/marco-pm/zencart_...3a4f49a97f7072
In short, replace $img !== '' with !empty($img)
Thanks for the quick response! I can confirm that your change corrected the issue.
Havin a problem installing this, I get "Column 'products_description' cannot be part of FULLTEXT index" when trying to install the plugin in my store admin, I have also replaced InnoDB with MyISAM in the script installer as detailed above but I get the same error when clicking on install. Is there something I can change in my database using myphpAdmin to fix this?
PHP Version: 7.1.33 (Zend: 3.1.0)
Database Engine: MySQL 5.5.5-10.3.27-MariaDB
Zen Cart 1.5.7c
I hope this is an easy fix as my search is currently non-functioning (I installed on my live store without testing lol)
For example, when I search for 'Upholstery' I get a page not found error and the url is changed to index.php?main_page=FILENAME_INSTANT_SEARCH_RESULT&keyword=upholstery
Attachment 20251
Thanks for the info Marcopm, i'll remove what i've uploaded and give the older version a go.
Love this plugin!!! I was hoping that someone could give some guidance as to how to include the products description in the drop down.
Thanks in advance.
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.
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!!!
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.
Sorry for the late reply, your fix works on Apple devices. Thanks!
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.
Have you tried the newest version (4.02) on GitHub? Also, if you are using boootstrap, turn on the search there.
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.
It does not, you must manually double-check that all the files have been uploaded correctly
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.
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.
If you're not sure how to do it, google "how to find css selector". Maybe post the selector here as well so we can check if it at least makes sense (but it depends on your template).
Also, again: are there errors in the developer console? And/or in the /logs directory?
This is where I find w3schools invaluable. See their article on CSS selectors: https://www.w3schools.com/css/css_selectors.asp
Good info. Another helpful item for me is to right-click on the item or area I want to modify and select inspect.
Whether you do that in Chrome or Firefox, it will bring up the elements on the left and Styles on the right.
Once you find the element you are wanting to modify, it might not have a style associated with it. If so, at the top of the styles list is a + sign. Clicking on that will create a new style and use the selector you need to use in your personalized stylesheet. You can add settings while in the inspect mode and then copy the finished selector to your custom stylesheet.
One additional step is for those selectors that you only want to modify in a particular spot. (remember they are often all-inclusive while classes and divs are not) Say, the p tags in the define_main_page and not the rest of the home page. In the elements side, look to see if that p tag has a class or ID. If not, start up the list of Elements untill you find a class or ID. You then add that to the p tag so that the browser knows to add that styling to only the p tags in the define_main_page. In a stock 1.5.8 Zen Cart using the responsive_classic template, the resultant selector to turn all the p tags in the define_main_page to red would be:
The benefits are that, doing this while in the inspect mode, you can see if it is going to work before you add it to your custom stylesheet and the inspect mode will assist you in getting the proper syntax.Code:#indexDefaultMainContent p {
color: red;
{
}
Excuse me but I'm well versed in CSS - in fact that used to be my speciality - graphics to CSS
The configuration setting says
CSS selector of the search input box(es). You might need to change it if you're using a custom template and the results dropdown is not showing.
Default: input[name="keyword"]
So where is the CSS? The default lists keyword for name - which my site has. That's not CSS. Do I change the name/keyword to class/whatever or div/whatever?
I would never cast dispersions upon or denigrate a guru.
I do like to take an opportunity to add helpful tips for those who lurk and stumble across this post later.
As to the keyword, you may need to find something like the datepicker in specials that sets the expiration date on line ~634.
Code:$('input[name="expires_date"]').datepicker({
To regroup here :
the dropdown is not showing.
In the instructions:
Dropdown - Input Box Selector : CSS selector of the search input box(es). You might need to change it if you're using a custom template and the results dropdown is not showing.
Default: input[name="keyword"]
So the default input listed as name / keyword WHICH IS NOT A CSS SELECTOR and is also present in my template.
The instant search css has css starting with instantSearchInputWrapper
The template does have a file for the ajax instant search dropdown that matches the CSS.
So I am having difficulty seeing that CSS actually is the problem. Yes, I'm using my own template based on the original sidebox files with no core changes and some additional CSS but mostly default zencart template. I have no added jquery in the site. I see no conflict or issues using the browser console.
I also just installed it on a default 15.8 cart with the responsive template and it doesn't work on it either.
er, the input[name="keyword"] is a valid CSS selector; see this (https://www.w3schools.com/cssref/sel...bute_value.php) link.
So why does it not work? I know how to troubleshoot CSS problems but there's nothing showing for me to look at.
AND if it doesn't work "out of the box" or for the responsive template and stumps an experienced person, I'm not sure I see the value here. I'm not accustomed to giving up but ....
Do you have a customized template? The Instant Search plugin's jQuery/javascript is looking for changes to, by default, an input field named 'keyword' in order to send changes from that keyword-entry back to the site to gather matching products.
FWIW, the default responsive_classic uses the template_default/sideboxes/tpl_search.php and tpl_search_header.php to render the search-related sideboxes'. In both cases, an input field named 'keyword' is created to accept the customer's search keywords.
Keyword is created.... how and where? Are you saying the mod does that or that is what is needed to be done? In the instructions it mentions keyword only as a name - not input but attribute of input. So you are saying there needs to be an actual input field (assumedly then hidden from view) that is called name?
No, no error logs or console errors.
People, no one has offered any sample - any code, any site. I don't maintain or create mods anymore but instructions are important. There are no instructions, just that one thing in the configuration.
I was interested when looking at github that there was a suggestion this mod be added into the template. I'm all for that - if only to ge the dang code etc.