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,

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,

You can define mixins file like the above way, using mixins keywords.
The core file name is the key for mixins object.

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

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.