Magento 2 Checkout Customization
Jan 11, 2020 by Akash

Below are the steps we will use to customize the checkout process. Please note that all of the customized files should be inside the module.

So let’s start.

Step 1: Example from Devdocs document.

From the Magento Devdocs you can get the example of Magento Shipping module which creates a policy component.

Below is the code that adds the component to the layout.

<item name="shipping_policy" xsi:type="array">
  <item name="component" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>

As we can see, the component is just a javascript file (js). So, let’s open it vendor/magento/module-shipping/view/frontend/web/js/view/checkout/shipping/shipping-policy.js

 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.

], function (Component, config) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Shipping/checkout/shipping/shipping-policy'
        config: config()

So we can see that above code is just defines template vendor/magento/module-shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html

So to conclude, a component contains a js and take html file as its template. .

Step 2: Add new Newsletter Register component.

Step 2.1: Create a js file.

Create the newsletter.js
file under Symphisys/HelloWorld/view/frontend/web/js/view directory.

The code:

	function (ko, Component) {
		"use strict";

		return Component.extend({
			defaults: {
				template: 'Symphisys_HelloWorld/newsletter'
			isRegisterNewsletter: true

Step 2.2: Create the template html file.

Create the newsletter.html file under Symphisys /HelloWorld/view/frontend/web/template directory.

The code:

<div class="col-mp mp-12">
    <input type="checkbox" name="newsletter" data-bind="checked: isRegisterNewsletter, attr: {id: 'place-order-newsletter'}"/>
    <label data-bind="attr: {for: 'place-order-newsletter'}"><span data-bind="i18n: 'Register for newsletter'"></span></label>

Step 2.3: Add component to the checkout page’s layout.

Add the following code
to Symphisys/HelloWorld/view/frontend/layout/checkout_index_index.xml just before the shippingMethod form.

<page xmlns:xsi="" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.root">
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="checkout" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <!-- Modifying an existing step-->
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="before-form" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="newsletter" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Symphisys_HelloWorld/js/view/newsletter</item>


Let’s clean the cache, refresh your browser and the result will appear like this

Now, if we want to remove the component then we can do following.

Create a plugin for the for the \Magento\Checkout\Block\Checkout\LayoutProcessor::process method. And implement the around method by adding the following code.

public function aroundProcess($subject, $proceed, $jsLayout)
        $returnValue = $proceed($jsLayout);
        return $returnValue;