Skip to content

Instantly share code, notes, and snippets.

@mrkhoa99

mrkhoa99/Magento 2 - change the form fields sort order in checkout

Created May 16, 2017 08:31
Show Gist options
  • Save mrkhoa99/6e67ed8a31efd233165a3aa63cf8168e to your computer and use it in GitHub Desktop.
Save mrkhoa99/6e67ed8a31efd233165a3aa63cf8168e to your computer and use it in GitHub Desktop.
Download ZIP
Magento 2 - change the form fields sort order in checkout
Raw
Magento 2 - change the form fields sort order in checkout
Magento 2 - change the form fields sort order in checkout
#app/code/Vendor/Checkout/view/layout/checkout_index_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="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="lastname" xsi:type="array">
<item name="sortOrder" xsi:type="string">20</item>
</item>
<item name="firstname" xsi:type="array">
<item name="sortOrder" xsi:type="string">21</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
#app/code/Vendor/Checkout/etc/frontend/di.xml
<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="sort_order_checkout" type="Vendor\Checkout\Plugin\LayoutProcessorPlugin" sortOrder="1"/>
</type>
</config>
#app/code/Vendor/Checkout/Plugin/LayoutProcessorPlugin.php
public function aroundProcess($subject, \Closure $proceed, $jsLayout)
{
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['street']['sortOrder'] = 41;
$customJsLayout = $proceed($jsLayout);
return $customJsLayout;
}
@mrkhoa99
Copy link
Author

mrkhoa99 commented May 16, 2017 •
edited

Work Around for https://github.com/magento/magento2/issues/6325

Create private function:

/**
     * Re-order Billing Address for each payment address
     *
     * @param $jsLayout
     */
    private function sortBillingAddressComponent(&$jsLayout)
    {
        $paymentsList = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']
                        ['children']['payment']['children']['payments-list']['children'];
        $attributes = $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
                        ['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];
        foreach ($paymentsList as $formCode => $paymentList) {
            if (isset($paymentList['children']['form-fields'])) {
                foreach ($attributes as $key => $value) {
                    if (isset($paymentList['children']['form-fields']['children'][$key]['sortOrder'])
                        && isset($attributes[$key]['sortOrder'])
                    ) {
                        $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                        ['payment']['children']['payments-list']['children'][$formCode]['children']['form-fields']['children'][$key]['sortOrder'] = $attributes[$key]['sortOrder'];
                    }
                }
            }
        }
    }

Add after Plugin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment