Add Content on the Checkout Sidebar in Magento 2

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.

Related Posts:

Comments (0)