{"id":132280,"date":"2018-08-22T00:07:44","date_gmt":"2018-08-22T00:07:44","guid":{"rendered":"http:\/\/inchoo.net\/?p=31722"},"modified":"2018-08-22T00:07:44","modified_gmt":"2018-08-22T00:07:44","slug":"how-to-display-cms-block-in-magento-2-checkout","status":"publish","type":"post","link":"https:\/\/www.sushilkumar.ind.in\/blog\/magento-2\/how-to-display-cms-block-in-magento-2-checkout\/","title":{"rendered":"How to display CMS block in Magento 2 Checkout"},"content":{"rendered":"

Working with CMS blocks was one of the reasons Magento was and is so popular. Using CMS blocks, site administrator can easily manipulate content of the store. CMS blocks can be used to display promotional banners, sale blocks, return policies, important information message on some sections of the store etc. CMS blocks can carry plain text or chunks of HTML\/JS\/CSS code which means they can be used for even more complex content delivery like sliders, product carousels etc.<\/p>\n

I personally like to use CMS blocks whenever I can so that content of the store becomes more \u201cmodular\u201d and easily manageable.<\/span><\/p>\n

CMS blocks at checkout can have many usages like displaying some information for specific shipping method of some promotional content in order to convince the user to spend more before he checks out.<\/p>\n

Adding CMS block to some specific position\/page is not such a hassle, we just need to \u201cregister\u201d our CMS block in layouts and define order\/position of our CMS block. We then need to call it in templates and that\u2019s it. CMS block is now part of the content and will be rendered\/delivered when needed.<\/p>\n

Adding CMS block to Magento 2 Checkout is a bit more complex task since the whole checkout is built up from a series of KnockoutJS<\/strong> components which are then rendered using the knockout.js templating system. Magento 2 defines these components and their mutual relationship in a large XML file. To pull the data from the server, Magento uses global Javascript variable window.checkoutConfig<\/strong> which is then used by Knockout.js to compute and display information on the frontend.<\/p>\n

In short, the whole checkout is dynamically loaded and we can’t put anything \u201cstatic\u201d inside.<\/p>\n

Hopefully, there is a way to insert CMS block inside checkout flow.<\/p>\n

Since the whole checkout is bundled from various JS components, approaches on this task will vary depending on the CMS block position. However, each approach has the same initial step.<\/p>\n

Idea is to take content from CMS block and put it in JS object which will then be outputted to frontend via Knockout Bindings. That way, our CMS content becomes part of the checkout flow and it is loaded alongside with other components. If you want to hang out with components, act as a component!<\/p>\n

Creating a module<\/h2>\n

If you don\u2019t know how to create Magento 2 module, follow steps in this article<\/a> by my colleague Hrvoje Ivancic<\/a>.<\/p>\n

I would suggest that you use netz98 magerun CLI<\/a> tools extension which is a helpful asset during development. For example, you can create a module with all necessary files with just one command.<\/p>\n

Name the module as you wish. I will use Vendor for vendor<\/strong> and ModuleName<\/strong> for module name.<\/p>\n

After you have created module with all necessary files, we will add\/edit few of them to achieve our goals.
\nPlease, don’t forget to do setup:upgrade after you have created your module.<\/p>\n

Adding CMS block in Checkout sidebar<\/h2>\n

Edit Vendor\/ModuleName\/etc\/frontend\/di.xml<\/em> file:<\/p>\n

<?xml version="1.0"?>\n<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\\ModuleName\\Model\\ConfigProvider<\/item> <\/argument> <\/arguments> <\/type> <type name="Vendor\\ModuleName\\Model\\ConfigProvider"> <arguments> <argument name="blockId" xsi:type="string">checkout_cms_block<\/argument> <\/arguments> <\/type>\n<\/config><\/code><\/pre>\n
With this code, we are adding new entry to ConfigProvider<\/strong> and we are also declaring CMS block which will be used to parse data from.
\nIn the above example, a block is named \u201ccheckout_cms_block\u201d (it works with id or identifier of the block).<\/p>\n
Please make sure that and paths match the name of your block. In above example, path is Vendor\\ModuleName\\Model\\ConfigProvider<\/em>.<\/p>\n
Next, we will create new entry for Config Provider by creating or editing Vendor\/ModuleName\/Model\/ConfigProvider.php<\/em>:<\/p>\n
<?php<\/span> namespace<\/span> Vendor\\ModuleName\\Model;<\/span>\n \nuse<\/span> Magento\\Checkout\\Model\\ConfigProviderInterface;<\/span>\nuse<\/span> Magento\\Framework\\View\\LayoutInterface;<\/span>\n \nclass<\/span> ConfigProvider implements ConfigProviderInterface\n{<\/span> \/** @var LayoutInterface *\/<\/span> protected<\/span> $_layout<\/span>;<\/span> protected<\/span> $cmsBlock<\/span>;<\/span>\n  public<\/span> function<\/span> __construct(<\/span>LayoutInterface $layout<\/span>,<\/span> $blockId<\/span>)<\/span> {<\/span> $this<\/span>-><\/span>_layout =<\/span> $layout<\/span>;<\/span> $this<\/span>-><\/span>cmsBlock<\/span> =<\/span> $this<\/span>-><\/span>constructBlock<\/span>(<\/span>$blockId<\/span>)<\/span>;<\/span> }<\/span>\n  public<\/span> function<\/span> constructBlock(<\/span>$blockId<\/span>)<\/span>{<\/span> $block<\/span> =<\/span> $this<\/span>-><\/span>_layout-><\/span>createBlock<\/span>(<\/span>'Magento\\Cms\\Block\\Block'<\/span>)<\/span> -><\/span>setBlockId<\/span>(<\/span>$blockId<\/span>)<\/span>-><\/span>toHtml<\/span>(<\/span>)<\/span>;<\/span> return<\/span> $block<\/span>;<\/span> }<\/span>\n  public<\/span> function<\/span> getConfig(<\/span>)<\/span> {<\/span> return<\/span> [<\/span> 'cms_block'<\/span> =><\/span> $this<\/span>-><\/span>cmsBlock<\/span> ]<\/span>;<\/span> }<\/span>\n}<\/span><\/code><\/pre>\n
Since we have added our own variable to global window.checkoutConfig<\/strong> variable, we can now call that content using window.checkoutConfig.cms_block<\/strong> variable.<\/p>\n
Now we just need to bind that variable to some HTML element and Knockout.JS will do the rest.<\/p>\n
Here is app\/design\/frontend\/Vendor\/ThemeName\/Magento_Checkout\/web\/template\/sidebar.html<\/em><\/p>\n
 <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><\/code><\/pre>\n
And that\u2019s it. <\/p>\n
If you did everything right, you should see your CMS block displayed in the sidebar.<\/p>\n
Please, note that I’ve created sidebar.html template in my package\/theme. Never edit files directly in vendor\/magento\/* folder.<\/p>\n
Adding CMS block to address form<\/h2>\n
For this task, we will use a bit different approach.
\nWe will change the content of app\/code\/Vendor\/ModuleName\/Model\/ConfigProvider.php<\/em>
\nto this:<\/p>\n
<?php<\/span>\n \nnamespace<\/span> Vendor\\ModuleName\\Model;<\/span>\n \n \nuse<\/span> Magento\\Checkout\\Model\\ConfigProviderInterface;<\/span>\nuse<\/span> Magento\\Cms\\Block\\Widget\\Block;<\/span>\n \nclass<\/span> ConfigProvider implements ConfigProviderInterface\n{<\/span> protected<\/span> $cmsBlockWidget<\/span>;<\/span>\n  public<\/span> function<\/span> __construct(<\/span>Block $block<\/span>,<\/span> $blockId<\/span>)<\/span> {<\/span> $this<\/span>-><\/span>cmsBlockWidget<\/span> =<\/span> $block<\/span>;<\/span> $block<\/span>-><\/span>setData<\/span>(<\/span>'block_id'<\/span>,<\/span> $blockId<\/span>)<\/span>;<\/span> $block<\/span>-><\/span>setTemplate<\/span>(<\/span>'Magento_Cms::widget\/static_block\/default.phtml'<\/span>)<\/span>;<\/span> }<\/span>\n  public<\/span> function<\/span> getConfig(<\/span>)<\/span> {<\/span> return<\/span> [<\/span> 'cms_block'<\/span> =><\/span> $this<\/span>-><\/span>cmsBlockWidget<\/span>-><\/span>toHtml<\/span>(<\/span>)<\/span> ]<\/span>;<\/span> }<\/span>\n}<\/span><\/code><\/pre>\n
Then, create app\/code\/Vendor\/ModuleName\/view\/frontend\/layout\/checkout_index_index.xml<\/em>
\nwith this content:<\/p>\n
<?xml<\/span> version<\/span>="1.0"<\/span>?><\/span><\/span>\n \n<page<\/span> xmlns:xsi<\/span>="http:\/\/www.w3.org\/2001\/XMLSchema-instance"<\/span> layout<\/span>="checkout"<\/span> xsi:noNamespaceSchemaLocation<\/span>="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd"<\/span>><\/span><\/span> <body><\/span><\/span><\/span> <referenceBlock<\/span> name<\/span>="checkout.root"<\/span>><\/span><\/span> <arguments><\/span><\/span><\/span> <argument<\/span> name<\/span>="jsLayout"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="components"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="checkout"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="children"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="steps"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="children"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="shipping-step"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="children"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="shippingAddress"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="children"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="shipping-address-fieldset"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="children"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="cms-block"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="component"<\/span> xsi:type<\/span>="string"<\/span>><\/span><\/span>uiComponent<\/item><\/span><\/span><\/span> <item<\/span> name<\/span>="config"<\/span> xsi:type<\/span>="array"<\/span>><\/span><\/span> <item<\/span> name<\/span>="template"<\/span> xsi:type<\/span>="string"<\/span>><\/span><\/span>Vendor_ModuleName\/cms-block<\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <item<\/span> name<\/span>="sortOrder"<\/span> xsi:type<\/span>="string"<\/span>><\/span><\/span>1<\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/item><\/span><\/span><\/span> <\/argument><\/span><\/span><\/span> <\/arguments><\/span><\/span><\/span> <\/referenceBlock><\/span><\/span><\/span> <\/body><\/span><\/span><\/span>\n<\/page><\/span><\/span><\/span><\/code><\/pre>\n
We have now added new UIcomponent to the address form. That component will hold the content of our CMS block. As I mentioned above, components load order is managed inside XML files. As you can see, I have set 1 for sortOrder with means my component will be loaded first inside address form.
\nWatch for this line Vendor_ModuleName\/cms-block<\/item><\/strong> and change it.
\nNow that we have everything set, we just need a knockout template to output the CMS block data.<\/p>\n
Create app\/code\/Vendor\/ModuleName\/view\/frontend\/web\/template\/cms-block.html<\/em>
\nwith this content:<\/p>\n
<div data-bind="html: window.checkoutConfig.cms_block"><\/div><\/code><\/pre>\n
And that\u2019s it. Now your CMS block should be displayed in address form and rendered first.
\nGiven examples work with clean Magento 2.2 installation. Luma theme was used for testing purposes.<\/p>\n
If something is not working, please check:<\/p>\n