Every eCommerce Checkout Page is unique and different because they address a variety of requirements. Not all store owners/customers would need the same set of fields that the Magento platform offers. Here’s where Custom fields come into play. Creating custom fields enables businesses to add fields according to their business model as well as customers’ expectations. This article is about creating custom fields using the UI components in Magento 2, a new feature that allows store owners to add custom fields, per need, to the Checkout Page.

What are UI components in Magento 2?

UI components in Magento 2 are a new approach that makes building user-interface components less cumbersome. For developers, this approach allows reusing components in different locations. Also, they have few advantages over the old Magento 1’s user interface. The UI component approach:

  • has a simplified layout, thus handling XML files is easy.
  • pre-renders data in JSON format, thus more bound with Magento back-end.
  • uses AJAX in the case of updates.

That said, there are two types of basic components: Listing and Form. The scope of this article confines to creating a custom field on the checkout page using the Form component in Magento 2.

The coding starts here…

Let’s imagine a scenario where a store owner wants to provide multiple shipping options to the customer – say free shipping to the customer’s address and also store or warehouse pick up. In the case of store/warehouse pickup, we’d want the customer to pick a preferred warehouse location, Name and Contact number of the person who’s going to take the delivery, and preferred delivery time. Thus, I would need three different custom options (a select option, input fields, and a date component) to save in quote and sales_order table as shipping method options.

You can download the entire module from the below GitHub repository: 

https://github.com/dckapblog/Custom-field-in-checkout-page

Create a new module in the Magento and follow the steps populated below. You could go through the following link to know more about creating a new module: http://devdocs.magento.com/videos/fundamentals/create-a-new-module/

For instance, I have created a module with Dckap as Vendor name and CustomFields as the module name.

Step 1

To create a custom option in the corresponding table, create InstallSchema.php in the path app/code/Dckap/CustomFields/Setup.

Input fields: (input_custom_shipping_field, date_custom_shipping_field, select_custom_shipping_field) of data type text.

Step 2

Among several input fields available in the UI Component system, I have chosen Select, Text, and Date as custom fields. To choose your own input fields, you can refer the following Magento blog for a detailed know-how on UI components:

https://devdocs.magento.com/guides/v2.1/ui_comp_guide/bk-ui_comps.html

To populate the chosen custom fields on the checkout page, create a plugin for the process method, Magento\Checkout\Block\Checkout\LayoutProcessor in the path app/code/Dckap/CustomFields/Plugin/Checkout/LayoutProcessorPlugin.php

where,

elementTmpl → the path to the .html template for the field type used.

component → the path to the .js component.

option → used to display the set of values for select option

template → the path to the .html field template under which the particular type of field is bound.

Step 3

Declare the plugin Dckap\CustomFields\Plugin\Checkout\LayoutProcessorPlugin for the class Magento\Checkout\Block\Checkout\LayoutProcessor in your module’s di.xml.

Step 4

To include the custom fields in shippingMethodItemTemplate,  declare a region custom-shipping-method-fields under the section shippingAddress in the file path app/code/Dckap/CustomFields/view/frontend/layout/checkout_index_index.xml

Step 5

Override the shipping-method-item.html in the path app/code/Dckap/CustomFields/view/frontend/web/template/shipping-address/

Here, I’m going to display the custom fields for the particular shipping method (say, freeshipping). To display other custom fields, use the region custom-shipping-method-fields that is declared as displayArea in checkout_index_index.xml file.

Step 6

To validate the custom fields and display the custom-shipping-method-fields, using selected shipping method, override the shipping js component that is used for rendering the shipping method template in the path app/code/Dckap/CustomFields/view/frontend/web/js/view/shipping.js

Where,

customShippingMethodFields the custom scope declared in LayoutProcessor while constructing the custom UI component fields.

To validate the custom fields, use the function validateCustomFieldsShipping from setShippingInformation so that they can be validated along with default shipping fields. The custom-shipping-method-fields can be displayed using the selectedMethod observable.

Step 7

Override the above shipping js component as a mixin in the file path app/code/Dckap/CustomFields/view/frontend/requirejs-config.js

Step 8

