Skip to content
intermediate Phase 46 · Checkout Implementation

Checkout UI

Checkout index.xml layout, layout handles, step components, and shipping/payment step implementation

1h
0 problems
Topic Progress 0%

Checkout Layout Structure

Checkout Index Layout

<!-- Magento/Checkout/view/frontend/layout/checkout_index_index.xml -->
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:Magento:framework:View/Layout/etc/page_configuration.xsd"
      layout="checkout">
    <update handle="columns"/>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Checkout\Block\Onepage"
                   name="checkout.root"
                   template="Magento_Checkout::onepage.phtml">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="checkout" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_Checkout/js/view/checkout</item>
                                <item name="children" xsi:type="array">
                                    <!-- Steps will be configured here -->
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

Layout Handle System

<!-- Different handles for checkout pages -->
<!-- checkout_index_index.xml - Main checkout page -->
<!-- checkout_cart_index.xml - Cart page -->
<!-- checkout_cart_coupon.xml - Cart coupon section -->

<!-- Custom module layout override -->
<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">
                                <!-- Add custom step -->
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Checkout Steps Configuration

Default Checkout Steps

<!-- Shipping step -->
<item name="steps" xsi:type="array">
    <item name="sidebar" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Checkout/js/view/sidebar</item>
    </item>
    <item name="authentication" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication</item>
        <item name="sortOrder" xsi:type="string">-1</item>
    </item>
    <item name="shipping" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item>
        <item name="sortOrder" xsi:type="string">1</item>
        <item name="children" xsi:type="array">
            <item name="shipping-address-fieldset" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address-fieldset</item>
                <item name="children" xsi:type="array">
                    <!-- Individual fields -->
                </item>
            </item>
            <item name="shipping-method-fieldset" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-method</item>
            </item>
        </item>
    </item>
</item>

Custom Step Component

<!-- Adding a custom step -->
<item name="custom-step" xsi:type="array">
    <item name="component" xsi:type="string">Vendor_Checkout/js/view/custom-step</item>
    <item name="sortOrder" xsi:type="string">2</item>
    <item name="children" xsi:type="array">
        <item name="custom-fieldset" xsi:type="array">
            <item name="component" xsi:type="string">Vendor_Checkout/js/view/custom-fieldset</item>
        </item>
    </item>
</item>

Shipping Step Implementation

Shipping Step Configuration

<!-- app/code/Vendor/Checkout/view/frontend/layout/checkout_index_index.xml -->
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:Magento:framework:View/Layout/etc/page_configuration.xsd"
      layout="checkout">
    <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" 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="custom-field" xsi:type="array">
                                                            <item name="component" xsi:type="string">Vendor_Checkout/js/view/shipping/custom-field</item>
                                                            <item name="sortOrder" xsi:type="string">200</item>
                                                            <item name="dataScope" xsi:type="string">shippingAddress.custom_field</item>
                                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Payment Step Components

Payment Step Configuration

<!-- Payment step in checkout layout -->
<item name="review" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Checkout/js/view/review</item>
    <item name="sortOrder" xsi:type="string">3</item>
    <item name="children" xsi:type="array">
        <item name="before-place-order" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Checkout/js/view/before-place-order</item>
        </item>
        <item name="payment-information" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Checkout/js/view/payment</item>
            <item name="children" xsi:type="array">
                <item name="payments-list" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Checkout/js/view/payment-list</item>
                </item>
                <item name="payment-method-list-wrapper" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Checkout/js/view/payment-method-list-wrapper</item>
                </item>
            </item>
        </item>
    </item>
</item>

Custom Payment Component

<!-- Custom payment method in checkout -->
<item name="payments-list" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="custom_payment" xsi:type="array">
            <item name="component" xsi:type="string">Vendor_Checkout/js/view/payment/custom-payment</item>
            <item name="sortOrder" xsi:type="string">100</item>
            <item name="config" xsi:type="array">
                <item name="paymentCode" xsi:type="string">custom_payment</item>
            </item>
        </item>
    </item>
</item>

Quiz

1. What is the purpose of checkout_index_index.xml?

Question 1 options

2. How do you add a field to the shipping address form?

Question 2 options

3. What does the jsLayout argument control?

Question 3 options

Flashcards

Question

Main checkout layout file?

Click to reveal answer

Answer

checkout_index_index.xml in each module's layout folder

Question

How to add custom checkout step?

Click to reveal answer

Answer

Add child item under checkout > steps > children in jsLayout

Question

What is jsLayout?

Click to reveal answer

Answer

XML argument that configures the JavaScript component hierarchy for checkout

Question

Shipping step component path?

Click to reveal answer

Answer

Magento_Checkout/js/view/shipping

Revision Notes

Key Takeaways

  • 1. checkout_index_index.xml defines the checkout page layout and component tree
  • 2. Steps are configured as children under the checkout component in jsLayout
  • 3. Custom fields are added by extending shipping-address-fieldset children
  • 4. Payment methods are registered as children of payments-list
  • 5. Layout handles allow module-specific checkout customizations

Interview Tips

  • • Explain the relationship between XML layout and JavaScript components
  • • Describe how to add a custom field to the shipping form
  • • Discuss the component hierarchy: checkout → steps → shipping/payment → children

Cheat Sheet

Checkout UI Layout:
  checkout_index_index.xml → main layout file
  jsLayout > components > checkout > steps > children

Step Configuration:
  component: JS view class
  sortOrder: step order
  children: sub-components

Adding Fields:
  shipping-address-fieldset > children > new-field
  dataScope, provider, sortOrder attributes