0

Want to add custom fields after shipping method at magento 2 checkout page. I have created custom module with checkout_index_index.xml and able to add custom fields block at after shipping address with <item name="before-form" xsi:type="array"> but i want it after shipping method.

When customer select shipping method this block show and hide to provide more information about selected shipping method

Find Image below for more information.

enter image description here

thanks!

Pravin
  • 95
  • 18

1 Answers1

0

I needed to do the same thing. Magento's checkout renders out a region under the shipping methods using the following:

<div id="onepage-checkout-shipping-method-additional-load">
    <each args="getRegion('shippingAdditional')" render="" />
</div>

However the shippingAdditional item is actually not defined in the magento code base. So to get your fields to display under the shipping methods you can use the above region. To do this you will need to change parent item to be <item name="shippingAddress" xsi:type="array"> instead of <item name="before-form" xsi:type="array"> and make sure your item is called <item name="shippingAdditional" xsi:type="array">. Something like this:

...
<item name="shippingAddress" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="shippingAdditional" xsi:type="array">
            <item name="displayArea" xsi:type="string">shippingAdditional</item>
            <!-- The rest of your items config here... -->
        </item>
    </item>
</item>
...

Note that you will need to define <item name="displayArea" xsi:type="string">shippingAdditional</item> as without that it wont render.

You can then use some javascript/knockout to show and hide those fields based on the selected Shipping Method.

Glen Robson
  • 908
  • 2
  • 19
  • 42