0

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>
Improve this question

1 Answer 1

Reset to default
0

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>
Improve this answer

Your Answer

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

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