<img alt="" src="https://secure.leadforensics.com/150446.png " style="display:none;">
Go to top icon

Magento 2 - How to display CMS block in Checkout Sidebar

Sejal Shah Nov 01, 2018

CMS Digital Commerce Magento 2.0 eCommerce

Using CMS blocks, site administrator can easily manipulate content of the vendor. CMS blocks can be used to display promotional banners, sale blocks, return policies, important information message on some sections of the Vendor etc.

I personally like to use CMS blocks whenever/wherever possible, so that content of the Vendor becomes ‘modular’ and easily manageable.

Adding CMS block to some specific page is not such a hassle, we just need to “register” our CMS block in layouts and define order/position of our CMS block. We then need to call it in templates and that’s it.

Step 1: Creating a module

Vendor Name = Vendor
Module Name = Module

Files you need to create:

  1. Registration.php : app/code/Vendor/Module/registration.php
  2. di.xml : app/code/Vendor/Module/etc/frontend/di.xml
  3. module.xml : app/code/Vendor/Module/etc/module.xml
  4. CmsConfigProvider.php: app/code/Vendor/Module/Model/ CmsConfigProvider.php
  5. sidebar.html: copy of vendor/magento/module-checkout/view/frontend/web/template/sidebar.html
registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_Module',
__DIR__
);

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">Vendor\Module\Model\CmsConfigProvider</item>
</argument>
</arguments>
</type>
<type name="Vendor\Module\Model\CmsConfigProvider">
<arguments>
<argument name="blockId" xsi:type="string">checkout-cms-block</argument>
</arguments>
</type>
</config>

With this code, we are adding new entry to ConfigProvider and we are declaring CMS block which will be used to parse data from.
In the above example, the block is named “checkout_cms_block”.

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

CmsConfigProvider.php

<?php
namespace Vendor\Module\Model;

use \Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\View\LayoutInterface;
use \Magento\Store\Model\StoreManagerInterface;

/**
* Class ConfigProvider
* @codeCoverageIgnore
*/
final class CmsConfigProvider implements ConfigProviderInterface
{

private $layout;
private $storeManager;
private $cmsBlock;

public function __construct(LayoutInterface $layout, StoreManagerInterface $storeManager, $blockId)
{
$this->layout = $layout;
$this->storeManager = $storeManager;
$this->cmsBlock = $blockId;
}

public function getStoreId()
{
return $this->storeManager->getStore()->getId();
}

public function constructBlock($blockId)
{
$storeId = $this->getStoreId();
$block = $this->layout->createBlock('Magento\Cms\Block\Block')
->setBlockId($blockId)->setStoreId($storeId)->toHtml();
return $block;
}

public function getConfig()
{
$cmsBlock = '';
$blockId = $this->cmsBlock;
if (isset($blockId) && $blockId != '') {
$cmsBlock = $this->constructBlock($blockId);
}
return ['cms_block' => $cmsBlock];
}
}

sidebar.html

Add this code in your sidebar.html

<div class="opc-block-shipping-information">
<div data-bind="html: window.checkoutConfig.cms_block"></div>
</div>

And that’s it.

If you coded everything correctly, you should see your CMS block displayed in the sidebar. You can then add your CSS to match it with other components in the sidebar.

Please, note that I’ve created sidebar.html template in my package/theme. Never edit files directly in vendor/magento/* folder.

If something is not working, please check:

  • Is your module properly created and consist all config files with proper values inside?
  • Did you run php bin/magento setup:upgrade after creating the module?
  • Check if you have properly changed code from this article by replacing Vendor/Module with proper vendor and name of your module!
If you have other ideas on how to display CMS block in Checkout Sidebar, would love to hear from you.

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.