1

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?

2 Answers 2

0

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.

0

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-->
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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