Recent Posts


Magento 2: uiElement Features and Checkout Application


Frustrated by Magento? Then you’ll love Commerce Bug, the must have debugging extension for anyone using Magento. Whether you’re just starting out or you’re a seasoned pro, Commerce Bug will save you and your team hours everyday. Grab a copy and start working with Magento instead of against it.

Updated for Magento 2! No Frills Magento Layout is the only Magento front end book you'll ever need. Get your copy today!

Today’s we’re going a little off the beaten path — instead of an in-depth tutorial about some esoteric and over-complicated PHP system, we’re going to bundle up some links to Magento Quickies. Magento Quickies is where I post one off, quick thoughts/explanations about some feature in Magento. The posts are less in depth and not always beginner accessible, but still contain valuable information every Magento programmer will eventually need.

Checkout Test Case

Between reaching this point in the UI Component series and finally releasing a useful Commerce Bug debugging panel for UI Components/Knockout-Scopes, I decided it was time to tackle Magento’s new checkout application.

Checkout in Magento 2 is a completely new UI Component/javascript-application that uses the REST API to collect a user’s shipping and payment information, and then place an order. It’s a ground up rewrite of the checkout experience in Magento 1, and one of the few places Magento 2 ate their own dog food w/r/t the REST API being “the right” way to create web based applications in Magento.

Trying to customize the checkout application was the perfect test for both our fresh UI Component world view, as well as Commerce Bug’s new KO Scopes debugging features.

In diving deeply into the checkout, we also came up hard against more undocumented UI Component features that no one other than a handful of internal Magento core developers really understands (at least until now).

Which is to say, we have two sets of links. The first are posts that explain more special features of uiElement based javascript objects. These are the special features we started to explore in the Magento 2: uiClass Data Features article.

Second, we have a set of posts that explore some important integration points in Magento’s checkout application. While not a fully featured tutorial on how to make the checkout do what you want, these posts should save you those day long debugging sessions that are required to trace out where some important action (changing steps, submitting the order, etc) happens.

With unlimited time we’d love to write full tutorials on all these topics, but time’s in short supply these days. Hopefully the above will be enough to get you where you need to go.

Series Navigation<< Observables, uiElement Objects, and Variable TrackingMagento 2: Remaining uiElement Defaults >>

Copyright © Alana Storm 1975 – 2023 All Rights Reserved

Originally Posted: 22nd November 2016

email hidden; JavaScript is required