How to get data-mage-init config in our custom magento jquery widget?

Question

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);
}

Answer 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

Answer 2

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.

Answer 3

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.