[Solved] Please help: ThirtyBees 1.1.0: JqZoom Error: Uncaught TypeError: $(...).zoom is not a function

[Acer]

Hi

On a fresh install of ThirtyBees 1.1.0, using any "built-in" theme: Naira, Community:

Enabling JqZoom for product image is throwing an "Uncaught TypeError: $(...).zoom is not a function" error.

Notes:

• The option to enable JqZoom has been available since the earliest version of 30Bz.
• This was working for me on 1.08 previously using Community
• The toggle to enable JqZoom is still in 1.1.0
• The JqZoom code is still in product.js of the Community theme
• Also, it seems that both the jqzoom.js and .css files for JqZoom are being loaded (if I do view source)

Please help with a fix if possible. Also, it would be great if we could continue to have this feature available in future versions of ThirtyBees.

Error detail:

product.js:194 Uncaught TypeError: $(...).zoom is not a function
    at initZoom (product.js:194)
    at displayImage (product.js:251)
    at HTMLAnchorElement.<anonymous> (product.js:290)
    at HTMLDocument.dispatch (jquery-1.11.0.min.js:3)
    at HTMLDocument.r.handle (jquery-1.11.0.min.js:3)

 

Thanks in advance

Update below

 

* Update:

So I've managed to get this "working" by replacing the contents of the 1.1.0 zoom file: "js\jquery\plugins\jqzoom\jquery.jqzoom.js" with the contents of a file that was loaded previously:
"modules\ctconfiguration\views\js\vendor\jquery.zoom.min.js". And as if by magic, the error disappears and the zoom functionality works again. However, I suspect that this "fix" is grossly incorrect...
It seems that "plugins\jqzoom\jquery.jqzoom.js" was also included in 1.08 previously and that "vendor\jquery.zoom.min.js" was loaded in 1.08 but not in 1.1.0 anymore.
Somehow by calling "vendor\jquery.zoom.min.js", the zoom functionally works... but if it's left out, it doesn't work - even if "plugins\jqzoom\jquery.jqzoom.js" is loaded...

An explanation and fix for this would be greatly appreciated...

 

 

 

Edited September 25, 2019 by Theo

[zen]

just to do it fast, you can change the old content of  "/js/jquery/plugins/jqzoom/jquery.jqzoom.js" by this one here :

https://raw.githubusercontent.com/jackmoore/zoom/master/jquery.zoom.min.js

infos here : https://raw.githubusercontent.com/jackmoore/zoom/

no need of the css file anymore in the jqzoom directory..

it works instantly 🙂

 

Later I'll try to dig into that on github and fix that properly.

 

[Acer]

Great, thank you. I've updated the file with the latest version of the min file from Jack Moore's Github (although the previous one included in 1.08 also seems to work fine)
So this was a bug then? And I was on the right track by replacing the content of "/js/jquery/plugins/jqzoom/jquery.jqzoom.js" with the "jquery.zoom.min.js" file?

Edited September 10, 2019 by Theo

[zen]

You were on the right track of course.. There is an immense job to be done to update all the Jquery librairies and plugins.... some files are more than 12 years old ^^ 😞

[Acer]

Thanks Zen. You mentioned that you'll see if you can implement the fix in Github?

[datakick]

I looked into this issue and there is a simple workaround. Go to your modules and reset Community Theme Configuration module.

One of this module responsibilities is to replace this particular jquery plugin with a new version. It uses displayFooterProduct hook to achieve this. Unfortunately, this hook is not specified in community-theme or niara's config.xml file --> this is what should be fixed 

[datakick]

Tracked here https://github.com/thirtybees/thirtybees/issues/1052

[Acer]

Hi Datakick 

Thanks for this, however, this module wasn't enabled in my modules list, so resetting wasn't necessary... But I have enabled it.
Also, it's not apparent that this module does anything "special" like do magical jQuery library stuff - as its function seems to be only to display the copyright in the footer?

Unless I missed something and selected the wrong module by mistake somehow?
If this module is for something greater, should it not be noted in the module and be enabled by default, regardless of theme?

 

Edited September 11, 2019 by Theo

[danae5d]

Hi, I tried to do this update, but I doesn't work and the zoom is not working

[Acer]

51 minutes ago, danae5d said:

Hi, I tried to do this update, but I doesn't work and the zoom is not working

Hi

I've just done this on a fresh, vanilla installation.

Following these steps worked for me:

1. Grab the contents of the following file (updated JqZoom version):
   • https://raw.githubusercontent.com/jackmoore/zoom/master/jquery.zoom.min.js 
2. Find the jqzoom file:
   • js\jquery\plugins\jqzoom\jquery.jqzoom.js 
3. Replace the contents of plugins\jqzoom\jquery.jqzoom.js with the updated file contents.

Save, clear cache, and try again.
Product zoom should now be working as expected.

Let us know if this worked for you.

 

Edited November 4, 2019 by Theo

[danae5d]

Thank you, is working fine, thanks a lot

[Acer]

31 minutes ago, danae5d said:

Thank you, is working fine, thanks a lot

You're welcome. Glad I could help 😀

[datakick]

On 11/4/2019 at 8:03 AM, Theo said:

Hi

I've just done this on a fresh, vanilla installation.

Following these steps worked for me:

1. Grab the contents of the following file (updated JqZoom version):
   • https://raw.githubusercontent.com/jackmoore/zoom/master/jquery.zoom.min.js 
2. Find the jqzoom file:
   • js\jquery\plugins\jqzoom\jquery.jqzoom.js 
3. Replace the contents of plugins\jqzoom\jquery.jqzoom.js with the updated file contents.

Save, clear cache, and try again.
Product zoom should now be working as expected.

Let us know if this worked for you.

 

Patching core files is not the best idea. While this indeed works, it can bring other problems down the road:

1. you can't update your store without loosing this modification (no more coreupdater for you)
2. if you decide to switch to different theme in the future, this will cause you troubles, as other themes actually expect jquery.jqzoom.js plugin to contain original content

I would suggest you to do this instead

1. go to your modules
2. find Community Theme Configuration module
3. reset it
4. if it's disabled, enable it  

[led24ee]

This last suggestion iis working with TB 1.1 Bleeding edge.