Skip to content

It should be possible to sort the billing address fields in the checkout in a convenient way #6325

New issue
New issue
Closed
Closed
It should be possible to sort the billing address fields in the checkout in a convenient way#6325
Labels
Component: Customerbug reportimprovement
@hostep

Description

@hostep
hostep
opened on Aug 24, 2016

Preconditions

  1. Magento CE 2.1.0
  2. A whole afternoon of debugging joy (oh no, I already did this for you, don't worry)

Steps to reproduce

  1. Take a look at how the billing address fields are composed:

    magento2/app/code/Magento/Checkout/Block/Checkout/LayoutProcessor.php

    Lines 201 to 246 in c5d618d

    [
    'country_id' => [
    'sortOrder' => 115,
    ],
    'region' => [
    'visible' => false,
    ],
    'region_id' => [
    'component' => 'Magento_Ui/js/form/element/region',
    'config' => [
    'template' => 'ui/form/field',
    'elementTmpl' => 'ui/form/element/select',
    'customEntry' => 'billingAddress' . $paymentCode . '.region',
    ],
    'validation' => [
    'required-entry' => true,
    ],
    'filterBy' => [
    'target' => '${ $.provider }:${ $.parentScope }.country_id',
    'field' => 'country_id',
    ],
    ],
    'postcode' => [
    'component' => 'Magento_Ui/js/form/element/post-code',
    'validation' => [
    'required-entry' => true,
    ],
    ],
    'company' => [
    'validation' => [
    'min_text_length' => 0,
    ],
    ],
    'fax' => [
    'validation' => [
    'min_text_length' => 0,
    ],
    ],
    'telephone' => [
    'config' => [
    'tooltip' => [
    'description' => __('For delivery questions.'),
    ],
    ],
    ],
    ]
  2. Compare this to the shipping address fields:

    magento2/app/code/Magento/Checkout/Block/Checkout/LayoutProcessor.php

    Line 165 in c5d618d

    $fields

Expected result

I expected to be able to change the sort order of the billing address fields in the checkout using xml or some other "convenient" way, but found this is almost impossible without manually altering the sort_order field in the customer_eav_attribute table.

Actual result

Not able to sort the billing address fields in a convenient and easy way.

Discussion

To be able to sort the shipping address fields in the checkout, we can create a file checkout_index_index.xml with something like this:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="region_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">87</item>
                                                                </item>
                                                                <item name="postcode" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">80</item>
                                                                </item>
                                                                <item name="company" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">45</item>
                                                                </item>
                                                                <item name="vat_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">46</item>
                                                                </item>
                                                                <item name="country_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">85</item>
                                                                </item>
                                                                <item name="telephone" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">90</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

I was hoping there was a similar way for the billing address fields, but came to the conclusion after viewing

magento2/app/code/Magento/Checkout/Block/Checkout/LayoutProcessor.php

Lines 201 to 246 in c5d618d

[
'country_id' => [
'sortOrder' => 115,
],
'region' => [
'visible' => false,
],
'region_id' => [
'component' => 'Magento_Ui/js/form/element/region',
'config' => [
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/select',
'customEntry' => 'billingAddress' . $paymentCode . '.region',
],
'validation' => [
'required-entry' => true,
],
'filterBy' => [
'target' => '${ $.provider }:${ $.parentScope }.country_id',
'field' => 'country_id',
],
],
'postcode' => [
'component' => 'Magento_Ui/js/form/element/post-code',
'validation' => [
'required-entry' => true,
],
],
'company' => [
'validation' => [
'min_text_length' => 0,
],
],
'fax' => [
'validation' => [
'min_text_length' => 0,
],
],
'telephone' => [
'config' => [
'tooltip' => [
'description' => __('For delivery questions.'),
],
],
],
]
this is not possible due to those hardcoded values.

Or am I missing something obvious here?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Component: Customerbug reportimprovement

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions