Magento 2: How To Add a New Field On a Checkout Page. Part 2

Magento 2: How To Add a New Field On a Checkout Page. Part 2

In the first part of this article we explained how to add a new field on a checkout page by plugins, that were embedded in Magento 2. So in this part we are going to describe more in details some specific moments of adding a new field on a checkout page.

Let’s start with checkout page description. The description of the page structure is located in vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml  file. In the current layout we can see that checkout page is being output by Magento\Checkout\Block\Onepage block.

Also we can notice in checkout_index_index.xml file, that jsLayout parameter is transferred in Magento\Checkout\Block\Onepage block.

jsLayout – it’s an array that contains the entire structure of the checkout page.

The initialization of jsLayout property in Magento\Checkout\Block\Onepage block occurs in constructor (vendor/magento/module-checkout/Block/Onepage.php file).

Also there is a getJsLayout method in Magento\Checkout\Block\Onepage block, that processes jsLayout array and returns it as a json-string.

In the previous article we were using a plugin that is called after process method in LayoutProcessor class:

In the current plugin $jsLayout array serves as a jsLayout argument, which is defined in checkout_index_index.xml file. Each index of $jsLayout array defines child element from jsLayout argument in checkout_index_index.xml file. For example,  $jsLayout[‘components’][‘checkout’] index accesses the next element from checkout_index_index.xml file.

1 comment

  1. Hi. Do you know how can add manufacurer to chceckout page? Above the product name for example.

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *