Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

The form on the / checkout / # shipping page | Magento 2.4

‎08-28-2020 01:47 AM
‎08-28-2020 01:47 AM

The form on the / checkout / # shipping page | Magento 2.4

Hello, I want to edit the form on the / checkout / # shipping page in magento 2.4. I could not find where to edit it. Could you help ?
Thank you

Labels:
0 Kudos
3 REPLIES 3
‎08-28-2020 05:05 AM
‎08-28-2020 05:05 AM

Re: The form on the / checkout / # shipping page | Magento 2.4

Hi,

 

it depends on what you want to edit. If you want to edit fields, change the order of fields, remove fields, or add a new one you need to update jsLayout.

 

Give me more information and then I will try to help you. 

 

Thanks,

Marcin Kwiatkowski

https://marcin-kwiatkowski.com 

‎08-29-2020 02:11 PM
‎08-29-2020 02:11 PM

Re: The form on the / checkout / # shipping page | Magento 2.4

I want to edit the city area from the form elements on the checkout page.

0 Kudos
‎08-31-2020 03:59 AM
‎08-31-2020 03:59 AM

Re: The form on the / checkout / # shipping page | Magento 2.4

Hi,

 

so you need to create the checkout_index_index.xml file in your custom module or theme with the following content: 

 

<?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="city" xsi:type="array">
                                                                    <!-- here you can add your updates -->
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

You can add your updates to "city" node.

 

For example, if you want to change the sort order and label for this field you need to add two fields to this node. 

 

<item name="city" xsi:type="array">
    <item name="label" xsi:type="string">Your label</item>
    <item name="sortOrder" xsi:type="string">100</item>
</item>

Take a look at the code below when you can see sample configuration for the city field:

"city": {
  "component": "Magento_Ui/js/form/element/abstract",
  "config": {
    "customScope": "shippingAddress",
    "template": "ui/form/field",
    "elementTmpl": "ui/form/element/input"
  },
  "dataScope": "shippingAddress.city",
  "label": "City",
  "provider": "checkoutProvider",
  "sortOrder": "80",
  "validation": {
    "required-entry": true,
    "max_text_length": 255,
    "min_text_length": 1
  },
  "options": [],
  "filterBy": null,
  "customEntry": null,
  "visible": true
}

I hope that is helpful for you. 

 

Thanks,

Marcin Kwiatkowski

https://marcin-kwiatkowski.com 

0 Kudos