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>
47

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

14
  • 2
    really you are awesome.there is no end for magento community.its evergreen 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 [] [] 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. 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. May 18 '16 at 13:43
  • Is this for real? :S wtf
    – OZZIE
    Sep 27 '16 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 '?'

2

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .