How to reorder street address on checkout page in magento 2?

magento.stackexchange https://magento.stackexchange.com/questions/264429

Question

I am getting every field unordered on checkout page but I added code to sort them and now everything is sorting but the street address is not getting sorted I am getting a street address field on top.

enter image description here

I added this code to reorder street address

app/design/frontend/theme/name/Magento_Checkout/layout/checkout_index_index.xml

<?xml version="1.0"?>
<!--
    /**
     * Copyright © 2015 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */
    -->
<page
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="logo" destination="motobatt_header"/>
        <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">Magento_Checkout/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="firstname" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">0</item>
                                                                </item>
                                                                <item name="lastname" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">2</item>
                                                                </item>
                                                                <item name="company" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">55</item>
                                                                </item>
                                                                <item name="street" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">60</item>
                                                                </item>
                                                                <item name="city" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">66</item>
                                                                </item>
                                                                <item name="region_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">69</item>
                                                                </item>
                                                                <item name="region" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">69</item>
                                                                </item>
                                                                <item name="postcode" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">100</item>
                                                                </item>
                                                                <item name="country_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">115</item>
                                                                </item>
                                                                <item name="telephone" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">125</item>
                                                                </item>
                                                                <item name="fax" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">150</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
Was it helpful?

Solution 2

I found an answer to reorder street field in shipping address fields on the checkout page. For that, you have to create a plugin

app/code/module/name/Plugin/Checkout/Block/LayoutProcessor.php

<?php

namespace module\name\Plugin\Checkout\Block;

class LayoutProcessor {

  /**
   * Position the telephone field after address fields
   *
   * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
   * @param array $jsLayout
   *
   * @return array
   */
   public function afterProcess(
      \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
      array  $jsLayout
    ) {

       //Shipping Address
       $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
       ['children']['shippingAddress']['children']['shipping-address-fieldset']
       ['children']['street']['sortOrder'] = 65;



    return $jsLayout;
  }
}

module/name/etc/frontend/di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="address_fields_order" type="module\name\Plugin\Checkout\Block\LayoutProcessor" />
    </type>
</config>

OTHER TIPS

Try with plugin way.

You have to create plugin for process method of given below file.

Magento\Checkout\Block\Checkout\LayoutProcessor

class Reorder
{

public function afterProcess($subject, $jsLayout)
{
    foreach ($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
             ['payment']['children']['payments-list']['children'] as &$child)
    {
        if (isset($child['children']['form-fields'])) {
            $child['children']['form-fields']['children']['street'] = array_merge(
                $child['children']['form-fields']['children']['street'],
                ['sortOrder' => 65]
            );
        }
    }

    return $jsLayout;
}
}

Reference from Re arrange checkout address fields

I hope it helps!

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top