Category : frontend

Magento 2 : How to add a knockout component

We can add a knockout component to add some javascript behaviour in our pages. This is how to do it step by step.

1 . In the existing template, in which you want to include the knockout component, you first need to declare the component using the declarative notation and using the <script type="text/x-magento-init" /> tag.

This allows you to specify the component, basically the js file and the associated template.

<script type="text/x-magento-init">
    {
        "#demo-component-container": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "demo-ko-component": {
                        "component" : "MyNamespace_MyModule/js/ko-component",
                        "config" : {
                            "template":  "MyNamespace_MyModule/ko-template"
                        }
                    }
                }
            }
        }
    }
</script>

2. In the same template, you then need to declare the container that will receive the component.

<div id="demo-component-container" data-bind="scope: 'demo-ko-component'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

3. You need to create the js component.

It has to be place in app/code/MyNamespace/MyModule/view/frontend/web/js/ko-component.js.

For the purpose of the example, we are simply setting a property inputValue that we will use in the template.

/**
 * @license http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 * @author Didier Berlioz <berliozd@gmail.com>
 * @copyright Copyright (c) 2016 Addeos (http://www.addeos.com)
 */

define(['jquery', 'uiComponent', 'ko'], function ($, Component, ko) {
        'use strict';
        return Component.extend({
            initialize: function () {
                this._super();
                this.inputValue = ko.observable('my input value');
            }
        });
    }
);

4. You need to create the component template.

It will be placed here app/code/Namespace/Module/view/frontend/web/template/ko-template.html .

As said earlier, in the template we will just bind an input tag with the property inputValue set in the js component.

<p>Here is my knockout template.</p>
<input type="text" data-bind="value: inputValue">

And that’s all.

Magento 2 : How to add a jquery widget

When you need to add javascript in your magento 2, one solution is to implement a jQuery widget.
It’s pretty simple and straight forward.
This is how to do it step by step.

1. In the phtml template, your need to specify the component that will be available for the dom element :

<script type="text/x-magento-init">
{
  “#dom-id": {
    “componentName": {}
  }
}
</script>

Here componentName will be available for #dom-id

2. Then add the require js config
In <namespace>/<module>/view/frontend/requirejs-config.js add :

var config = {
map: {
    '*': {
      componentName: 'Namespace_Module/js/component'
    }
  }
};

Here you specify that the component componentName will map <namespace>/<module>/js/component.
In other words it will map : /app/code/<namespace>/<module>/view/frontend/web/js/component.js

3. Then create the jQuery widget itself :

In /<namespace>/<module>/view/frontend/web/js/component.js
Add the following code :

define(['jquery','moment'], function ($, moment) {
      'use strict';

      $.widget('<namespace>.<module>', {
         _create: function () {
            Console.log(‘boo’);
          }
     });
     return $.<namespace>.<module>;
});

And that’s it.