4

I am trying to reorganize the form fields on the Checkout Shipping step and having difficulty moving the Street Address field. I am not sure if I am referencing the street fields correctly in the checkout_index_index.xml.

The following is a screenshot of my current state, the Street Address should be below city, but no matter my attempts it is still displayed as the last field in the form. enter image description here

Here is the contents of my checkout_index_index.xml:

    <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="component" xsi:type="string">MilkJarCookies_OrderDeliveryDate/js/view/shipping</item>
                                                <item name="children" xsi:type="array">
                                                    <item name="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="street" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">1</item>
                                                            </item>
                                                            <item name="city" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">2</item>
                                                            </item>
                                                            <item name="region_id" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">3</item>
                                                            </item>
                                                            <item name="region_id" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">3</item>
                                                            </item>
                                                            <item name="postcode" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">4</item>
                                                            </item>
                                                            <item name="country_id" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">5</item>
                                                            </item>
                                                            <item name="lastname" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">6</item>
                                                            </item>
                                                            <item name="firstname" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">7</item>
                                                            </item>
                                                            <item name="company" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">8</item>
                                                            </item>
                                                            <item name="telephone" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">9</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

  • The fields (the final nodes in the XML) in your code should be wrapped in <item name="shipping-address-fieldset" xsi:type="array"><item name="children" xsi:type="array"><Your-fields></item></item> – Raivis Dejus Aug 16 '17 at 9:11
4

I don't know exactly why this works, but it's just working for me.

If I set a sortOrder greater than 100, then these fields will be displayed after the street field:

<item name="country_id" xsi:type="array">
  <item name="sortOrder" xsi:type="string">100</item>
</item>
<item name="region_id" xsi:type="array">
  <item name="sortOrder" xsi:type="string">101</item>
</item>

If instead I give a sort order lower than 50, then fields are displayed before the street:

<item name="country_id" xsi:type="array">
  <item name="sortOrder" xsi:type="string">1</item>
</item>
<item name="region_id" xsi:type="array">
  <item name="sortOrder" xsi:type="string">2</item>
</item>

I suppose that somewhere the street's sortOrder is set to a value of 70 more or less.

3

You can change the street input sort order using a plugin for Magento\Checkout\Block\Checkout\LayoutProcessor:

class Reorder
{

    public function afterProcess($subject, $jsLayout)
    {

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
        ['children']['shippingAddress']['children']['shipping-address-fieldset']
        ['children']['street']['sortOrder'] = 200;

        return $jsLayout;
    }
}
2

You can change sortorder by updating sortorder in DB. First search 'street' in 'eav_attribute' table using following query.

SELECT * FROM `eav_attribute` WHERE `attribute_code` LIKE '%street%';

In result you can get 'attribute_id' of street field. Now search in 'customer_eav_attribute' for the attribute_id.

SELECT * FROM `customer_eav_attribute` WHERE `attribute_id` = 28;

Now update 'sort_order' field in customer_eav_attribute to change the default sortorder for street address.

UPDATE `customer_eav_attribute` SET `sort_order` = '50' WHERE `customer_eav_attribute`.`attribute_id` = 28; 
  • Is this the only way to modify the 'street' field? – Noemi Quezada Oct 11 '16 at 18:10
  • 1
    In other way you need to change the sortOrder in checkout_index_index.xml for other fields which must be greater than the sortorder of street attribute defined in 'customer_eav_attribute'. You have correctly defined in checkout_index_index.xml just you need to increase the values for other fields. – Salma Saiyad Oct 12 '16 at 4:15
0

You need to add the following line and change the sorting value as per your need:

<item name="sortOrder" xsi:type="string">10</item>

for example

<item name="postcode" xsi:type="array">
<!-- post-code field has custom UI component -->
    <item name="sortOrder" xsi:type="string">50</item>
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="string">true</item>
    </item>
</item>

Hope I have resolved your query.

  • how to remove postal code validation from the backend sale order default billing address grid – Divya Jun 10 at 16:40

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.