I'm using Smartwave Porto theme for my Magento 2 website, when I load my website for the first time in browser console it shows no error at all, but every time I refresh the browser page by pressing F5
or CTRL+SHIFT+R
, it will show an error like this in browser console and my page not load properly because of this:
Uncaught TypeError: $(...).swMegamenu is not a function Uncaught TypeError: $(...).stellar is not a function Uncaught TypeError: $(...).owlCarousel is not a function Uncaught TypeError: $.widget is not a function
If you suffer the same, do this:
create a requirejs-config.js in the root of the child theme
app/design/frontend/Smartwave/porto_child and put in the following:
var config = { shim: { jquery: { exports: '$' }, 'Smartwave_Megamenu/js/sw_megamenu': { deps: ['jquery'] }, 'owl.carousel/owl.carousel.min': { deps: ['jquery'] }, 'js/jquery.stellar.min': { deps: ['jquery'] }, 'js/jquery.parallax.min': { deps: ['jquery'] } } };
And change the entries:
<script src="jquery.js" />
<script src="bootstrap/js/bootstrap.min.js" />
<script src="fancybox/js/jquery.fancybox.js" />
To:
<remove src="jquery.js" />
<remove src="bootstrap/js/bootstrap.min.js" />
<remove src="fancybox/js/jquery.fancybox.js" />
Within file:
app/design/frontend/Smartwave/porto_child/Magento_Theme/layout/default_head_blocks.xml
No more need for merging javascripts, no more javascript errors! I have no need for the fancybox, turned it off, but if you do require it, I guess it should be included in the requirejs as well.
-
-
You are welcome. Glad to hear that it helped you. The problem was that menu JavaScript was being loaded before jQuery. So we defined dependency of that menu JS. – Kishan Patadia Feb 23 '18 at 6:35
-
Hello @KishanPatadia I have the same issue with porto theme. I used this code which is working fine. But after this solution product page is showing error ( zoom is not a function ) – Chander Shekhar Feb 23 '18 at 6:50
-
@KishanPatadia there's a problem, when i go to product page i got an error saying:
$(...).zoom is not a function
– nortonuser Feb 26 '18 at 2:20 -
$(...).zoom is not a function
is an issue with another call to a js library that hasn't been added to the require js file. I don't have that library call on the site i'm working on, so i can't give a code solution to your case, but looking at @KishanPatadia example, you should be able to find the library for zoom and add it to the require js file. In my case, i had to addfancybox
to mine with'fancybox/js/jquery.fancybox': { deps: ['jquery'] }
and that cleaned up all my issues. – circlesix Feb 28 '18 at 14:19