While in Magento 1, adding a static block on the checkout page used to be an easy task. In Magneto 2, however, the whole checkout is dynamically generated with Knockout on the client-side. It is built up from a series of KnockoutJS components rendered using the knockout.js templating system. So now, in Magneto 2, it is not very easy to include a static block on the checkout process as checkout is dynamically loaded, and we can’t put anything static inside there.
But yes, you still can do this using the knockout variable that contains the CMS block content that you can show on the checkout. We need to create a module that will provide the Knockout variable that we will bind with our checkout. Magento uses the global Javascript variable window.checkoutConfig, which Knockout.js uses 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 are going to use Knockout to do this task. This way, we are going through the Magento ways, i.e. we will make our CMS content a part of the checkout flow by taking content from the CMS block and putting it in the JS object which will then be outputted to the 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 the global javascript variable, window.checkoutConfig. i.e window.checkoutConfig.cms_block will be used to render the block HTML.
Step 2: Add a new entry to ConfigProvider and declare CMS block, which will be used to parse the data. 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 use the value ‘checkout_block’ for the $blockId argument in its __construct function. You can now create a CMS block from the backend with the identifier name checkout_block or, alternatively, change the value to an already existing block identifier.
In the above code, the block is named “checkout_block” (it works with the id or identifier of the block. So either put the id of the block or identifier of the block. Here, checkout_block is the identifier)
Step 3: Now, here we will play with the checkout layout by adding a node for our static block. Here we add a static block in the 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 the 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 talked about in our initial step.
Thas it! Your checkout will start displaying content from a static block in your DI file (di.xml).
