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

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

Answer 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.

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.

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

Answer 4

In Magento 2, the data-mage-init attribute is used to initialize JavaScript components and widgets. It allows you to configure and instantiate JavaScript components directly from HTML markup.

If you want to access the data-mage-init configuration in your custom jQuery widget, you can follow these steps:

1. Include jQuery: Ensure that jQuery is included in your Magento theme. Magento 2 already includes jQuery by default, so you might not need to include it separately.

2. Create a Custom Widget: Create your custom jQuery widget. For example, let's say you are creating a widget called customWidget. Create a new JavaScript file for your widget (e.g., custom-widget.js) and define your widget:

   define(['jquery', 'mage/translate'], function($){
    'use strict';
    $.widget('customNamespace.customWidget', {
    options: {
    // Your widget options go here
    },
    _create: function() {
    // Initialization code goes here
    var config = this.options;
    // Access data-mage-init configuration
    var mageInitConfig = this.element.data('mageInit');
    if (mageInitConfig) {
    // Access the configuration and merge it with your widget options if needed
    $.extend(true, config, mageInitConfig);
    }
    // Your custom initialization logic goes here
    }
    });
    return $.customNamespace.customWidget;
   });
   

3. Include Your Widget: Make sure to include your custom JavaScript file in your layout XML or template file where the widget should be used. You can use the data-mage-init attribute to initialize your widget and provide configuration:

   <script type="text/x-magento-init">
    {
    "*": {
    "customNamespace/customWidget": {
    // Your widget options go here
    }
    }
    }
   </script>
   

   Alternatively, you can include your JavaScript file using RequireJS in your layout XML file:

   <head>
    <script src="Vendor_Module::path/to/custom-widget.js"/>
   </head>
   

   And then, in your template file or layout XML, use the data-mage-init attribute:

   <div data-mage-init='{"customNamespace/customWidget": {"option1": "value1", "option2": "value2"}}'>
    <!-- Your widget container content goes here -->
   </div>
   

By following these steps, you should be able to access the data-mage-init configuration within your custom Magento jQuery widget and merge it with your widget options if necessary. Adjust the code according to your specific requirements and the structure of your custom widget.