0

I am trying to add an additional field to the checkout billing address. Below is the LayoutProcessor plugin that i use to do that.

// 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'][$mobilePhoneAttributeCode] = [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    // customScope is used to group elements within a single form (e.g. they can be validated separately)
                    'customScope' => 'billingAddress.custom_attributes',
                    'customEntry' => null,
                    'template' => 'ui/form/field',
                    'id' => 'mobile-phone',
                    'elementTmpl' => 'ui/form/element/input',
                    'tooltip' => [
                        'description' => 'For delivery questions.',
                    ],
                ],
                'dataScope' => 'billingAddress.custom_attributes.' . $mobilePhoneAttributeCode,
                'label' => 'Mobile Phone',
                'provider' => 'checkoutProvider',
                'sortOrder' => 125,
                'validation' => [
                    'required-entry' => false
                ],
                'options' => [],
                'filterBy' => null,
                'customEntry' => null,
                'visible' => true,
                'id' => 'mobile-phone'
            ];
        }
    }

But when the updateAddress function runs in vendor\magento\module-checkout\view\frontend\web\js\view\billing-address.js the custom attributes are not passed in the dataScope so i can't parse the value to save it to the database.

PS I also added this field to the checkout shipping address and it works fine even with the billing address. The problem above exists only when i use diffent billing address.

2

I found the problem it with the data scope i set. Below is the correct code tested.

// 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'][$mobilePhoneAttributeCode] = [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' => [
                    // customScope is used to group elements within a single form (e.g. they can be validated separately)
                    'customScope' => 'billingAddress.custom_attributes',
                    'customEntry' => null,
                    'template' => 'ui/form/field',
                    'id' => 'mobile-phone',
                    'elementTmpl' => 'ui/form/element/input',
                    'tooltip' => [
                        'description' => 'For delivery questions.',
                    ],
                ],
                'dataScope' => $groupConfig['dataScopePrefix'] . '.custom_attributes.' . $mobilePhoneAttributeCode,
                'label' => 'Mobile Phone',
                'provider' => 'checkoutProvider',
                'sortOrder' => 125,
                'validation' => [
                    'required-entry' => false
                ],
                'options' => [],
                'filterBy' => null,
                'customEntry' => null,
                'visible' => true,
                'id' => 'mobile-phone'
            ];
        }
    }

Hope this helps someone else thanks!!

EDIT

@krybbio look at this

You first have to get the value from the billing address custom attributes and then add to the extension attributes.

I created a mixin for Magento_Checkout/js/action/set-billing-address.js

define([
    'jquery',
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote'
], function ($, wrapper,quote) {
    'use strict';

    return function (setBillingAddressAction) {
        return wrapper.wrap(setBillingAddressAction, function (originalAction, messageContainer) {

            var billingAddress = quote.billingAddress();

            if(billingAddress != undefined) {

                if (billingAddress['extension_attributes'] === undefined) {
                    billingAddress['extension_attributes'] = {};
                }

                if (billingAddress.customAttributes != undefined) {
                    $.each(billingAddress.customAttributes, function (key, value) {

                        if($.isPlainObject(value)){
                            value = value['value'];
                        }

                        billingAddress['extension_attributes'][key] = value;
                    });
                }

            }

            return originalAction(messageContainer);
        });
    };
});
  • thanks to your correction now the filed is updated but is no passed to next step for me – krybbio Mar 26 '18 at 19:04
  • Please note that this only for billing address For shipping address you have to set the data scope like this: 'shippingAddress.custom_attributes' . $customFieldCode – Antonis Galanis Mar 26 '18 at 21:31
  • Yes, i underdtand. My problem is when i try to get extension_attributes from billing address. It result empty. – krybbio Mar 26 '18 at 23:28
  • You first have to get the value from the billing address custom attributes and then add to the extension attributes. – Antonis Galanis Mar 27 '18 at 13:24
  • @krybbio i edited my answer above – Antonis Galanis Mar 27 '18 at 13:32

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.