0

I got the JS error in console. Sometime when page load got the JS error and Sometime when page load it is working. I don't know what's the exact issue. I disabled all 3rd party extension after that got the same error on the website.

Please let me we need to upgrade jquery version.

Please see the screenshot below.

enter image description here

Please help me on this.

2
0

I have same problem with owl carousel slider Js. sometime js load and sometime show error. So at that time i found many solutions. And at last i found solution which is works well. There are two ways to include Js from the template in Magento 2:

  1. <script type="text/x-magento-init">
  1. data-mage-init attribute.

Either way can be used to pass data to the script within the json definition.

app/code/VendoreName/ModuleName/view/frontend

requirejs-config.js

var config = {
    map: {
        '*':{
                owlcarousel:'VendoreName_ModuleName/js/owlcarousel',
                reltaed_js:'VendoreName_ModuleName/js/reltaed_js',
            }
        },
    shim:{
            'owlcarousel':{
                                 deps: ['jquery']
                          },
            'reltaed_js':{
                                 deps: ['jquery']
                          }
        }
};
  1. For example, using the x-magento-init script tag, in the template you have:
<script type="text/x-magento-init">
    {
        "*": {
            "VendoreName_ModuleName/js/reltaed_js": {
                "slidername": "#you_id",
                "slideritems": "4"
            }
        }
    }
</script>
  1. For example, using the data-mage-init attribute into tag, in the template you have:
<div data-mage-init='{"reltaed_js": { "slidername": "Param1"}}'>

app/code/VendoreName/ModuleName/view/frontend/web/js

reltaed_js.js

define([
    'jquery',
    'domReady',
    "owlcarousel",
], function ($,dom,owlCarousel) {
    'use strict';

    return function(config) {
        $(config.slidername).owlCarousel({
            items: config.slideritems,
            margin: 10,
            lazyLoad: true,
            autoplayHoverPause: true,
            autoplay: true,
            nav: true,
            dots:true,
            loop:true,
            slideSpeed: 300,
            paginationSpeed: 400,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 1,
                    nav: true
                },
                480: {
                    items: 2,
                    nav: true
                },
                770: {
                    items: 3,
                    nav: true
                },
                1024: {
                    items: config.slideritems,
                    nav: true
                }
            }
        });
    }
});

Add owl js at app/code/VendoreName/ModuleName/view/frontend/web/js/owlcarousel.js Rename owlcarousel.min.js to owlcarousel.js

Add Owl CSS into your layout like this

<head>
    <css src="VendoreName_ModuleName::css/owl.carousel.min.css" />
    <css src="VendoreName_ModuleName::css/owl.theme.default.css" />
</head>

Note: I recommend to use x-magento-init script tag

I Hope This Helps You

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.