2

Would like to add CMS Page/Block/Widget on Checkout Page before Shipping Method section.

How to achieve this?

Need to overwrite magento\app\code\Custom\Module\view\frontend\layout\checkout_index_index.xml

Prefer Block When it's enabled from Admin it will display otherwise not.

2

It's big solution. So follow step by step. You need to change Vendor and Modulename if needed.

SR/StackExchange/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<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="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">before-shipping-method-form</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="custom_block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">SR_StackExchange/js/view/custom-block</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

SR/StackExchange/view/frontend/web/js/view/custom-block.js

define([
    'jquery',
    'ko',
    'uiComponent'
], function ($, ko, Component) {
    'use strict';
    console.log(window.checkoutConfig.custom_config);
    return Component.extend({
        defaults: {
            template: 'SR_StackExchange/custom-block'
        },
        visibleCustomBlock: window.checkoutConfig.custom_config
    });
});

SR/StackExchange/view/frontend/web/template/custom-block.html

<!-- ko if:visibleCustomBlock -->
<h1>Custom Block</h1>
<!-- /ko -->

SR/StackExchange/Model/CustomConfigProvider.php

namespace SR\StackExchange\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

class CustomConfigProvider implements ConfigProviderInterface
{
    /**
     * @var \Magento\Store\Model\StoreManagerInterface
     */
    protected $storeManager;
    /**
     * @var \Magento\Framework\App\Config\ScopeConfigInterface
     */
    protected $scopeConfig;
    /**
     * @param \Magento\Store\Model\StoreManagerInterface $storeManager
     * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
     */
    public function __construct(
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ) {
        $this->storeManager = $storeManager;
        $this->scopeConfig = $scopeConfig;
    }

    /**
     * {@inheritdoc}
     */
    public function getConfig()
    {
        $store = $this->getStoreId();
        $custom_config = $this->scopeConfig->getValue('your/config/path', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);

        $config = [
            'custom_config' => $custom_config
        ];
        return $config;
    }

    public function getStoreId()
    {
        return $this->storeManager->getStore()->getStoreId();
    }
}

SR/StackExchange/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="custom_config_provider" xsi:type="object">SR\StackExchange\Model\CustomConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Clear cache.

  • $this->scopeConfig->getValue('your/config/path', $store) This is Config value right. Need to use created Block so need to pass Identifier for that – Ankit Shah Jan 25 '17 at 6:16
  • Yes, it's system config value. You need to create your own system.xml for configuration. – Sohel Rana Jan 25 '17 at 6:21
  • Where can i set my Block "Identifier" which i created from Admin? – Ankit Shah Jan 25 '17 at 6:33
  • You need to pass all data through config param. because checkout render using knockoutjs. – Sohel Rana Jan 25 '17 at 6:39
  • It's almost this right? magento.stackexchange.com/questions/92734/… – Ankit Shah Jan 25 '17 at 6:48
0

Not sure it requires coding or not.

Can we manage with this?

Go to Admin -> Content -> Blocks

Create Block Named: Shipping Info

Go to Admin -> Content -> Widgets

Create Widget & Save with below options

Layout Updates

Display On : Specified Page
Page: One Page Checkout
Container: Main Content Container

enter image description here Select your created block. It will show Under "Shipping Methods" after all options.

Is there way we can show above "Shipping Methods" text? I'm not able to manage that.

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

Is there a way that we can make Position on above file. So requires less coding?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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