1

I am currently creating custom jquery widget for owl-carousel just to learn how to do it properly in magento-2.

I have configured my own module in requirejs-config.js at theme level.

var config = {
    map: {
        '*': {
            'carousel': 'js/carousel',
            'owlcarousel': 'js/owlcarousel/owl.carousel',
        }
    },    
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        },
        'carousel': {
            deps: ['jquery','owlcarousel']
        }
    }
};

and then inside carousel.js I am setting like below

define([
    'jquery',
    'owlcarousel'
], function($) {
    'use strict';
    $.widget('custom.slider',{

        _create: function(config,element) {
            $(this.element).owlCarousel(config);
        }
    });

    return $.custom.slider;
});

and finally call inside .phtml template with below code.

<div class="custom-element" data-mage-init='{"carousel":{"items": 11}}'>
</div>

Still I am not seeing owl-carousel being loaded with my config that I am passing into data-mage-init.

Please tell what I am doing wrong?

EDIT-

If I write like this, it doesn't work.

_create: function(config,element) {
  this.element.owlCarousel(config);
}

But with this it does.

_create: function(config,element) {
    this.element.owlCarousel(this.options);
}
2

enter image description here

At first,you should add options in your jswidget, after that you can change this options in data-mage-init. As you did with items.

1
  1. Copy owl.carousel.js to app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.
  2. Add your requirejs module app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

    define([
        'jquery',
        'owlCarousel'
    ], function($) {
        return function(config, element) {
            $(element).owlCarousel(config);
        };
    });
    
  3. Add requirejs config to app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js.

    var config = {
        map: {
            '*': {
                'carousel': 'js/carousel',
                'owlCarousel': 'js/owl-carousel/owl.carousel'
            }
        }
    };
    

How to use:

  • use the data-mage-init attribute to insert Owl Carousel in a certain element:

    <div class="owl-carousel" data-mage-init='{"carousel":{"option": value}}'>
        <div class="item">Item 1</div>
        ...
        <div class="item">Item n</div>
    </div>
    
  • use with <script type="text/x-magento-init" />:

    <div id="owl-carousel" class="owl-carousel">
        <div class="item">Item 1</div>
        ...
        <div class="item">Item n</div>
    </div>
    
    <script type="text/x-magento-init">
    {
        "#owl-carousel": {
            "carousel": {"option": value}
        }
    }
    </script>
    

You can modify the code according to your need.

I have used above code in one of my project to add carousel.

Original answer is at https://magento.stackexchange.com/a/227649/1968

  • I also chacked that answer but it was not working for me. – Shashank Bhatt Apr 1 at 7:48
  • @ShashankBhatt Check browser console for errors. – Anshu Mishra Apr 1 at 7:54
  • Ok I cleaned the cache and it is working now but what is the problem in widget though? – Shashank Bhatt Apr 1 at 7:59
  • Not sure, code seems to be ok. Need to debug with widget. – Anshu Mishra Apr 1 at 8:42
0

You have to created one requirejs-config.js file inside your theme like,

First Add owlcarousel.js file inside,

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js

Add your css inside,

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css

call css inside your tempalte file using,

<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Catalog::css/owlcarousel.css')?>">

Now create requirejs-config.js file

Magento_Catalog/requirejs-config.js

Define your slider,

var config = {
    paths: {            
            'owlcarousel': "Magento_Catalog/js/owlcarousel"
        },   
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
    }
};

Now you can use owlcarousel under any phtml file,

<div id="owlslider" class="products list items product-items">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>       
  </ul>
</div>
    <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>

Remove pub/static folder content and run php bin/magento setup:static-content:deploy command.

  • Yes but I want to do the same by creating magento-2 jquery widget and not by using require inside template. – Shashank Bhatt Apr 1 at 6:36
  • kiwicommerce.co.uk/blog/… try this – Rk Rathod Apr 1 at 6:51
  • I have read the blog but couldn't get config from data-mage-init inside _create method as mentioned in the blog. – Shashank Bhatt Apr 1 at 7:00
  • see step 3..... – Rk Rathod Apr 1 at 7:02

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.