If you’ve been reading through my Advanced Javascript, UI Components, and uiElement Internals series, you’re aware that Magento have extended the Knockout.js template system such that Templates can be Loaded via ajax/HTTP Knockout’s “tag-less” bindings have tag equivalents The remote HTTP templates are a [...]
astormBack when Magento 2 was released, I noticed the much touted API didn’t have a method for fetching a product’s canonical URL. A year later that’s still the case. Magento’s reasoning and response, both from an engineering perspective and a product perspective points to a big cultural problem that goes beyond this [...]
astormMagento 2: Are uiClass/uiElement Imports/Exports order sensitive? The answer is mostly no. Imports/Exports values are fetched via the uiRegistry.get’s asynchronous callback method which means if the imports or exports attempts to access an item that doesn’t exist yet in the registry, the system will “wait” until [...]
astormMagento 2: Extract Currently Selected Product ID or SKU on Product Page Rian managed to dig up most of the data embedded in a Magento 2 product listing page that would let a programmer extract the Product ID of the currently selected product on a configurable product page. I threw together this quick RequireJS program that shows how you [...]
astormIf you’re following along with my UI Component and uiElement Internals series, you know about Magento’s uiRegistry module. You can use this module to fetch the scoped Knockout.js view models by registered name requirejs(['uiRegistry'], function(reg){ console.log( reg.get('customer') ); }); or by using a callback function to [...]
astormThat I’m posting this as a quickie probably points to the amount of time I’m spending with Magento 2’s internals vs. building out client sites, but I still haven’t internalized that Magento moved the the Design configuration options from Stores -> Configuration -> Design to Content -> Design -> [...]
astormTime to Report Bug: Two Weeks Over on alanstorm.com we’re in the middle of a series covering the internal implementation of uiElement objects. This series was prompted by some strange behavior in the default value system w/r/t observable objects. The linked bug report covers the details of why this happens, and why it’s a [...]
astormThis entry is part 6 of 6 in the series Magento 2: uiElement Internals. Earlier posts include Magento 2: Defaults, uiElement, Observables, and the Fundamental Problem of Userland Object Systems, Magento 2: Javascript Primer for uiElement Internals, Tracing Javascript's Prototype Chain, Magento 2: uiElement Standard Library Primer, and [...]
astormBe Careful with the “new-less” form of uiClass object instantiation Last time we said Magento’s uiClass based objects don’t require the new keyword. This is true. However, when you’re using the inheritance features of these objects its possible to supply a custom constructor. If you do this, and your custom [...]
astormThis entry is part 5 of 6 in the series Magento 2: uiElement Internals. Earlier posts include Magento 2: Defaults, uiElement, Observables, and the Fundamental Problem of Userland Object Systems, Magento 2: Javascript Primer for uiElement Internals, Tracing Javascript's Prototype Chain, and Magento 2: uiElement Standard Library Primer. [...]
astormThis entry is part 4 of 6 in the series Magento 2: uiElement Internals. Earlier posts include Magento 2: Defaults, uiElement, Observables, and the Fundamental Problem of Userland Object Systems, Magento 2: Javascript Primer for uiElement Internals, and Tracing Javascript's Prototype Chain. Later posts include Magento 2: Using the uiClass [...]
astormIn doing research for the new uElement Internals series, I discovered that Magento’s UI Component object constructors (uiClass, uiElement, uiCollection, etc) can create new objects without the use of the new keyword. //both return a new `UiElement` object object = new UiElement; object = UiElement(); This makes these constructor [...]
astormThis entry is part 3 of 6 in the series Magento 2: uiElement Internals. Earlier posts include Magento 2: Defaults, uiElement, Observables, and the Fundamental Problem of Userland Object Systems, and Magento 2: Javascript Primer for uiElement Internals. Later posts include Magento 2: uiElement Standard Library Primer, Magento 2: Using the [...]
astormThis entry is part 2 of 6 in the series Magento 2: uiElement Internals. Earlier posts include Magento 2: Defaults, uiElement, Observables, and the Fundamental Problem of Userland Object Systems. Later posts include Tracing Javascript's Prototype Chain, Magento 2: uiElement Standard Library Primer, Magento 2: Using the uiClass Object [...]
astorm@api coverage for Magento 2 Javascript According to this forum thread from one of Magento 2’s architects, it sounds like Magento 2.2 is going to bring @api style coverage to Magento’s RequireJS module. This is a positive step in that it will clarify which javascript functions we can rely on working version to version. This is [...]
astormThis entry is part 11 of 13 in the series Magento 2 UI Components. Earlier posts include 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 [...]
astormWrapping up our uiElement defaults, we have the registerNodes defaults #File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js defaults:{ /* ... */ registerNodes: true, /* ... */ } This is another node that you don’t need to worry too much about. Magento uses this to identify the uiElement objects in the [...]
astormTwo defaults you don’t need to worry too much about are the containers and _requested defaults. #File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js defaults: { _requesetd: {}, containers: [], /* ... */ } These are just properties that Magento’s initializing using the uiElement’s defaults [...]
astormThe name and ns defaults #File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js defaults: { /* ... */ name: '', ns: '${ $.name.split(".")[0] }', /* ... */ } are another pair of defaults that don’t make a lot of sense in the context of a traditional programming object system. Like the provider default, the name [...]
astormThe next two defaults we’ll blitz through are the provider and source defaults. #File: vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js defaults:{ /* ... */ provider: '', /* ... */ source: null, /* ... */ } We’re starting to get into the defaults that are tricky to understand since they involve both a [...]
astorm