How to add jquery dependency to jquery.zoom for porto theme js under app/design

Question

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.

Answer 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.

Answer 2

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