Back in they day, I ran a Tumblr blog named Magento Quickies where I’d post shorter, less in-depth posts about my travels through Magento’s source code. This Programming Quickies categories is the successor to that Tumblr blog. You’ll find all the old Magento Quickies content here, as well as new short posts about programming in general.
This section has its own RSS feed, the old Magento Quickies feed should should be redirecting, and we’re cross posting notifications for new posts over to magento-quickies.tumblr.com. In other words, you shouldn’t need to know any of this, but the duct tape that keeps the internet held together isn’t aging well, so your mileage may vary.
Below you'll find all the Programming Quickies articles on the site, followed by a chronological listing of the same. You may also browse the 7 series directly via the following links. Pestle, Four Steps to Async Iterators, Checking in on OpenMage and Magento in 2020, Text Encoding and Unicode, Shopware's Development Environment, A Sentimental Gen-X Programmer Culls his Tech Books, and, Containers, Containers, Containers.
Continuing in our informal series of quickies explaining the more magical defaults properties of Magento uiElement objects, today we’ll explore the modules default. The modules default allows you to link a property in your new object with an object in Magento’s uiRegistry via the registry’s “async” feature. [...]
astormAnother quick post on another defaults entry for Magento’s uiElement javascript class/constructor function. Before we can talk about listens though, we’ll need to quickly review imports. In your Magento backend, navigate to the customer listing grid at Customers -> All Customers in Magento’s backend. Then, in your [...]
astormEvery uiElement based object has an observe method. This method allows you to turn any value into a Knockout.js observable. UiElement = requirejs('uiElement'); object = new UiElement; object.foo = 'bar'; object.observe('foo'); console.log(object.foo()); As you can see from the above, we’ve turned the foo property, formerly a [...]
astormWhen Magento 2 creates a new constructor functions based on the uiElements constructor functions, Magento 2 will often use a links default return Element.extend({ defaults: { /* ... */ links: { value: '${ $.provider }:${ $.dataScope }' } /* ... */ }, /* ... */ The links property looks similar to the imports and exports feature, in that [...]
astormHere’s a quick run down on the javascript involved in placing a Magento 2 order. Once again, specifics here are Magento 2.1.1 but concepts should apply across versions. If you need to get started with Magento’s javascript my Advanced Javascript and UI Components tutorial series are great places to start. Also, a lot of the [...]
astormThis one’s a long winding journey through all the javascript code involved when Magento updates the Shipping Rates section of the checkout application. The specifics here are Magento 2.1.1 – and I know for a fact there are some small differences in the 2.0.x branch w/r/t to how the validation listeners get setup. Concepts [...]
astormThis is more pure KnockoutJS than it is Magento 2, but since I’m neck deep in KnockoutJS right now, a quickie it becomes. I wrote about observables over on alanstorm.com because they’re a pretty important part of KnockoutJS, and Magento’s RequireJS programs use them like they were candy. I didn’t mention [...]
astormMore notes on Magento 2’s checkout application. This post has a 1,000 ft. view of the code that runs when a user clicks the the Next button to move from the shipping step to the payment step. Apologies up front that this isn’t as in-depth as I’d like, or too in depth at other parts, but my Patrons are hard task masters [...]
astormOne other neat thing I noticed about Magento’s 2 checkout is the stylized progress bar involved zero images. The orange lines and step numbers surrounded by circles are 100% driven by non-background image CSS. The checkmark that indicates the active step comes from the following CSS rules .opc-progress-bar-item._active > [...]
astormWriting this one down to remember it – hopefully this makes sense to someone else. The following method is the one responsible for moving the Checkout from one step to another. #File: vendor/magento/module-checkout/view/frontend/web/js/model/step-navigator.js next: function() { var activeIndex = 0; [...]
astormThis is mainly a post-mortem from some help I provided to a patron recently. Magento 2 uses composer to manage its various PHP packages. This includes extensions purchased or acquired via Magento’s Marketplace, as well as core Magento 2 modules and themes. In Magento’s backend at System -> Tools -> Web Setup Wizard you [...]
astormNearly a year into Magento 2, I finally feel like we have the tools we need to adequately debug stock system behavior. That Magento Inc. left this to the community and each partner agency to figure out on their own speaks to where their priorities are these days (marketing, enterprise partnerships, etc.), but at least we’re at a [...]
astormHot on the heels of Commerce Bug 3.2.0, Pulse Storm has just released Commerce Bug 3.2.1. This is small but important release that adds region debugging into the KO Scopes tab. These are the regions we talked about here last week. Free and recommended for all Commerce Bug 3 users – especially if you’re dealing with Checkout [...]
astormI thought I’d finished up with UI Components, but then I started investigating the checkout application and stumbled across regions. In the aforementioned UI Components series, we learned that a “UI Component” is a nested tree of RequireJS modules and KnockoutJS templates which a programmer can use as an HTML [...]
astormThe Curious Case of Magento 2 Mixins Don’t let the title fool you – this article (from me) will teach you how to safely hook into the instantiation of any RequireJS module in Magento 2. This, in turn, enables all sorts of things including safe javascript rewrites/monkey-patching.
astormCommerce Bug 3.2 Released Pretty excited about this one – has the UI Component debugging features that should have been there from day one.
astormMagento 2 Tool Chain I’ve learned to accept, in my head, that this sort of over complication always happens when the size of the team maintaining an application or system grows. That said, I’ll never quite understand why in my heart.
astormA technical guide to the Magento 2 checkout A deep dive (written by Inviqa) on the javascript checkout application in Magento 2. A nice companion to my UI Components series — the Inviqa article has some application specific details that will be useful to any developer customizing the checkout flow. (hat tip to Joe Constant)
astormI came across this code recently while researching Magento 2’s UI Component system initComponent: function (node) { if (!node.component) { return this; } loadDeps(node) .then(loadSource) .done(initComponent); return this; } That block in the middle might confuse a junior programmer, but I’m no spring chicken. That looks like [...]
astormMagento 2 uiClass Imports and Exports Explained I’m working on my own version of this as we speak, but the Jessie Maxwell does a nice job of breaking down the imports and exports feature of Magento’s UI Components.
astorm