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

Jan 10, 2017

3026 Artem Demidov

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.

Andrey_Dubina

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey


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.


The No PO Box at Checkout extension allows improving the functionality of Magento based stores by stopping customers from using PO Boxes as shipping address right on the checkout page.

one_page_checkout

One Page Checkout with Cart

Take your online store to the next level with BelVG module

Download here
Andrey Dubina

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

5 Comments

  1. We have customized the checkout as per our need. Now, we have two options in the checkout. One is School and another one is Private person. Customer can checkout via one of the two options. We want to add a datepicker field into the shipping address steps at the option School. How to do that? Please help me.

  2. Hi, Amol
    Unfortunately, your issue will require a separate module, developed particularly for this purpose.

  3. I want to show on cart page custom dropdown with list of products. customer will select three option max and these 3 options (values coming from my custom table). the selected options show show on orders, then admin orders, invoice and even should go in email. i want to know what templates layouts should i put this into. Please help. You can email me on amol@sjinnovation.com. As this will simply grow as separate thread.

  4. 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 *