Should you have followed closely and mimicked till Step 7, custom fields should be visible under the required shipping method. Once the fields are displayed, they can be saved in the quote table using a concept of extension attribute. Since we are going to apply the attributes in the shipping information, an extension attributes for \Magento\Checkout\Api\Data\ShippingInformationInterface can be created in the file path app/code/Dckap/CustomFields/etc/extension_attributes.xml.

Step 9

To include the extension attributes in the shipping information, override the Magento_Checkout/js/model/shipping-save-processor/default Component in requirejs-config.js

Step 10

The custom option fields can be set in extension_attributes in the address information payload in the file app/code/Dckap/CustomFields/view/frontend/web/js/shipping-save-processor.js

This payload is set under the shipping address information, while the next step of the checkout process is continued.

Step 11

On clicking the next button of shipping step, the custom shipping method fields will be validated along with the other default shipping information in the shipping js component.
The extended attributes are created for \Magento\Checkout\Api\Data\ShippingInformationInterface for which the implementation class used is Magento\Checkout\Model\ShippingInformationManagement. The Extension attributes are available in address information payload and can be saved in quote table using a plugin before the method saveAddressInformation of the implementation class. Create a plugin in app/code/Dckap/CustomFields/Plugin/Quote/SaveToQuote.php

Step 12

Declare the plugin Dckap\CustomFields\Plugin\Quote\SaveToQuote  for the class Magento\Checkout\Model\ShippingInformationManagement in di.xml

Step 13

Once the extension attribute is available in quote table, we can save the Custom fields in sales_order table. The observer is declared for sales_model_service_quote_submit_before event so that the custom fields are saved while placing an order.
Declare the observer Dckap\CustomFields\Observer\SaveCustomFieldsInOrder in app/code/Dckap/CustomFields/etc/events.xml to save the extension attributes.

Step 14

Create an observer SaveCustomFieldsInOrder.php in the path app/code/Dckap/CustomFields/Observer/ and save the extension attribute values in sales_order table.

Once the order is placed, the custom shipping method fields will be saved in the sales order table. The values can be shown in the order details using these custom fields values.

Hope the article turned out to be useful in creating custom fields in the Checkout page using UI components in Magento 2. Please feel free to drop us a line, should you have any queries or feedback. We’re looking forward to addressing more topics in the future.

 

Be the first to Know

Subscribe to our blog to get the latest articles directly to your inbox.

READY TO DRIVE SALES?

Request a Quote Today

Request a Quote

Leave a Reply

7 Comments on "Creating Custom Fields using Magento 2 UI Components"


Guest
David Alvir
1 month 1 day ago

Hi, amazing tutorial, i’ve created a custom field alredy, but now i need to change dinamically the options o this select, when change post code for example, any idea?

Guest
ASHWINI
1 month 4 days ago

Hiiii,
I found your post is very helpful. As you mentioned its for free shipping(shipping method), if i want to do the same in flat rate or anything else where i should change??

Haritha Sridhar
Author
1 month 2 days ago

Hi Ashwini,

Thanks for reaching out to us. These are the three files where the custom fields can be added specific to shipping method.

To add the fields to the specific shipping method.
/app/code/Dckap/CustomFields/view/frontend/web/template/shipping-address/shipping-method-item.html

To validate fields
/app/code/Dckap/CustomFields/view/frontend/web/js/view/shipping.js

To set the values of custom fields in extension attribute.
/app/code/Dckap/CustomFields/view/frontend/web/js/shipping-save-processor.js

Guest
Gourav Sharma
3 months 5 days ago

Hello,I’m add a custom field in purchase order method at payment form just like “purchase order number” and i can see that field at front end and backend . But the problem is that the data of that field “Medicaid Id” is not save in the database in “medic_id” column in “sales_order_payment” table.If i add some number manually in that column of database then i can see that data at backend successfully.Please tell how to save the data of that custom field in database at “medic_id” column.
Thank’s.

Haritha Sridhar
Author
2 months 26 days ago

Hi Gourav,

Thanks for going through the blog post. As of now, we’re working on the particular problem you’re facing and pretty soon you can expect a separate blog post on the same.

Guest
Liam
4 months 14 days ago

composer.json is missing.
Fields not showing up on checkout.

Haritha Sridhar
Author
3 months 11 days ago

“Thank you, Liam! We will update the composer.json file. The module created is a constraint to the Free shipping method. Have you tried enabling the free shipping method? Are you using any other module which customizes the checkout page? please provide precise information from your Analysis”.