How to add a cms static block in Magento 2

How to add a cms static block in Magento 2

While in Magento 1, adding a static block in checkout page used to be an easy task. In Magneto 2 however, the whole checkout is dynamically generated with Knockout on the client side and is built up from a series of KnockoutJS components which are then rendered using the knockout.js templating system. So now in Magneto 2, it is not very easy to include a static block on checkout process as checkout is dynamically loaded and we can’t put anything static inside there.

 

But yes, you still can do this using knockout variable that contains the CMS block content that you can show on the checkout. For this, we need to create a module that will provide the Knockout variable that we will bind with our checkout.  Magento uses global Javascript variable window.checkoutConfig which is used by Knockout.js to compute and display information on the frontend and we are going to use it while we are building our module

 

Basic Idea: As we already discussed above that we gonna use knockout to do this task. By this way we are going through the Magento ways, i.e we will make our CMS content to become a part of the checkout flow by taking content from CMS block and put it in JS object which will then be outputted to frontend via Knockout Bindings along with other components of the checkout page.

 

So let’s start by creating a simple module

 

Step 1: First we will create a new model in

 

app/code/<Vendor>/<Module_Name>/Model/ConfigProvider.php

 

<?php

 

namespace Bizspice\Addcmsblock\Model;

 

 

use Magento\Checkout\Model\ConfigProviderInterface;

use Magento\Framework\View\LayoutInterface;

 

class ConfigProvider implements ConfigProviderInterface

{

            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

            ];

            }

}

This model will create a CMS block upon calling the __construct function. The $blockID argument will determine what block it will load. This renders the block's html and will make it available to global javascript variable to window.checkoutConfig. i.e window.checkoutConfig.cms_block will be used to render block html.

 

 

Step 2: Add new entry to ConfigProvider and declaring CMS block which will be used to parse data from.  For this create

 

<Vendor>/<Module_Name>/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">Bizspice\Addcmsblock\Model\ConfigProvider</item>

            </argument>

            </arguments>

            </type>

            <type name="Bizspice\Addcmsblock\Model\ConfigProvider">

            <arguments>

            <argument name="blockId" xsi:type="string">checkout_block

</argument>

            </arguments>

            </type>

</config>

  

Here we're telling Magento that it has to load our ConfigProvider model and should use the value 'checkout_block' for the $blockId argument in its __construct function. You can now create a CMS block from the backend with identifier name checkout_block or alternatively, change the value to an already existing block identifier.

In the above code,  block is named “checkout_block” (it works with id or identifier of the block. So either put id of block or identifier of block. Here checkout_block is identifier)

 

Step 3: Now here we will play with layout of checkout by adding a node for our static block. As here we add static block in address form so we need to add a uiComponent to the address form. For this create file

app/code/<Vendor>/<Module_Name>/view/frontend/layout/checkout_index_index.xml

 

<?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">Bizspice_Addcmsblock/cms-block</item>

</item>

<item name="sortOrder" xsi:type="string">125</item>

</item>

</item>

</item>

</item>

</item>

</item>

</item>

</item>

</item>

</item>

</item>

</item>

</argument>

</arguments>

</referenceBlock>

</body>

</page>

 

Here in above code we have defined where to add the CMS block in our checkout process. Like in the above code in XML we are adding the new component inside the Shipping Address node. Look at Bizspice_Addcmsblock/cms-block. cms-block will be our template file for the UI component.

 

Step 4: Finally we just need to create the knockout template file for this uiComponent. Create file

 

app/code/<Vendor>/<Module_Name>/view/frontend/web/template/cms-block.html

And use window.checkoutConfig to bind the cms block

 

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

 

Here window.checkoutConfig.cms_block  is the same code we were talking above in our initial step.

Thas it! Your checkout will start displaying content from a static block that you define in your DI file (di.xml).