Jump to content

Welcome, Guest!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

  • 0
Theo

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

Question

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

jqZoom toggle on admin product options 1.1.0.png

jqZoom zoom is not a function.png

products js jqZoom enabled.png

product js jqZoom.png

jqzoom.js loaded.png

 

* 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 by Theo
  • Like 1

Share this post


Link to post
Share on other sites

13 answers to this question

Recommended Posts

  • 1

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.

 

  • Like 1

Share this post


Link to post
Share on other sites
  • 0

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 by Theo

Share this post


Link to post
Share on other sites
  • 0

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 ^^ 😞

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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 

  • Like 1

Share this post


Link to post
Share on other sites
  • 0

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 by Theo

Share this post


Link to post
Share on other sites
  • 0
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):
  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 by Theo

Share this post


Link to post
Share on other sites
  • 0
31 minutes ago, danae5d said:

Thank you, is working fine, thanks a lot

You're welcome. Glad I could help 😀

Share this post


Link to post
Share on other sites
  • 0
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):
  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  
  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...