Display CMS Static Block At Shipping Step Outside Order Summary

magento.stackexchange https://magento.stackexchange.com/questions/321318

Question

I want to display a cms-static block outside summary at shipping & payment step in side bar please check below attachment of output

Shipping Step enter image description here

Payment Page

enter image description here

Find checkout_index_index.xml code below

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        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="sidebar" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="summary" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="cms-block-discount" xsi:type="array">
                                                <item name="component" xsi:type="string">Vendor_CheckoutBlockProvider/js/view/cms-block</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>
</page>

No correct solution

OTHER TIPS

Hope the following code will help.

shipping step: enter image description here

payment step: enter image description here

Create a CMS block from Magento Admin called 'checkout_help' (identifier)

Vendor/Module/Model/CheckoutCmsBlocksConfigProvider.php

<?php
namespace Vendor\Module\Model;

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

class CheckoutCmsBlocksConfigProvider implements ConfigProviderInterface
{
    /**
     * @var LayoutInterface
     */
    private $layout;

    /**
     * @param LayoutInterface $layout
     * @param array $data
     */
    public function __construct(
        LayoutInterface $layout,
        array $data = []
    ) {
        $this->layout = $layout;
    }

    /**
     * @return array
     */
    public function getConfig(): array
    {
        // 'checkout_help' is the CMS block identifier
        return [
            'checkout_help_cms_block_content' => $this->getBlockContent('checkout_help')
        ];
    }

    /**
     * @param string $blockIdentifier
     * @return string
     */
    private function getBlockContent(string $blockIdentifier): string
    {
        return $this->layout
            ->createBlock(Block::class)
            ->setBlockId($blockIdentifier)
            ->toHtml();
    }
}

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="checkout_cms_blocks_config_provider" xsi:type="object">Vendor\Module\Model\CheckoutCmsBlocksConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

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

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">                                       
                                        <item name="sidebarAfter" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="displayArea" xsi:type="string">sidebar-after</item>
                                            <item name="children" xsi:type="array">
                                                <item name="need-help-block" xsi:type="array">
                                                    <item name="component" xsi:type="string">Vendor_Module/js/view/need-help</item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Vendor/Module/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Checkout/template/sidebar.html': 'Vendor_Module/template/sidebar.html'
        }
    },
    config: {
        mixins: {
            'Magento_Checkout/js/view/sidebar': {
                'Vendor_Module/js/view/sidebar-mixin': true
            }
        }
    }
};

Vendor/Module/view/frontend/web/js/view/sidebar-mixin.js

define([
    'ko',
    'Magento_Checkout/js/model/step-navigator',
], function(ko, stepNavigator) {
    'use strict';

    return function(sidebar) {
        return sidebar.extend({
            visible: ko.computed(function () {
                return stepNavigator.steps()[stepNavigator.getActiveItemIndex()] && stepNavigator.steps()[stepNavigator.getActiveItemIndex()].code !== 'welcome';
            }),
            visibleOnMobile: ko.observable(false),
        });
    };
});

Vendor/Module/view/frontend/web/template/sidebar.html

<aside class="opc-sidebar opc-summary-wrapper" data-bind="visible: visible">
    <div class="sidebar-content inner-wrapper-sticky">
        <div id="opc-sidebar">
            <!-- ko foreach: getRegion('summary') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->

            <div class="opc-block-shipping-information">
                <!-- ko foreach: getRegion('shipping-information') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
                <!--/ko-->
            </div>
        </div>

        <div class="opc-sidebar-after">
            <!-- ko foreach: getRegion('sidebar-after') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
    </div>
</aside>

Vendor/Module/view/frontend/web/js/view/need-help.js

define([
    'uiComponent',
    'mage/url'
], function(Component, urlBuilder) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/need-help'
        },
        helpMessage: window.checkoutConfig.checkout_help_cms_block_content
    });
});

Vendor/Module/view/frontend/web/template/need-help.html

<if args="helpMessage">
    <div class="help-block">
        <div class="title" data-role="title" data-bind="i18n: 'Below Summary Content'"></div>
        <div class="content" data-role="content" data-bind="html: helpMessage"></div>
    </div>
</if>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top