Add field under billing-address

Question

I'm trying to add a checkbox above the 'billing address same as shipping address checkbox'.

I added this to my layoutProcessorPlugin:

    protected function addFieldsToSubscribeToNewsletter($jsLayoutResult)
{
        $jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['billing-address']['children']['subscribe_to_newsletter'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'BigBridge_Checkout/form/element/checkbox-overwrite'
            ],
            'provider' => 'checkoutProvider',
            'dataScope' => 'shippingAddress.custom_attributes.subscribe_to_newsletter',
            'description' => __('Subscribe to the newsletter'),
            'sortOrder' => '1008',
            'validation' => [
                'required-entry' => false,
            ],
            'displayArea' => 'checkout-newsletter-subscribe'
        ];

    return $jsLayoutResult;
}

If i try to add it to form-fields it works but that's the wrong location. (it says shipping-step because i moved it from the billing step to shipping step). I feel like maybe i need to create a new region first, because in billing-address.html there is no region to place new fields? But i'm not sure how.

Can anyone point me in the right direction?

Answer 1

To add custom field under billing address follow the steps given in following article:

How to Add Custom fields to Checkout page in Magento2

Instead of shippingAddress you need to define billingAddress. that's it.

That will resolve your query.

Answer 2

I created a container around the new field and now it works. In my LayoutProcessorPlugin I added:

  protected function addFieldsToSubscribeToNewsletter($jsLayoutResult)
{
    if (!$this->customerSession->isLoggedIn()) {
        $jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['customer-email']['children']['additional-login-form-fields']['children']['subscribe_to_newsletter'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'BigBridge_Checkout/form/element/checkbox-overwrite'
            ],
            'provider' => 'checkoutProvider',
            'dataScope' => 'shippingAddress.custom_attributes.subscribe_to_newsletter',
            'description' => __('Subscribe to the newsletter')
        ];
    } else {
        $jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['billing-address']['children']['subscribe_container'] = [
            'component' => 'uiComponent',
            'displayArea' => 'subscribe_container'
        ];

        $jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['billing-address']['children']['subscribe_container']['children']['subscribe_to_newsletter'] = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'BigBridge_Checkout/form/element/checkbox-overwrite'
            ],
            'provider' => 'checkoutProvider',
            'dataScope' => 'shippingAddress.custom_attributes.subscribe_to_newsletter',
            'description' => __('Subscribe to the newsletter')
        ];
    }

    return $jsLayoutResult;

In billing-address.html i added:

   <!-- ko foreach: getRegion('subscribe_container') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->