The checkout process page in Magento 2 comprises a range of Knockout.js components, whose configuration and loading methods are defined in a single XML file (depending on how the Magento 2 instance was installed – /app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml or /vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml). The definition included in this file is one abstraction level higher than the standard JS module initialization:
The XML file is converted to JSON and submitted to the core JS module responsible for loading all the components defined in the XML file.
Structure of checkout_index_index.xml
The Checkout configuration file may seem complicated at first (it has more than 500 lines), but once we recognize its components it becomes much easier to read. The most important node is the one which includes the configuration of all elements:
The name attribute in the containing block includes the section name for the component. The following elements can be found inside:
– the parameter specifying the order of rendering
– the alias or path to the module from Require.js
– the area to render the component
– the list of embedded components
– configuration parameters
Adding a new element on the checkout process page
Checkout, like most Magento 2 elements, is a module. According to Magento 2 rules, any module can be extended in two ways: in the template catalogue, or in the catalogue of another module. We can use the example of the module that integrates Poczta Polska services with Magento 2 [INSERT THE STORE LINK] to show how we can add a map with pickup points to the shipping method section in the checkout process.
First look inside the checkout_index_index.xml file to locate the component responsible for displaying shipping options. This location is defined in the following tree path: components > checkout > steps > shipping-step > shippingAddress. After locating it, add our new component in the children section; it will inherit its properties from the default uiComponent:
Unfortunately, when we add any element to the tree we also need to keep the default embedding scheme, which makes our checkout_index_index.xml file rather bulky. Here is the complete file in the module catalogue:
As a result of these changes, a map of the pickup points will be displayed on the checkout process page:
Understanding the shopping process can take much time for anyone who is not well versed with Magento 2, but this is necessary for our everyday work involving feature extension. Compared to Magento 1, Checkout is much better developed despite its complexity. From the technical point of view, its division into components offers many benefits and enables modifications without breaking the universally accepted patterns.
Front-end developer at Unity Group. Tomasz is in charge of visual aspects of our projects. Although he follows all the latest trends in web app development, he prefers proven industry standards over unrestricted experiments. With several years of experience, Tomasz has worked for clients, such as Royal Canin, Rovese, Toyota Nowakowski, Tubes International and Homla.