0

I want to move to the phone field. My XML

<?xml version="1.0"?>


<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="checkout_cart_item_renderers"/>
<head>
    <css src="css/order-confirmation.css"/>
    <css src="css/login-register.css"/>
</head>
<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="telephone" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">90</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>

                                    <item name="email-step" xsi:type="array">
                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/user-login</item>
                                        <item name="sortOrder" xsi:type="string">0</item>
                                        <item name="children" xsi:type="array">
                                            <item name="customer-email" xsi:type="array">
                                                <item name="sortOrder" xsi:type="string">50</item>
                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item>
                                                <item name="template" xsi:type="string">Magento_Checkout/form/element/email</item>
                                                <item name="displayArea" xsi:type="string">login-methods</item>
                                                <item name="tooltip" xsi:type="array">
                                                    <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item>
                                                </item>
                                                <item name="children" xsi:type="array">
                                                    <item name="before-login-form" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="displayArea" xsi:type="string">before-login-form</item>
                                                        <item name="children" xsi:type="array">
                                                            <!-- before login form fields -->
                                                        </item>
                                                    </item>
                                                    <item name="additional-login-form-fields" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="displayArea" xsi:type="string">additional-login-form-fields</item>
                                                        <item name="children" xsi:type="array">
                                                            <!-- additional login form fields -->
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>

                                    <!-- start of summary section -->
                                <item name="summary" xsi:type="array">
                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary</item>
                                    <item name="displayArea" xsi:type="string">before-login-form</item>
                                    <item name="sortOrder" xsi:type="string">100</item>
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">Magento_Checkout/summary</item>
                                    </item>
                                    <item name="children" xsi:type="array">
                                        <item name="totals" xsi:type="array">
                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/totals</item>
                                            <item name="displayArea" xsi:type="string">totals</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">Magento_Checkout/summary/totals</item>
                                            </item>
                                            <item name="children" xsi:type="array">
                                                <!-- sort order for this totals is configured on admin panel-->
                                                <!-- Stores->Configuration->SALES->Sales->General->Checkout Totals Sort Order -->
                                                <item name="subtotal" xsi:type="array">
                                                    <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/subtotal</item>
                                                    <item name="config" xsi:type="array">
                                                        <item name="title" xsi:type="string" translate="true">Cart Subtotal</item>
                                                    </item>
                                                </item>
                                                <item name="shipping" xsi:type="array">
                                                    <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/shipping</item>
                                                    <item name="config" xsi:type="array">
                                                        <item name="title" xsi:type="string" translate="true">Shipping</item>
                                                        <item name="notCalculatedMessage" xsi:type="string" translate="true">Not yet calculated</item>
                                                    </item>
                                                </item>
                                                <item name="grand-total" xsi:type="array">
                                                    <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item>
                                                    <item name="config" xsi:type="array">
                                                        <item name="title" xsi:type="string" translate="true">Order Total</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                        <item name="itemsBefore" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <!-- merge your components here -->
                                            </item>
                                        </item>
                                        <item name="cart_items" xsi:type="array">
                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item>
                                            <item name="children" xsi:type="array">
                                                <item name="details" xsi:type="array">
                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="thumbnail" xsi:type="array">
                                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
                                                            <item name="displayArea" xsi:type="string">before_details</item>
                                                        </item>
                                                        <item name="subtotal" xsi:type="array">
                                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
                                                            <item name="displayArea" xsi:type="string">after_details</item>
                                                        </item>
                                                    </item>
                                                </item>

                                            </item>
                                        </item>
                                        <item name="itemsAfter" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <!-- merge your components here -->
                                            </item>
                                        </item>
                                    </item>
                                </item>

                                <!-- end of summary -->
                                </item>
                                <!-- end of step One -->
                            </item>                                
                                <item name="sidebar" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                        <item name="componentDisabled" xsi:type="boolean">true</item>
                                    </item>
                                </item>

                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

but this code is not working for me. I removed pub/static and deployed new content but no result.

1

You need create plugin for move the phone number field from checkout page. I have created plugin for move telephone in checkout page for shipping and billing address.

You can change sortOrder as per your requirement. follow below file path to create custom module and mange sortorder.

File path: magento/app/code/Vendor/CheckoutAddress/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_CheckoutAddress',
    __DIR__
);

File path: magento/app/code/Vendor/CheckoutAddress/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_CheckoutAddress" >
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

File path: magento/app/code/Vendor/CheckoutAddress/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="vendor_checkoutAddress_plugin_checkout_layoutProcessor" type="Vendor\CheckoutAddress\Plugin\Block\Checkout\LayoutProcessor" sortOrder="50"/>
    </type>
</config>

File path: magento/app/code/Vendor/CheckoutAddress/Plugin/Block/Checkout/LayoutProcessor.php

<?php
namespace Vendor\CheckoutAddress\Plugin\Block\Checkout;

use Magento\Checkout\Block\Checkout\LayoutProcessor as CheckoutLayoutProcessor;

class LayoutProcessor {
  /**
   * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
   * @param array $jsLayout
   *
   * @return array
   */
   public function afterProcess(CheckoutLayoutProcessor $subject, $jsLayout) {

       /* For Shipping Address */
       $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
       ['children']['shippingAddress']['children']['shipping-address-fieldset']
       ['children']['telephone']['sortOrder'] = 70;

       /* For Billing Address on payment method */
       if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
           ['payment']['children']['payments-list']['children']
       )) {
           $paymentList = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
           ['payment']['children']['payments-list']['children'];
           foreach ($paymentList as $key => $payment) {
               /* telephone */
               $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                   ['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
                   ['telephone']['sortOrder'] = 70;
               }
       }

       /* For Billing Address on payment page */
       if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
           ['payment']['children']['afterMethods']['children']
       )) {
           /* telephone */
           $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
           ['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
           ['children']['telephone']['sortOrder'] = 70;
       }
    return $jsLayout;
  }
}
  • yes you are right we can use layout processor. but i did it through sortOrder. – i_ali55 Apr 15 at 14:11
0

You don't need to code for it. you just need to go to the

Stores > Configuration > Cutomers > Customer Configuration

and then in Name and Address Options please set Show Telephone to No.

That's it.

Please let me know if it works for you.

  • Also, you can set Show Telephone to Optional as it show Required by default. – Kamlesh Yaduwanshi Apr 11 at 14:00
  • i have asked for moving filed not removing. – i_ali55 Apr 11 at 14:54
0

there are many ways like layoutProcessor etc but i moved my filed on checkout page through sortOrder.Same as other fields can also be moved if the hierarchy of parent child is Ok.

<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">
                                                    <!-- remove phone no filed -->
                                                    <item name="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="telephone" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">50</item>
                                                            </item>
                                                            <!-- end phone number -->
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
0

This solution working in magento 2.3

  • Set mode to developer if it's not already.
  • Override checkout_index_index.xml to your theme

This guide will help, the part where he edit /app/design/frontend/Vendor/themeName/Magento_Checkout/layout/checkout_index_index.xml

Here

add this code for phone field Between Start: Important part

<item name="telephone" xsi:type="array">
    <item name="sortOrder" xsi:type="string">51</item>
</item>

This will move your telephone field, you can move other fields too, just need to copy telephone field and edit the field name you want, all you need to is to set order via numbers in xml i.e. 51.

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.