0

Theme Level

app/design/frontend/<Vendor>/<Theme>/requirejs-config.js

Owl Carousel JS/CSS path

Vendor_Theme/web/owl.carousel/assets/owl.carousel.css
Vendor_Theme/web/owl.carousel/owl.carousel.js

requirejs-config

var config = {

    paths: {
        'owlcarousel': "Vendor_Theme/web/owl.carousel/owl.carousel"

    },
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        },
    }
};

Related Products path - Vendor/Theme/Magento_Catalog/template/product/list/items.phtml

<div class="owlslider products wrapper grid products-grid>
<ol class="products list items product-items">

 <script>
    (function  () {
        require(["jquery","owlcarousel"],function($) {
            $(document).ready(function() {
                $(".owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds 
                    items : 5
                });
            });
        });
    })();
</script>
  1. Owl carousel JS is not being called using requirejs-config
  2. How do I add owl carousel to related products ?

The carousel is being added into custom theme and not module.

1

Please try with below code. Sometime in multi-store in M2 custom js does not load with "owlcarousel", so we need to give full path "Vendor_Theme/web/owl.carousel/owl.carousel".

 <script>
    (function  () {
        require(["jquery","Vendor_Theme/web/owl.carousel/owl.carousel"],function($) {
            $(document).ready(function() {
                $(".owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds 
                    items : 5
                });
            });
        });
    })();
</script>
  • the path is already given in requirejs-config. Is the path incorrect ? How do I make sure if requirejs is actually loading owl carousel js ? – Slimshadddyyy Dec 8 '17 at 9:51
  • You can check your js is load in requirejs-config.js over page source. Even you can check in Network area to find js is loading or not. – Prakash Patel Dec 8 '17 at 10:08
  • and what if it is not loading ? I do not see it in network or view source – Slimshadddyyy Dec 8 '17 at 10:20
  • /app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layout/default.xml <referenceBlock name="head.components"> <block class="Magento\Framework\View\Element\Js\Components" name="default_page_head_components" after='-' template="Magento_Theme::html/js_components.phtml" /> </referenceBlock> Magento_Theme::html/js_components.phtml <script type="text/x-magento-init"> { "*":{ "Magento_Theme/js/themeOptions":{}, "Magento_Theme/js/lazysizes":{} } } </script> – Prakash Patel Dec 8 '17 at 10:25
  • Can you post above as your answer ? – Slimshadddyyy Dec 8 '17 at 11:37
0

Please try this.

/app/design/frontend///Magento_Theme/layout/default.xml

 <referenceBlock name="head.components">
        <block class="Magento\Framework\View\Element\Js\Components" name="default_page_head_components" after='-' template="Magento_Theme::html/js_components.phtml" />
     </referenceBlock>



"Magento_Theme::html/js_components.phtml


<script type="text/x-magento-init">
{   "*":{
        "Magento_Theme/js/themeOptions":{},
        "Magento_Theme/js/lazysizes":{}
    }
}
</script>

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.