5.03

Basic Checkout Modifications

Given a scenario, describe checkout modifications: flow, UiComponents, JS framework (actions/models/views), REST API, and order placement sequence.

Why This Matters: Checkout modifications span UI (UiComponents configured via layout XML and rendered by JS), backend REST APIs, and order placement. Understanding the flow, JS framework (actions/models/views), mixins, and order conversion is essential for reliable customizations.

Checkout Modifications Overview

mindmap root((Checkout Mods)) Checkout Flow Shipping step Billing step checkout_index_index.xml UiComponents config JS Framework Actions (send REST) Models (data/logic) Views (render UI) Mixins Backend REST API webapi.xml Self-auth for session Order Placement Convert quote to order Place order (payment) Save order, invalidate quote checkout_submit_all_after event

Checkout Flow (Steps)

Checkout consists of two main steps:

  1. Shipping: Shipping address + shipping methods selection.
  2. Billing: Billing address, payment method, and order submission.
view/frontend/layout/checkout_index_index.xml

Checkout steps are defined in checkout_index_index.xml. The interface is rendered by UiComponents, whose configuration comes from this layout XML.

Note: UiComponents config via layout XML is unusual; Magento has backend code that parses layout instructions and converts them into UiComponent config.

JavaScript Framework

Checkout UI and logic are driven by JS modules in Magento/Checkout/view/frontend/web/js/.

Magento/Checkout/view/frontend/web/js/

General Rules for Customization

  • Most work is done by JavaScript; use mixins to customize core behavior.
  • Layout XML is flexible; sometimes you can swap components directly in layout.
  • JS framework can be viewed (tentatively) as MVC:
    • Actions (js/action/): Send requests to backend (e.g., place-order.js).
    • Models (js/model/): Data storage and business logic.
    • Views (js/view/): UI rendering (Knockout templates).
Tip: If customizing UI, look in view/. If modifying data sent to backend, check actions/ and models/.

Checkout JS Actions & Models

Actions prepare data and call models to send REST requests. For example:

Magento/Checkout/view/frontend/web/js/action/place-order.js

This action prepares order data and calls a model to POST via REST API.

Key: Actions often coordinate between UI and models; models execute the actual XHR.

Backend REST API

Checkout JS modules send REST requests to backend endpoints defined in webapi.xml.

Magento/Checkout/etc/webapi.xml

Magento uses a self-authentication mechanism to associate the request with the frontend session (guest or customer).

  • REST resources handle operations like saving addresses, selecting shipping, placing orders.
  • Check webapi.xml for available endpoints during checkout.

Order Placement Sequence

Order placement is the final step in checkout. It follows a sequence:

  1. Convert quote to order: Create Order, OrderItem, OrderPayment, OrderAddress objects and populate from Quote data.
    \Magento\Quote\Model\QuoteManagement::submitQuote()

    Uses converter classes to map Quote → Order.

  2. Place order (submit payment): Process payment via the selected payment method.
    \Magento\Sales\Model\Order, \Magento\Sales\Model\Order\Payment
  3. Save order, invalidate quote, send email: Persist order to DB, deactivate quote, trigger confirmation email (may be async via cron). Sometimes creates an invoice automatically.

checkout_submit_all_after Event

This event fires after the order transaction commits, ensuring your observer won't break payment/order saving.

Use case: Extensively used for custom post-order operations (e.g., integrations, logging, notifications).
<event name="checkout_submit_all_after">
    <observer name="vendor_module_after_order" instance="Vendor\Module\Observer\AfterOrder" />
</event>

Customization Strategies

  • UI changes: Modify checkout_index_index.xml to swap/add UiComponents, or use JS mixins on view/ modules.
  • Data/logic changes: Mixin actions/ or models/ to alter data sent to backend or response handling.
  • Backend validation/processing: Plugin or preference on QuoteManagement, Order, Payment classes, or use observers for events like checkout_submit_all_after.
  • New step: Add a step via layout XML and JS components (advanced).

Further Reading

Exam Tips

  • Flow: Shipping (address + methods) → Billing (address, payment, submit).
  • Config: checkout_index_index.xml defines UiComponents for checkout steps.
  • JS: Actions send REST; models handle data; views render UI. Use mixins for customization.
  • REST API: Magento/Checkout/etc/webapi.xml lists endpoints; self-auth ties to frontend session.
  • Order placement: Quote → Order conversion (QuoteManagement::submitQuote()), place order (payment), save/email.
  • Event: checkout_submit_all_after fires after transaction commit—safe for custom post-order logic.
Previous: 5.02 Cart Promo Rules Back to Overview