12

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

2 Answers 2

Reset to default
50

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

Improve this answer
15
  • 2
    really you are awesome.there is no end for magento community.its evergreen
    – Sivakumar K
    Dec 5, 2015 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, 2016 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, 2016 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, 2016 at 13:43
  • Is this for real? :S wtf
    – OZZIE
    Sep 27, 2016 at 11:09
7

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 '?'

Improve this answer
2

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.