How to create custom field on checkout billing address in magento2?
I want simple drop down on checkout page just we can use for admin order and this field also saves in the database table like order table and b/c I will use in advertisement.
-
Do you need the dropdown in backend or in frontend checkout?– Herve TribouilloyCommented Oct 14, 2018 at 15:36
Add a comment
|
2 Answers
For Frontend:
In layout file checkout_index_index call the template file which has your dropdown html code.it will be displayed on you checkout page.
Code: file name has checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Test\CommunityCommerce\Block\Charity\Charity" name="charity_charity" after="checkout.cart.coupon" template="Sundial_CommunityCommerce::checkout/cart/charity.phtml">
</block>
</referenceContainer>
</body>
In Template file consists :
file name has charity.phtml
<div class="content" data-role="content" aria-labelledby="block-charity-heading">
<form id="charity-form"
action="#"
method="post"
value="0" />
<?php //echo $block->getBlockHtml('formkey') ?>
<div class="field">
<div class="control">
<select id="charity_id" name="charity_id">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
</div>
</div>
</form>
</div>
</div>
Create column in quote table and sales table using setup scripts using "InstallSchema" it will create column into table.
After that using sales_convert_quote and fieldset.xml it will move to quote value to sales table
The easiest way to obtain the customer data is to ask customers through custom fields at the checkout page are -
Create a new module with this folder structure. For instance, I have created a module with Ecomsolver as Vendor name and Customcheck as the module name.
- The path will be as follows
app/code/Ecomsolver/Customcheck
In this create a file
registration.phpwith the following code<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Ecomsolver_Customcheck', __DIR__ );Now create a folder with name “etc” in Customcheck. Then create XML file in this. Path of XML file will be
app/code/Ecomsolver/Customcheck/etc/module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Ecomsolver_Customcheck" setup_version="1.0.0">
<sequence>
<module name="Magento_Backend"/>
</sequence>
</module>
</config>
- Now create a folder with name “
frontend”. Place a XML file in it. Path of XML file will be
app/code/Ecomsolver/Customcheck/etc/frontend/di.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd>
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
<plugin name="add_custom_field_checkout_form" type="Ecomsolver\Customcheck\Model\Plugin\Checkout\LayoutProcessor" sortOrder="100"/>
</type>
</config>
- Create a folder with name “Model”. Again create a folder in it Plugin -> Checkout. In this create a file. The path of a file will be
Model/Plugin/Checkout/LayoutProcessor.php
<?php
namespace Ecomsolver\Customcheck\Model\Plugin\Checkout;
class LayoutProcessor
{
public function afterProcess
(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,array $jsLayout
)
{
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field'] =
['component' => 'Magento_Ui/js/form/element/abstract','config' =>
[
'customScope' => 'shippingAddress.custom_attributes',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
'options' => [],
'id' => 'custom-field'
],
'dataScope' => 'shippingAddress.custom_attributes.custom_field',
'label' => 'Password',
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => [],
'sortOrder' => 250,
'id' => 'custom-field'
];
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field2'] =
[
'component' => 'Magento_Ui/js/form/element/abstract','config' =>
[
'customScope' => 'shippingAddress.custom_attributes',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
'options' => [],
'id' => 'custom-field2'
],
'dataScope' => 'shippingAddress.custom_attributes.custom_field2',
'label' => 'Confirm Password',
'provider' => 'checkoutProvider',
'visible' => true,
'validation' => [],
'sortOrder' => 260,
'id' => 'custom-field2'
];
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['custom_field3'] =
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' =>
[
'customScope' => 'shippingAddress.custom_attributes',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/checkbox',
'options' => [],
'id' => 'custom-field3'
],
'dataScope' => 'shippingAddress.custom_attributes.custom_field3',
'label' => 'Create Account',
'provider' => 'checkoutProvider',
'visible' => true,
'checked' => false,
'validation' => [],
'sortOrder' => 250,
'id' => 'custom-field3'
];
return $jsLayout;
}
}
