I want to add custom block below shipping methods and this custom block should be inside of shipping method form. I think following line of code is helpful for adding this.but no idea how to proceed.

<div id="onepage-checkout-shipping-method-additional-load">
                    <!-- ko foreach: getRegion('shippingAdditional') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </div>
up vote 35 down vote accepted

1. Declare module's checkout dependency

app/code/NameSpace/ModuleName/etc/module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="NameSpace_ModuleName" setup_version="0.0.1" active="true">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

2. Overwrite checkout layout

app/code/NameSpace/ModuleName/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="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="shippingAdditional" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="additional_block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">NameSpace_ModuleName/js/view/checkout/shipping/additional-block</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

3. Create JavaScript UI Component

Magento 2 checkout is manage in JavaScript (with Knockout). So you need to create a custom JS compnent. It's will create the link between checkout UI component and your custom HTML template.

app/code/NameSpace/ModuleName/view/frontend/web/js/view/checkout/shipping/additional-block.js

define([
    'uiComponent'

], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'NameSpace_ModuleName/checkout/shipping/additional-block'
        }
    });
});

4. Create HTML template

Then create the HTML template wich going to display in checkout.

app/code/NameSpace/ModuleName/view/frontend/web/template/checkout/shipping/additional-block.html

<div class="checkout-block" id="block-custom">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>

5. Clear cache

Finally run following commands :

php bin/magento cache:clean
php bin/magento setup:upgrade
chmod -R 777 var/*

Download full example demo module from here

  • 1
    really you are awesome.there is no end for magento community.its evergreen – Sivakumar K Dec 5 '15 at 14:44
  • Did you get these errors? Broken reference: No element found with ID 'checkout.header.wrapper'. [] [] Class SR\AdditionalShippingBlock\Model\CustomBlockConfigProvider does not exist [] [] [2016-04-13 10:15:06] main.CRITICAL: Invalid block type: Magento\Checkout\Block\Onepage [] [] – Thiago Figueiro Apr 13 '16 at 10:16
  • Tip for other noobs: the module needs to go in app/code/SR/AdditionalShippingBlock, not app/code/Magento/AdditionalShippingBlock. – Thiago Figueiro Apr 13 '16 at 10:30
  • @sohel rana, i would like to dynamic dropdown instead of textfield at same place, give me suggestion for that. Thanks. – Rakesh Jesadiya May 18 '16 at 13:43
  • Is this for real? :S wtf – OZZIE Sep 27 '16 at 11:09

In presented file "checkout_index_index.xml" there is one small mistake. It must be

<?xml version="1.0"?>

not

<xml version="1.0"?>

Miss first char '?'

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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