Magento 2 and how to add custom UI component on checkout

In this post we will demonstrate how to add custom UI component to specific region on Magento 2 checkout page. The main regions are defined in template file: magento_root/vendor/magento/module-checkout/view/frontend/web/template/onepage.html.

You can see regions if you open template file onepage.html. This is knockout template file.

In our example we will add our custom UI component to region authentication.

We already have created module Potkoc/Api. For first step we will create ui component or knockout view model. About knockout you can read and learn more on url: http://learn.knockoutjs.com/ .
Our view model is located in our module on path: magento_root/app/code/Potkoc/Api/view/frontend/web/js/view/testcomponent.js

Our component you can see below:

Our component is using custom template: magento_roo/app/code/Potkoc/Api/view/frontend/web/template/testcomponent.html. Custom template is defined in defaults property, with relative path: Potkoc_Api/testcomponent.

For testing purpose we defined very simple template file which display value of variable “totala“.

Example of template file is below:

If you defined custom template and UI component then last step is defining layout file. Layout file should be defined on path: magento_root/app/code/Potkoc/Api/view/frontend/layout/checkout_index_index.xml.

File name have to be: checkout_index_index.xml, because this is handle of checkout/index/index route. Example of our layout file you can see below:

In layout file you can see that we defined component: Potkoc_Api/js/view/testcomponent and we placed our component in region authentication. With node sortOrder you can define order of rendering components in region authentication.

And finally you will need to see your ui component on checkout. Don’t forget to clean cache or execute: php /bin/magento setup:upgrade

I hope that you understand logic. Enjoy in coding 🙂

You may also like...

3 Responses

  1. Oleksandr says:

    Why displayAreasit&? Should be displayArea!

  2. Thanks for sharing such a nice idea, piece of writing is pleasant, thats why i have read it fully

Leave a Reply