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.

0

1 Answer 1

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);
        });
    };
});
7
  • thanks to your correction now the filed is updated but is no passed to next step for me
    – krybbio
    Mar 26, 2018 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 Mar 26, 2018 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, 2018 at 23:28
  • You first have to get the value from the billing address custom attributes and then add to the extension attributes. Mar 27, 2018 at 13:24
  • @krybbio i edited my answer above Mar 27, 2018 at 13:32

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.