Payment list template Override using mixins.js in Magento 2.

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.