How to Add CMS Block on Checkout Page Sidebar in Magento 2

Spread the love

CMS blocks are referred to as static blocks or content blocks.Today we’ll see how to add CMS block on checkout page in Magento 2.

First You Need to Create Custom module then follow this steps. I have shared a step by step guide to add cms block on checkout sidebar.

Step 1: Create register.php

app/code/Bluethinkinc/CheckoutSidebar/registration.php

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Bluethinkinc_CheckoutSidebar', __DIR__);

?>

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Bluethinkinc_CheckoutSidebar', __DIR__);

Step 2: Create module.xml

app/code/Bluethinkinc/CheckoutSidebar/etc/module.xml

<?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="Bluethinkinc_CheckoutSidebar" setup_version="1.0.0"></module>
</config>

<?xml version="1.0"?>

</config>

Step 3: Create di.xml

app/code/Bluethinkinc/CheckoutSidebar/etc/frontend/di.xml

<?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">Bluethinkinc\CheckoutSidebar\Model\ConfigProvider</item>
           </argument>
       </arguments>
   </type>
   <type name="Bluethinkinc\CheckoutSidebar\Model\ConfigProvider">
       <arguments>
           <argument name="blockId" xsi:type="string">checkout_cms_block</argument>
       </arguments>
   </type>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

<item name="cms_block_config_provider" xsi:type="object">Bluethinkinc\CheckoutSidebar\Model\ConfigProvider</item>

</argument>

</arguments>

</type>

<argument name="blockId" xsi:type="string">checkout_cms_block</argument>

</arguments>

</type>

</config>

Step 4: Create AddBluethinkincBlock.php

app/code/Bluethinkinc/CheckoutSidebar/Setup/Patch/Data/AddBluethinkincBlock.php

<?php

namespace Bluethinkinc\CheckoutSidebar\Setup\Patch\Data;

use Magento\Framework\Setup\ModuleDataSetupInterface;

use Magento\Framework\Setup\Patch\DataPatchInterface;

use Magento\Cms\Model\BlockFactory;

class AddBluethinkincBlock implements DataPatchInterface

{

/**

* @param BlockFactory $blockFactory

*/

public function __construct(

BlockFactory $blockFactory

) {

$this->blockFactory = $blockFactory;

}

/**

* @inheritdoc

*/

public function apply()

{

$cmsBlockData = [

'title' => 'checkout block',

'identifier' => 'checkout_cms_block',

'content' => "<p><strong>checkout bluethinkinc New block</strong></p>",

'is_active' => 1,

'stores' => [0],

'sort_order' => 0

];

$this->blockFactory->create()->setData($cmsBlockData)->save();

}

/**

* @inheritdoc

*/

public static function getDependencies()

{

return [];

}

/**

* @inheritdoc

*/

public function getAliases()

{

return [];

}

}

?>

<?php

namespace Bluethinkinc\CheckoutSidebar\Setup\Patch\Data;

use Magento\Framework\Setup\ModuleDataSetupInterface;

use Magento\Framework\Setup\Patch\DataPatchInterface;

use Magento\Cms\Model\BlockFactory;

class AddBluethinkincBlock implements DataPatchInterface

{

/**

* @param BlockFactory $blockFactory

public function __construct(

BlockFactory $blockFactory

) {

$this->blockFactory = $blockFactory;

}

/**

* @inheritdoc

public function apply()

{

$cmsBlockData = [

'title' => 'checkout block',

'identifier' => 'checkout_cms_block',

'content' => "<p><strong>checkout bluethinkinc New block</strong></p>",

'is_active' => 1,

'stores' => [0],

'sort_order' => 0

];

$this->blockFactory->create()->setData($cmsBlockData)->save();

}

/**

* @inheritdoc

public static function getDependencies()

{

return [];

}

/**

* @inheritdoc

public function getAliases()

{

return [];

}

Step 5: Create ConfigProvider.php

app/code/Bluethinkinc/CheckoutSidebar/Model/ConfigProvider.php

<?php namespace Bluethinkinc\CheckoutSidebar\Model;
 
use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\View\LayoutInterface;
 
class ConfigProvider implements ConfigProviderInterface
{
   /** @var LayoutInterface  */
   protected $_layout;
   protected $cmsBlock;
 
   public function __construct(LayoutInterface $layout, $blockId)
   {
       $this->_layout = $layout;
       $this->cmsBlock = $this->constructBlock($blockId);
   }
 
   public function constructBlock($blockId){
       $block = $this->_layout->createBlock('Magento\Cms\Block\Block')
           ->setBlockId($blockId)->toHtml();
       return $block;
   }
 
   public function getConfig()
   {
       return [
           'cms_block' => $this->cmsBlock
       ];
   }
}
?>

<?php namespace Bluethinkinc\CheckoutSidebar\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

use Magento\Framework\View\LayoutInterface;

class ConfigProvider implements ConfigProviderInterface

{

/** @var LayoutInterface */

protected $_layout;

protected $cmsBlock;

public function __construct(LayoutInterface $layout, $blockId)

{

$this->_layout = $layout;

$this->cmsBlock = $this->constructBlock($blockId);

}

public function constructBlock($blockId){

$block = $this->_layout->createBlock('Magento\Cms\Block\Block')

->setBlockId($blockId)->toHtml();

return $block;

}

public function getConfig()

{

return [

'cms_block' => $this->cmsBlock

];

}

Step 6: Create requirejs-config.js

app/code/Bluethinkinc/CheckoutSidebar/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Checkout/template/sidebar.html': 'Bluethinkinc_CheckoutSidebar/template/sidebar.html'
        },
    }
};

var config = {

map: {

'*': {

'Magento_Checkout/template/sidebar.html': 'Bluethinkinc_CheckoutSidebar/template/sidebar.html'

}

};

Step 7: Create sidebar.html

app/code/Bluethinkinc/CheckoutSidebar/view/frontend/web/template/sidebar.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->

<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>