How to add custom field to Shipping Address form in Magento 2 Onepage Checkout?
For example:
add select box like "Country" below phone number field
Add a comment
|
2 Answers
Create new customer address attribute and map this attribute by xml. So after attribute creation create 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="shipping-address-fieldset" xsi:type="array">
<item name="customer_country" xsi:type="array">
<item name="sortOrder" xsi:type="string">400</item>
</item>
<item name="custom_field" xsi:type="array">
<item name="sortOrder" xsi:type="string">410</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Read more about this from here
You can download example module from Here
answered Nov 28, 2015 at 11:11
-
2But that adds an INPUT element. What if I need a SELECT element? I cannot do it at the moment.– jstuardoMar 11, 2016 at 19:39
-
1How about if you need to map that form field (ie checkbox for opt-in) to customer attribute instead of customer address attribute? Jun 1, 2017 at 1:18
-
@sohel-rana I need to add new text field into the default shipping address form. I tried your module and it added 2 fields, but those fields were added at the end of the existing form. How can I put my new field inside the existing form? (Ex: my new field is RefererName and I want to put it after Company and Street Address) , How can I do that? And if I wanted to add more fields, how can I modify LayoutProcessor.php from your module?– JoeyNov 16, 2017 at 11:10
-
i have created an extension for that but not working... can you please help me ? Dec 19, 2017 at 12:14
Check out this tutorial I found for adding delivery date. For other datatypes, like select or test, you can change that in the LayoutProcessorPlugin.
http://oyenetwork.com/articles/magento2-devliery-date-module-creation-from-scratch/
You can also avoid using Observers by hooking into the OrderRepository and writing a beforeSave function.
