7

I have tried to add new field in magento2 billing address section. I have followed below link to add new field in shipping address block

http://oyenetwork.com/articles/magento2-devliery-date-module-creation-from-scratch/

I have added new field to shipping address section successfully. But in my site, I have been using "Virtual products". So I want to add my new custom field into billing section. I just modified that "LayoutProcessorPlugin.php" code like below

$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children']['delivery_date']

instead of

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['delivery_date']

But it doesn't working. How to add my new custom field to Billing address block in magento2?

12

you need to create a plugin in your custom module ( the one that you used to create the custom attribute ), and have the code something like the following one:

namespace Package\Name\Plugin\Checkout;

class LayoutProcessor
{
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        // Loop all payment methods (because billing address is appended to the payments)
        $configuration = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'];
        foreach ($configuration as $paymentGroup => $groupConfig) {
            if (isset($groupConfig['component']) AND $groupConfig['component'] === 'Magento_Checkout/js/view/billing-address') {

                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentGroup]['children']['form-fields']['children']['custom_attribute_code'] = [
                    'component' => 'Magento_Ui/js/form/element/abstract',
                    'config' => [
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input',
                        'id' => 'custom_attribute_id',
                    ],
                    'dataScope' => $groupConfig['dataScopePrefix'] . '.custom_attribute_id',
                    'label' => __('Custom attribute label'),
                    'provider' => 'checkoutProvider',
                    'visible' => true,
                    'validation' => [
                        'required-entry' => true,
                        'min_text_length' => 0,
                    ],
                    'sortOrder' => 300,
                    'id' => 'custom_attribute_id'
                ];
            }
        }

        return $jsLayout;
    }
}

Hope this helps

  • after this, how can I store custom address attribute value in quote table for billing address? – chirag Feb 1 '17 at 7:31
  • for that you should create a plugin for the Quote to add the new field – Vlad Patru Mar 6 '17 at 12:45
  • How do I add dropdown and radio button ? – Manish Dec 12 '17 at 12:07
  • @Manish I don't understand the question, for what you need dropdown / radiobutton? most likely you should check what form elements are supported and change the elementTmpl , or create a new type if the one desired is not already done. Look in the Magento_UI component for this – Vlad Patru Dec 13 '17 at 8:32
  • magento.stackexchange.com/questions/216191/… can you please help me on that. – Magento2 Devloper Mar 6 '18 at 18:53
0

@Vlad Patru is absolutely right.

Just want to add that this loop of all payment methods in obtained in $configuration. But It is to be noted that Starting from Magento 2.1.4 release, the checkout configuration has additional Display Billing Address On option (Stores -> Configuration -> Checkout -> Checkout Options). It has two possible values:

Payment Method - billing address is displayed per payment method

Payment Page - billing address is displayed above payment methods

So, $configuation will return all payment methods only when Display Billing Address is selected as per Payment Method.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.