Magento 2 owl carasoul issue

Patel Shubham 0
Viewed 20

In magento 2 some time owl carasoul is load or some time given error

$.(). Owlcarasoul is not function.

Owlcarasoul.js including in web/js in front-end and Required-config.js

And use in items.phtml is included in design/template/item

owl-carousel magento2.4 magento jquery magento2
1 Answers

Sometime owlCarousel is not fully loaded when is call.

Solution :

check if selector exist, if not, wait 500ms to be fully load.

    <script type="text/javascript">
        require(['jquery', 'domReady!', 'mageplaza/core/owl.carousel'], function ($) {
            $(document).ready(function() {
                'use strict';
                if ($('#mp-list-items-<?= /** @noEscape */ $blockId ?>').length) {
                    setTimeout(() => {
                        $('#mp-list-items-<?= /** @noEscape */ $blockId ?>').owlCarousel(<?= /** @noEscape */ $block->getAllOptions()?>);
                    }, "500")
                }
            })
        });
    </script>

Edit :

You can add the script on the layout page and add async attribute like this.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="js/owl.carousel.min.js" async="async"/>
    </head>
</page>

Seems to be effective too

Nico2P0
Related