15

I would like to override the below file & display my custom block in the li.

magento\vendor\magento\module-checkout\view\frontend\web\template\shipping.html

<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
    <div class="step-title" data-bind="i18n: 'Shipping Address'" data-role="title"></div>
</li>   

<!-- ko if:myBlock --> // Mine need to call block created from Admin
<li>
    <p data-bind="html: myBlock"></p>
</li> 
<!-- /ko -->

<!--Shipping method template-->
<li id="opc-shipping_method"
    class="checkout-shipping-method"
    data-bind="fadeVisible: visible(), blockLoader: isLoading"
    role="presentation">
    <div class="checkout-shipping-method">
        <div class="step-title" data-bind="i18n: 'Shipping Methods'" data-role="title"></div>
    </div>
</li>

If the block is enabled in the admin then it will show a custom li with the block data, otherwise it shows nothing.

Can we check directly in the .html file whether the block is enabled or not?

2

4 Answers 4

28

Here I give example to show custom block above shipping method of checkout

  1. Create di.xml at

app/code/Vendor/Module/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">Vendor\Module\Model\ConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>
  1. Create ConfigProvider.php to define your static block to windows.checkoutConfig

app/code/Vendor/Module/Model/ConfigProvider.php

<?php

namespace Vendor\Module\Model;

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

class ConfigProvider implements ConfigProviderInterface
{
    /** @var LayoutInterface  */
    protected $_layout;

    public function __construct(LayoutInterface $layout)
    {
        $this->_layout = $layout;
    }

    public function getConfig()
    {
        $myBlockId = "my_static_block"; // CMS Block Identifier
        //$myBlockId = 20; // CMS Block ID

        return [
            'my_block_content' => $this->_layout->createBlock('Magento\Cms\Block\Block')->setBlockId($myBlockId)->toHtml()
        ];
    }
}
  1. Override checkout_index_index.xml in your module and define your own shipping component

app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="before-shipping-method-form" xsi:type="array">
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="shipping_custom_block" xsi:type="array">
                                                                            <item name="component" xsi:type="string">Vendor_Module/js/view/shipping/customblock</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>
  1. Now create shipping.js and define your own shipping template file

app/code/Vendor/Module/view/frontend/web/js/view/shipping/customblock.js

define(
    [
        'uiComponent',
        'jquery',
        'ko'
    ],
    function(
        Component,
        $,
        ko
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_Module/shipping/customblock'
            },

            initialize: function () {
                var self = this;
                this._super();
            }

        });
    }
);
  1. Create customblock.html

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

Here I add new product widget in my static block

OUTPUT:

enter image description here

11
  • i have did the same but not working. i cant see static block content at this tab. Dec 21, 2017 at 8:52
  • 1
    @VinayaMaheshwari place your block div at the last in shipping.html to show block after shipping method May 25, 2018 at 12:05
  • 1
    @VinayaMaheshwari It must be browser cache. Check this answer for diffrent way to check changes of knockout js and html files: magento.stackexchange.com/a/227290/35758 May 25, 2018 at 12:41
  • 1
    Yeah! it was browser cache, thanks for your help. May 25, 2018 at 12:58
  • 1
    its not working Jun 26, 2019 at 11:36
7

This is what I did to display a CMS block on checkout page under sidebar. 1. In the templates/onepage.phtml I created a js variable to hold the cms block content like this:

<?php $myCmsBlock = $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('my_cms_block')->toHtml() ?>

<script type="text/javascript">
    var my_cms_block = <?php echo json_encode($myCmsBlock)?>;
</script>

2. In the knockout template file (in my case it was web/js/template/sidebar.html), displayed the cms block content from the above js variable like this:

<div class="opc-help-cms" data-bind="html:my_cms_block">
    </div>

Hope this helps someone! Thanks!

3
  • Simple solution. Just needed to prepare custom onepage.phtml. I used this magento.stackexchange.com/questions/127150/…
    – Gediminas
    Oct 27, 2017 at 14:03
  • do you know what should i do if i want to add it to payment step? i tried to add what you mentioned above to vendor/magento/module-checkout/view/frontend/web/template/onepage.html and payment.html but doesn't make any effect. magento.stackexchange.com/questions/296500/… Nov 21, 2019 at 23:00
  • payment.html should be able to access the js variable from onepage.phtml. Make sure its rendered properly by printing it on console in checkout page Dec 5, 2019 at 11:27
0

Create di.xml at

app/code/Vendor/Module/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">Vendor\Module\Model\CustomConfigProvider</item>
            </argument>
        </arguments>
    </type>

    <type name="Vendor\Module\Model\CustomConfigProvider">
       <arguments>
           <argument name="blockId" xsi:type="string">my_static_block</argument>
       </arguments>
   </type>
    
</config>

Now Create CustomConfigProvider.php

<?php

namespace Vendor\Module\Model;

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

class CustomConfigProvider implements ConfigProviderInterface
{
    /** @var LayoutInterface  */
    protected $_layout;

    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 [
            'my_block_content' => $this->cmsBlock
        ];
    }
}

Because the variable has been added to the global window.checkoutConfig variable, now you can use window.checkoutConfig.cms_block variable to call that content.

Now create shipping.js and define your own shipping template file

app/code/Vendor/Module/view/frontend/web/js/view/shipping/customblock.js

define(
    [
        'uiComponent',
        'jquery',
        'ko'
    ],
    function(
        Component,
        $,
        ko
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_Module/shipping/customblock'
            },

            initialize: function () {
                var self = this;
                this._super();
            }

        });
    }
);

Create customblock.html

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

Override checkout_index_index.xml in your module

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="before-shipping-method-form" xsi:type="array">
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="shipping_custom_block" xsi:type="array">
                                                                            <item name="component" xsi:type="string">Vendor_Module/js/view/shipping/customblock</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

IMPORTANT :-

My answer is almost same as Prince's Answer. just I declared CMS Block Identifier in frontend/di.xml instead of write it in CustomConfigProvider. I passed CMS Block Identifier using di.xml instead of hard coded in CustomConfigProvider.php file

1
-3

add static block in phtml fie :

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>

add block using XML :

<referenceContainer name="content">
    <block class="Magento\Cms\Block\Block" name="block_identifier">
       <arguments>
         <argument name="block_id" xsi:type="string">block_identifier</argument>
       </arguments>
    </block>
</referenceContainer>

add block in cms page :

{{block class="Magento\Cms\Block\Block" block_id="block_identifier"}}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.