How to add jquery dependency to jquery.zoom for porto theme js under app/design
-
28-02-2021 - |
문제
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.
해결책
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.
다른 팁
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