In this article, we are going to see how to add content on the checkout sidebar. Follow step by step to get the desired result.
Many developers find difficult to customize checkout page. I have prepared many articles on this page. You can have a look on this page.
Let’s get started,
Step 1: Declaration of Module
It is necessary to create etc folder and add the module.xml file in it
app/code/Thecoachsmb/CheckoutAdd/etc/module.xml
Contents would be:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Thecoachsmb_CheckoutAdd" />
</module>
</config>Step 2: Registration of Module
To register the module, create a registration.php file in the app/code/Thecoachsmb/CheckoutAdd/registration.php
Contents would be:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Thecoachsmb_CheckoutAdd',
__DIR__
);Step 3: Create a “checkout_index_index.xml” file in app\code\Thecoachsmb\CheckoutAdd\view\frontend\layout
Now add the below code:
<?xml version="1.0"?>
<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="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="sidebar_addcontent" xsi:type="array">
<item name="component" xsi:type="string">Thecoachsmb_CheckoutAdd/js/sidebar_addcontent</item>
<item name="displayArea" xsi:type="string">summary</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Thecoachsmb_CheckoutAdd/sidebar_addcontent
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step 4: Create a “sidebar_addcontent.js” file inside the following path:
app\code\Thecoachsmb\CheckoutAdd\view\frontend\web\js
Now add the below code:
define([
'uiComponent',
'ko',
'jquery'
], function (Component, ko, $,) {
'use strict';
return Component.extend({
});
});
Step 5: Create a “sidebar_addcontent.html” file inside the following path:
app\code\Thecoachsmb\CheckoutAdd\view\frontend\web\template
Now add the below code:
<div id="opc-sidebar" class="secondary">
<div style="padding-bottom: 20px;font-size: 16px;">My Content is here</div>
</div>
Conclusion:
In this article we learned about how to Add Custom Content in the Sidebar On Checkout Page in Magento 2. Go ahead add your content here in this html file.
Thanks, Hope this article was useful. do share the feedback.