What is Mixins?
- Mixin is alternative to inheritance, without override entire base file, You can add new methods or change/modify the current method output in mixins file.
- Mixins is a class that contains methods for use by other classes without having to be the parent class of those other classes.
- Class Methods are added to or mixed in with parent class methods.
I will show you just a simple demo for mixins,
— Using below mixins, We are overriding list.html file with our mixins and change Payment title with getGroupTitle() method.
Just reference, I have taken Rbj_Checkout as a module name.
The core list.html file declaration using below way in list.js file,
defaults: { template: 'Magento_Checkout/payment-methods/list', visible: paymentMethods().length > 0, configDefaultGroup: { name: 'methodGroup', component: 'Magento_Checkout/js/model/payment/method-group' }, paymentGroupsList: [], defaultGroupTitle: $t('Select a new payment method') },
You can see the template contains the list.html file.
Now We can override template file using Mixins concept,
Create a requirejs-config.js file,
var config = { config: { 'mixins': { 'Magento_Checkout/js/view/payment/list': { 'Rbj_Checkout/js/view/payment/list': true } } } };
You can define mixins file like the above way, using mixins keywords.
The core file name is the key for mixins object.
'mixins': { 'Magento_Checkout/js/view/payment/list': { 'Rbj_Checkout/js/view/payment/list': true } }
Parent file: Magento_Checkout/js/view/payment/list
Mixins file: Rbj_Checkout/js/view/payment/list
Now you need to create mixins file at a location,
Path: app/code/Rbj/Checkout/view/frontend/web/js/view/payment/list.js
/** * Mixin for Magento_Checkout/js/view/payment/list * * set template file using mixins */ define([ 'jquery', ], function ( $ ) { 'use strict'; return function (Payment) { return Payment.extend({ defaults: { template: 'Rbj_Checkout/payment-methods/list', }, /** * Returns payment group title */ getGroupTitle: function () { var title = "Payments list"; return title; } }); } });
Using the above way, We have override core getGroupTitle() method and change the Payment title name.
finally, you have to create a template file,
Path: app/code/Rbj/Checkout/view/frontend/web/template/payment-methods/list.html
Check the browser and your template file is overridden with the new template file.