Fix jQuery event shorthand is deprecated - focus, focusout, hover

[leemyongpakvn]

Questions	Answers
Description?	Fix well-known deprecated warnings following jquery-validation/jquery-validation#2243 and https://api.jquery.com/focus, https://api.jquery.com/focusout
Type?	bug fix
BC breaks?	no
Deprecations?	yes
Fixed ticket?	Fixes {paste the issue here}.
How to test?	1. In terminal run: cd themes/classic/_dev npm run build 2. In FO: Clear Web browser cache 3. In BO Configure/Advanced/Performance: Clear cache then Disable Smart cache for JavaScript in CCC; 4. Add some products to Cart, then open Cart page and look at Web browser console to see the warnings (from theme.js) still there or not
Possible impacts?	Prestashop 1.7.8.5, FireFox browser

[leemyongpakvn]

Fix jQuery.fn.hover() following https://github.com/KingSora/OverlayScrollbars/releases/tag/v1.5.3 and https://api.jquery.com/hover/

[khouloudbelguith]

Hi @leemyongpakvn,

I tried this theme using branch 8.0.x.
Using Chrome Version 94.0. and Firefox 101.0.1 (64 bits).

• In the FO > Click on any product to check the product details page
• See error in the console

The error .hover is still displayed

I attached a screen record

Untitled_.Jun.21.2022.5_09.PM.mp4

Could you please confirm that only the warning related to .focus & .focusout & .hover will be fixed in this PR?

Thank you!

[leemyongpakvn]

@khouloudbelguith I confirm that this PR will fix the warning related to .focus & .focusout & .hover come from classic theme (theme.js) in Cart page of PS 1.7.8.x .
I'm not sure about PS 8.0.x, Product page or warnings come from other modules (as I know till now js code of ps_searchbar and productcomments modules make the similar warning also).
Please be sure that you rebuild theme.js with npm run build in _dev directory after apply changes to 3 component js files following https://devdocs.prestashop.com/1.7/themes/getting-started/asset-management/webpack/#installing-webpack.

[leemyongpakvn]

@khouloudbelguith Tested OK with PS 8.0.0 also. Please Disable Smart cache for JavaScript in configure/advanced/performance/CCC (Combine, Compress and Cache) and clear web browser cache before test again.

[kpodemski]

@khouloudbelguith remember that it might not fix all the issues in the developer console, but we should have less as some could be from some modules, etc.

[leemyongpakvn]

@NeOMakinG Will I need to add assets/js/theme.js, or maintainer will do while releasing new version?

[NeOMakinG]

@leemyongpakvn if assets are pushed to the repository, I would suggest you to push the theme.js inside your PR directly so we are sure that we don't forget to push them!

[leemyongpakvn]

@NeOMakinG I don't see assets folder in both this repository Code and the Releases Source code zips. BTW, How to test? is updated with theme.js rebuild and check.

[NeOMakinG]

@leemyongpakvn yeah because I'm pretty sure it's added via composer and then build on the PS release, you shouldn't push assets I guess, the assets folder is even inside the gitignore 👍

[hibatallahAouadni]

Hello @leemyongpakvn

I reproduce the issue even when I disabled the cache, see the attached screen record below:

pr_37.webm

Please check and feedback.

Thanks!

[leemyongpakvn]

@hibatallahAouadni I have added two more steps in How to test? (step 2 & 3). I can not run your .webm screencast, so please send in another popular format (.mov, .mp4), or just a screenshot of the Web browser console log.

[leemyongpakvn]

@kpodemski and @NeOMakinG I thought Step 1, 2, 3 in this How to test? is a must-to-know in QA cookbook 🙏 It is boring to repeat these steps in every PR that has CSS, JS changes with Webpack.

[kpodemski]

@leemyongpakvn I'm pretty sure they did that :) I think not all console errors will disappear because, if I recall correctly productcomments module with the fixes hasn't been released yet, which means that there will be errors, but fewer. Am I right?

[leemyongpakvn]

@kpodemski Your recalling is right. I informed it with khouloudbelguith on Jun 22, and emphasized checking errors come from theme.js in Web console in additional How to test Step 4 on Nov 12. 😋

[MhiriFaten]

Hello @leemyongpakvn ,

I tested this theme

I followed the process with

• rebuild theme.js with npm run build in _dev and
• Clear cache then Disable Smart cache for JavaScript in CCC

The issue is well fixed ✔️ and there is no longer any warning related to .focus & .focusout & .hover

So it's QA ✔️
Thank you

[kpodemski]

Thanks, @leemyongpakvn !