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> </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.
*/
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 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:
define(
[
'ko',
'uiComponent'
],
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>
</div>
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="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">Symphisys_HelloWorld/js/view/newsletter</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
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)
{
unset($jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['before-form']['children']['newsletter']);
$returnValue = $proceed($jsLayout);
return $returnValue;
}
Share
Tags
Categories
Akash
Sr. Magento Developer
Symphisys
Jan 11, 2020