How to customize a checkout step in Magento 2

How to edit the custom style of checkout step

Customize the style of a checkout step means removing , disabling or adding a component in the checkout page.

Using custom checkout steps enables you to create special checkout steps that are visible to your customers and support them during the checkout process.

You can explore more about Magento 2 One-step checkout module

Since the topic covers quite a wide range, We will start with the example from Magento Official Devdocs document. And then we will add our own component (newsletter register component)

Related Topics

Customize the style of a checkout step.

Step 1: Understand the example from Devdocs document

Devdocs gives us the example from Magento Shipping module which creates a policy component.
Here is the code that adds the component to the layout.

  
   Magento_Shipping/js/view/checkout/shipping/shipping-policy
  

As you can see, the component is just a javascript file (js). 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.
 */
define([
    'uiComponent',
    'Magento_Shipping/js/model/config'

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

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

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

Step 2: Add our new Newsletter Register component.

Step 2.1: Create a js file.

Create the newsletter.js file under Mavenbird/HelloWorld/view/frontend/web/js/view directory.
The code:

define(
    [
        'ko',
        'uiComponent'
    ],
    function (ko, Component) {
        "use strict";

        return Component.extend({
            defaults: {
                template: 'Mavenbird_HelloWorld/newsletter'
            },
            isRegisterNewsletter: true
        });
    }
);

Step 2.2: Create the template html file.

Create the newsletter.html file under Mavenbird/HelloWorld/view/frontend/web/template directory.
The code:

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

Add the following code to Mavenbird/HelloWorld/view/frontend/layout/checkout_index_index.xml
We add our component just before the shippingMethod form.

    
    
        
                
                    
                        
                            
                                
                                    
                                        
                                            
                                            
                                                
                                                    
                                                        
                                                            
                                                                
                                                                    
                                                                        Mavenbird_HelloWorld/js/view/newsletter
                                                                    
                                                                
                                                            
                                                        
                                                    
                                                
                                            
                                        
                                    
                                
                            
                        
                    
                
        
    

Clean cache, refresh your browser, the result will appear like this

Step 2.4: Disable newsletter register component.

Here is the code to disable a component.

    
       true

How it is in the whole node

      
       Mavenbird_HelloWorld/js/view/newsletter
       
             true
       

Step 2.5: Remove our component

To remove a component, you need to create a plugin for the \Magento\Checkout\Block\Checkout\LayoutProcessor::process method. And implement the around method. This is what Devdocs advices.

As suggested, we implement the aroundProcess method and add the following code

    public function aroundProcess($subject, $proceed, $jsLayout)
{
        unset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['before-form']['children']['newsletter']);
        $returnValue = $proceed($jsLayout);
        return $returnValue;
}

Here is the difference between Disabling and Removing a component when rendering in real time

Conclusion

This tutorial has guided you through how to customize a checkout step in Magento 2. It particularly shows you how to enable and disable the newsletter register component which is one of the important components in Magento 2 checkout. I hope this tutorial is helpful for you to customize your Magento 2 Default checkout and expand your store’s checkout functionalities.