1

The website Magento is 2.1.7. We built a customised theme based on Porto theme. Now our frontend product page has an exception:

pub/static/frontend/vendor/theme-name/en_AU/Magento_Catalog/js/jquery.zoom.min.js:23 
Uncaught TypeError: Cannot set property 'zoom' of undefined

The code at line 23 is:

$.zoom = function(target, source, img, magnify) { ...

I think the exception is due to jquery.zoom is loaded before jquery so that $ is undefined. So I think I should find or create a requirejs-config file somewhere to create this dependency.

My question is: How to cite jquery.zoom.min.js in requirejs-config.js correctly? The location of jquery.zoom is

design/frontend/Smartwave/porto/Magento_catalog/jquery.zoom.min.js

I tried to call it Magento_Catalog/js/jquery.zoom.min in requirejs-config.js, but it seems requirejs cannot locate the file. Here is how I did exactly:

I add the dependency in design/frontend/vendor/theme-name/requirejs-config.js, the file is like:

var config = {
shim: {
    jquery: {
        exports: '$'
    },
    'Smartwave_Megamenu/js/sw_megamenu':
        {
            deps: ['jquery']
        }, ...

I tried to add jquery.zoom dependency here like:

        'Magento_Catalog/js/jquery.zoom.min':
        {
            deps: ['jquery']
        },

I call it Magento_Catalog/js/jquery.zoom.min because I found the deployed jquery.zoom.min.js is at

pub/static/frontend/vendor/theme-name/en_AU/Magento_Catalog/js/jquery.zoom.min.js

Then in the merged requirejs-config.js at

pub/static/_requirejs/frontend/vendor/theme-name/en_US/requirejs-config.js

I can see the dependency has been created successfully, but the exception is still there so I guess magento cannot find jquery.zoom.min.js file by Magento_Catalog/js/jquery.zoom.min. So what should I call/cite it in requirejs-config.js?

Can anyone help? Thanks.

| improve this question | | | | |
  • check this stackoverflow.com/questions/48394872/… – fmsthird May 9 '19 at 14:25
  • 1
    It works. Thanks for that very much, I didn't find that post. So I think what the solution did is it removed zoom.js from the product page view, and then loads it for all views? Maybe that is the only solution we can do because of the location of this zoom.js. Thank you @magefms! – Yang Du May 9 '19 at 23:05
  • That's great. I think you can add it as an answer and mark it as accepted so it can help others who might run into the same issue in the future. – fmsthird May 9 '19 at 23:29
1

Thanks for @magefms provide the solution. please find the solution in this post In a nutshell, it removed jquery.zoom.js from the product page view, and then loads it for all views by creating the dependency in requirejs-config.js.

It may not be a perfect solution because now all pages will load jquery.zoom.js, but it did work.

| improve this answer | | | | |
0

Your question: Is the location of jquery.zoom is design/frontend/Smartwave/porto/Magento_catalog/jquery.zoom.min.js

Ans: Location of jquery.zoom For Proto Theme (i.e YOUR-MAGENTO-ROOT/app/design/frontend/Smartwave/porto)

YOUR-MAGENTO-ROOT/app/design/frontend/Smartwave/porto/Magento_Catalog/web/js/view/product/view/jquery.zoom.min.js

** Note:** Proto Theme adds dependencies in design/frontend/vendor/theme-name/requirejs-config.js for sw_megamenu because sw_megamenu.js file may not be coded as per AMD structure, So dependencies of Jquery has mentioned in requirejs-config but jquery.zoom.min.js may be written as per AMD structure. So you may not need to specify Jquery dependencies for this zoom module

| improve this answer | | | | |
  • Thanks for your reply. Sorry I don't think I expressed my question clearly. I know where the jquery.zoom.min.js is, but I don't know how to cite it in requirejs-config.js. I tried to call it Magento_Catalog/js/jquery.zoom.min in requirejs-config.js, but it seems requirejs cannot locate the file, so the dependency cannot be created properly – Yang Du May 9 '19 at 13:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.