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:
- Registration.php : app/code/Vendor/Module/registration.php
- di.xml : app/code/Vendor/Module/etc/frontend/di.xml
- module.xml : app/code/Vendor/Module/etc/module.xml
- CmsConfigProvider.php: app/code/Vendor/Module/Model/ CmsConfigProvider.php
- 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.