Frustrated by Magento? Then you’ll love
- Magento 2: Introducing UI Components
- Magento 2: Simplest UI Component
- Magento 2: Simplest UI Knockout Component
- Magento 2: Simplest XSD Valid UI Component
- Magento 2: ES6 Template Literals
- Magento 2: uiClass Data Features
- Magento 2: UI Component Data Sources
- Magento 2: UI Component Retrospective
- Observables, uiElement Objects, and Variable Tracking
- Magento 2: uiElement Features and Checkout Application
- Magento 2: Remaining uiElement Defaults
- Magento 2: Knockout.js Template Primer
- Magento 2 UI Component Code Generation
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.
- Magento 2: Understanding the links default in uiElement Objects
- Understanding uiElement’s
listensdefault - Magento 2: Understanding the uiElement
observeMethod
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.
- UI Component Checkout Step Visibility
- Magento 2 Checkout Progress Bar
- More Magento 2 Checkout Notes: Shipping to Payment
- Observable Arrays and Magento 2 Checkout
- How Magento’s Checkout Application Updates Shipping Rates
- Magento 2: Checkout Application Order Placing
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.