Extending UI/KnockoutJS components

Extending UI/KnockoutJS components is a process similar to extending the jQuery widgets. Let's for a moment assume we have the Magelicious_Jsco2 module that wants to override our popularProducts component.

The way to do it would be to add the proper mapping under the map key of our <MODULE2_DIR>/view/frontend/requirejs-config.js file:

var config = {
map: {
'*': {
popularProducts: 'Magelicious_Jsco2/js/new-popular-products'
}
}
};

We then create the proper new-popular-products.js file, as follows:

define([
'jquery',
'Magelicious_Jsco/js/popular-products',
'ko',
'mage/translate',
], function ($, popularProductsComponent, ko, $t) {
'use strict';
return popularProductsComponent.extend({
getTitle: function () {
return 'NEW | ' + this._super();
}
});
}
);

The example here shows that we are no longer passing in the instance of uiComponent, rather the instance of the original Magelicious_Jsco/js/popular-products that we wish to extend. Simply using the extend method on our popularProductsComponent object allows us to extend it easily. By redefining the methods of the same name, such as getTitle, we effectively override the same method on the component we are running the extend on.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.22.249.158