How To Add Additional CMS Block in Checkout Page Magento 2?

CMS blocks are what actually made Magento one of the most popular eCommerce platforms in the market.

Through CMS blocks, store administrators can easily manipulate the content of the store. But, when it comes to adding an additional CMS block to the checkout page, the process is a bit complicated.

The reason for this is because the checkout page in Magento is dynamically loaded and thus we cannot put anything static inside it.

So in today’s post, we’re going to teach you guys how to add an additional CMS block to Magento 2 checkout page.

Step-by-Step Process to Add Additional CMS Block in Checkout Page Magento 2

Please follow the below steps to learn how to add an additional CMS block in Magento 2 checkout page.

Step 1 – Create a Module

First of all, we need to create a module in order to add an additional CMS block to the Magento 2 checkout page.

If you haven’t created a module before, you can check out the tutorial on how to create a simple module in Magento 2.

Once you’ve created a new module with all the necessary files, you need to add or edit some details in it.

But before you do that, make sure that you have executed setup:upgrade command after creating the module.

Step 2 – Add CMS Block in Checkout Sidebar

Now, you need to edit the di.xml file stored in MageDelight/ModuleName/etc/frontend/ folder with the following code.

<?xml version=”1.0″?>
<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance“
       xsi:noNamespaceSchemaLocation=”urn:magento:framework:ObjectManager/etc/config.xsd”>
   <type name=”Magento\Checkout\Model\CompositeConfigProvider”>
       <arguments>
           <argument name=”configProviders” xsi:type=”array”>
               <item name=”cms_block_config_provider” xsi:type=”object”>MageDelight\ModuleName\Model\ConfigProvider</item>
           </argument>
       </arguments>
   </type>
   <type name=”MageDelight\ModuleName\Model\ConfigProvider”>
       <arguments>
           <argument name=”blockId” xsi:type=”string”>checkout_cms_block</argument>
       </arguments>
   </type>
</config>

The above code will basically add a new entry to ConfigProvider along with CMS block, which will be later used for parsing data from is declared.

Remember, the path MageDelight\ModuleName\Model\ConfigProvider must be matched with your block’s name.

If it does, then after that you either create or edit MageDelight/ModuleName/Model/ConfigProvider.php in order to create a new entry for the Config Provider using the below code.

<?phpnamespaceMageDelight\ModuleName\Model;
useMagento\Checkout\Model\ConfigProviderInterface;
useMagento\Framework\View\LayoutInterface;
classConfigProviderimplementsConfigProviderInterface
{
/**@varLayoutInterface*/
protected$_layout;
protected$cmsBlock;
publicfunction__construct(LayoutInterface$layout,$blockId)
{
$this->_layout=$layout;
$this->cmsBlock=$this->constructBlock($blockId);
}
publicfunctionconstructBlock($blockId){
$block=$this->_layout->createBlock('Magento\Cms\Block\Block')
->setBlockId($blockId)->toHtml();
return$block;
}
publicfunctiongetConfig()
{
return[
'cms_block'=>$this->cmsBlock
];
}
}

As you can see in the above code, the variable has now been added to the global window.checkoutConfig variable, which means you can now use window.checkoutConfig.cms_block variable to call that content.

And after that, you need to bind that variable to any HTML element.

For this tutorial, we will add the new CMS block to the checkout page sidebar by adding the following code in the app/design/frontend/MageDelight/ThemeName/Magento_Checkout/web/template/sidebar.html

<div id="opc-sidebar"
    data-bind="afterRender:setModalElement, mageInit: {
   'Magento_Ui/js/modal/modal':{
       'type': 'custom',
       'modalClass': 'opc-sidebar opc-summary-wrapper',
       'wrapperClass': 'checkout-container',
       'parentModalClass': '_has-modal-custom',
       'responsive': true,
       'responsiveClass': 'custom-slide',
       'overlayClass': 'modal-custom-overlay',
       'buttons': []
   }}">
   <!-- ko foreach: getRegion('summary') -->
       <!-- ko template: getTemplate() --><!-- /ko -->
   <!--/ko-->
   <div data-bind="html: window.checkoutConfig.cms_block"></div>
   <div class="opc-block-shipping-information">
       <!-- ko foreach: getRegion('shipping-information') -->
       <!-- ko template: getTemplate() --><!-- /ko -->
       <!--/ko-->
   </div>
</div>

Once you’ve added the above code in Sidebar.html, you can see the new CMS block displayed in the checkout page sidebar.

Step 3 – Add CMS Block to Address Form

In addition to the checkout page sidebar, you can also add an additional CMS block to the address form.

To add CMS block to the address form, we will have to change the content of the ConfigProvider.php file in the app/code/MageDelight/ModuleName/Model/ folder with the following.

<?php
 
namespace MageDelight\ModuleName\Model;
 
 
use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Cms\Block\Widget\Block;
 
class ConfigProvider implements ConfigProviderInterface
{
   protected $cmsBlockWidget;
 
   public function __construct(Block $block, $blockId)
   {
       $this->cmsBlockWidget = $block;
       $block->setData('block_id', $blockId);
       $block->setTemplate('Magento_Cms::widget/static_block/default.phtml');
   }
 
   public function getConfig()
   {
       return [
           'cms_block' => $this->cmsBlockWidget->toHtml()
       ];
   }
}

After that, we also need to create a checkout_index_index.xml file in the app/code/MageDelight/ModuleName/view/frontend/layout/ folder and add the following code.

<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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">
                                       <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="shipping-address-fieldset" xsi:type="array">
                                                           <item name="children" xsi:type="array">
                                                               <item name="cms-block" xsi:type="array">
                                                                   <item name="component" xsi:type="string">uiComponent</item>
                                                                   <item name="config" xsi:type="array">
                                                                       <item name="template" xsi:type="string">MageDelight_ModuleName/cms-block</item>
                                                                   </item>
                                                                   <item name="sortOrder" xsi:type="string">1</item>
                                                               </item>
                                                           </item>
                                                       </item>
                                                   </item>
                                               </item>
                                           </item>
                                       </item>
                                   </item>
                               </item>
                           </item>
                       </item>
                   </item>
               </argument>
           </arguments>
       </referenceBlock>
   </body>
</page>

Once you add the code, the new UIComponent will be added to the address form. And the content of the new CMS block will now be stored in that component.

You can manage the components load order from XML files. 

For instance, you may see that the sortOrder is set to 1, meaning that your component will be loaded first in the address form.

Now, the last thing you need is a Knockout template in order to output the CMS block data.

Next, we need to add the following code to create cms-block.html file in the app/code/MageDelight/ModuleName/view/frontend/web/template/ folder.

<div data-bind="html: window.checkoutConfig.cms_block"></div>

Finally, after you follow all these steps, you can see an additional CMS block being added to both the address bar as well as checkout sidebar. 

Final Thoughts…

There you have it! – The easiest way to add an additional CMS block in the checkout page in Magento 2.

We hope that you found this tutorial helpful. If you have any doubts, please ask them in the comments below.

And if you need our professional assistance, feel free to contact us anytime.