I85PREP
⌘ K
Adobe Commerce Front-End Dev Expert study materials
Adobe Commerce Front-End Dev Expert study resources

Adobe Commerce Front-End Dev Expert: Checkout and Cart Customization

Adobe Commerce Front-End Dev Expert · Work through your exam, one topic at a time.

All guide sections

Checkout and Cart Customization

Cart and quote architecture

The cart is a quote (Magento\Quote\Model\Quote) with items, addresses, totals, and payment. Totals are collected by total collectors (Magento\Quote\Model\Quote\TotalsCollector) in a defined order. Front-end cart uses Magento_Checkout/js/model/quote and cart components; totals render via Knockout components registered in checkout_index_index.xml.

Checkout customization points

  • Layout: checkout_index_index.xml and Magento_Checkout/js/view/* components.
  • Totals: add a total collector (PHP) and a JS totals component registered in the totals registry.
  • Shipping/payment: UI components under Magento_Checkout/js/view/shipping and payment methods.
  • Cart page: Magento_Checkout cart item renderers via checkout_cart_item_renderers.xml.

Traps to expect

  • Adding a JS totals component without a matching PHP total collector (or vice versa) so the amount never appears.
  • Forgetting to register the component in checkout_index_index.xml jsLayout.
  • Assuming cart totals recalculate without totalsCollector.collect() or a quote save.
  • Mixing cart (quote) totals with order totals; order totals use Magento\Sales\Model\Order\Total collectors.

Rule of thumb

Any new monetary line needs both a PHP total collector (to compute and persist) and a JS component (to display), plus registration in layout. Test with a quote that has shipping and tax.

Worked example

Add a fee: create a total collector implementing collect() and fetch(), register it in etc/sales.xml/config.xml totals order, then add a JS component extending uiComponent registered under totals in checkout_index_index.xml and bound in the totals template.

Guest vs. customer

Guest checkout uses the same quote but without a customer; ensure your logic handles quote->getCustomerIsGuest().