How to customize a checkout step in Magento 2
Vinh Jacker | 12-18-2024
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.
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
- Add a custom checkout field in Magento 2
- Magento 2 Optimized Checkout Page
- How to add a new input form to checkout
- How to add a new step in checkout page
Customize the style of a checkout step.
- Step 1: Understand the example from Devdocs document
- Step 2: Add our new Newsletter Register component
You should know how to create a basic Magento 2 module. All of customized files will be inside this module.
Let’s begin.
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.
<item name="shipping_policy" xsi:type="array">
<item name="component" xsi:type="string">Magento_Shipping/js/view/checkout/shipping/shipping-policy</item>
</item>
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()
});
});
Not much here, it just defines its template vendor/magento/module-shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html
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 Mageplaza/HelloWorld/view/frontend/web/js/view directory.
The code:
define(
[
'ko',
'uiComponent'
],
function (ko, Component) {
"use strict";
return Component.extend({
defaults: {
template: 'Mageplaza_HelloWorld/newsletter'
},
isRegisterNewsletter: true
});
}
);
Step 2.2: Create the template html file.
Create the newsletter.html file under Mageplaza/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>
</div>
Step 2.3: Add our component to the checkout page’s layout.
Add the following code to Mageplaza/HelloWorld/view/frontend/layout/checkout_index_index.xml
We add our component just before the shippingMethod form.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<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">Mageplaza_HelloWorld/js/view/newsletter</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
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.
<item name="config" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
How it is in the whole node
<item name="newsletter" xsi:type="array">
<item name="component" xsi:type="string">Mageplaza_HelloWorld/js/view/newsletter</item>
<item name="config" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
</item>
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.
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Related Post
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started