4

I'm trying to add some custom fields on the checkout.

I looked around the internet and always I found an example adding some information on shipping address. But what I want is a fieldset independent of all checkout.

This is what I'm trying to do: enter image description here

Adding some fields above the paymethod selection.

The problem is, that fields are not 'linked' with the checkout form

They are just appearing here, but when I place the order They are not anywhere, neither are following the validation rules, like 'validation' => ['required-entry' => true]

This is the layoutProcessor:

public function afterProcess(
    \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
    array $jsLayout
)
{
    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
    ['payment']['children']['beforeMethods']['children']['delivery_date'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'dataScope' => 'checkout',
        'config' => [
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/date',
        ],
        'label' => __('Deliver from'),
        'provider' => 'checkoutProvider',
        'options' => [],
        'validation' => ['required-entry' => true]
    ];

    $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
    ['payment']['children']['beforeMethods']['children']['reference'] = [
        'component' => 'Magento_Ui/js/form/element/abstract',
        'config' => [
            'template' => 'ui/form/field',
            'elementTmpl' => 'ui/form/element/input',
        ],
        'label' => __('Reference'),
        'provider' => 'checkoutProvider',
    ];

    return $jsLayout;
}

I think the key is dataScope or customScope but I tried everything and it's not working. How I can add my fields on the submit form?

I would like having something like that when I submit: This is the original

{
    "cartId":"91b932803feba53a90438efd42660630",
    "billingAddress":{
        "countryId":"ES",
        "regionId":"132",
        "regionCode":"Albacete",
        "region":"Albacete",
        "street":[
            "blabla, 
            1",
            ""
        ],
        "company":"bla",
        "telephone":"666666666",
        "postcode":"17003",
        "city":"Girona",
        "firstname":"bla",
        "lastname":"bla",
        "saveInAddressBook":null
    },
    "paymentMethod":{
        "method":"checkmo",
        "po_number":null,
        "additional_data":null
    },
    "email":"example@example.es"
}

This is what I wanted, for example:

{
    "cartId":"91b932803feba53a90438efd42660630",
    "billingAddress":{
        "countryId":"ES",
        "regionId":"132",
        "regionCode":"Albacete",
        "region":"Albacete",
        "street":[
            "blabla, 
            1",
            ""
        ],
        "company":"bla",
        "telephone":"666666666",
        "postcode":"17003",
        "city":"Girona",
        "firstname":"bla",
        "lastname":"bla",
        "saveInAddressBook":null
    },
    "paymentMethod":{
        "method":"checkmo",
        "po_number":null,
        "additional_data":null
    },
    "email":"example@example.es"
    "customFields": {
        "reference": "12345",
        "deliveryFrom": "2018-01-01",
        "(...)": "(...)"
    }
}

I guess, after I can see my custom fields on the submit json, I will have to add them though observer after place order for saving them into ddbb?

EDIT: Only changing the dataScope for shippingAddress.custom_attributes.delivery_date and customScope for shippingAddress.custom_attributes

it's working appending into shipping address like that:

{
    "cartId":"91b932803feba53a90438efd42660630",
    "billingAddress":{
        "countryId":"ES",
        "regionId":"132",
        "regionCode":"Albacete",
        "region":"Albacete",
        "street":[
            "blabla, 
            1",
            ""
        ],
        "company":"bla",
        "telephone":"666666666",
        "postcode":"17003",
        "city":"Girona",
        "firstname":"bla",
        "lastname":"bla",
        "customAttributes":{
            "delivery_date":"06/01/2017",
            "reference":"ddddddddddddddddddddddddd"
        }
        "saveInAddressBook":null
    },
    "paymentMethod":{
        "method":"checkmo",
        "po_number":null,
        "additional_data":null
    },
    "email":"example@example.es"
}

But this is not exactly what I want... also only works if I fill this information on the 2nd page then going back and forward just for saving that information.

Why that works? and everything I tried don't? What despairs me is that it's the only example you can find on the internet. Okay it works, but only for that! If you wanna do something a bit different like that you find a lot of new troubles.

Also what I discovered is, if you change that custom_attributes text in data or custom Scope it stops working.

Only doing this:

'dataScope' => 'shippingAddress.custom_attributess.delivery_date',

'customScope' => 'shippingAddress.custom_attributess',

Why the name custom_attributes is the only what works? Before defining it it doesn't even appeared on submitted form json.

Your Answer

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

Browse other questions tagged or ask your own question.