How to add custom block for shipping methods in onepage checkout in Magento 2

December 8, 2015 - Fire development, Magento 2

Magento 2 Development

To add custom block for shipping methods in onepage checkout in Magento 2, you should do the following actions:

Add the following code to module.xml:

<sequence>
   <module name="Magento_Checkout"/>
</sequence>

</sequence>

And this one to 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" 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="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">SR_AdditionalShippingBlock/js/view/checkout/shipping/additional-block</item>
                                                               </item>
                                                           </item>
                                                       </item>
                                                   </item>
                                               </item>
                                           </item>
                                       </item>
                                   </item>
                               </item>
                           </item>
                       </item>
                   </item>
               </argument>
           </arguments>
       </referenceBlock>
   </body>
</page>

<body>

<item name="component" xsi:type="string">uiComponent</item>

<item name="displayArea" xsi:type="string">shippingAdditional</item>

<item name="component" xsi:type="string">SR_AdditionalShippingBlock/js/view/checkout/shipping/additional-block</item>

</item>

</argument>

</arguments>

</referenceBlock>

</body>

</page>

app/code/NameSpace/ModuleName/view/frontend/web/js/view/checkout/shipping/additional-block.js also requires new code to be added:

define([
   'uiComponent'

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

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

define([

'uiComponent'

], function (Component) {

'use strict';

return Component.extend({

defaults: {

template: 'NameSpace_ModuleName/checkout/shipping/additional-block'

}

});

Now, you can create an html file for the following location

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

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

Clear cache and run upgrade command. Note that the required var folder permission is 777.

php bin/magento setup:upgrade

1	php bin/magento setup:upgrade

You can download the full module here.

Source (Stackexchange Question)(Sohel Rana)

More tips from the Cookbook

Post Tags:custom block Magento 2 Developer’s Cookbook Magento 2 websites onepage checkout shipping methods

← Previous Post Next Post →

Related posts