browse the blogs

[ 8 Feb 2017 ]

It surprised me that over a year after Magento 2’s introduction I haven’t had an opportunity to create a new form component using the UI Component system. In the extensions and themes I’ve helped folks port over it made a lot more sense to just convert the old PHP rendered HTML to the new extension. When time is money known technology trumps new, fancy, and undocumented technology.

Having a chance to touch the backend form generation code this week, any doubts I had about my previous approach with clients evaporated. Whether you call it a technology demo or a mess, form components perfectly encapsulate a lot of the the problems Magento developers face with Magento 2’s incomplete rendering …

[ 7 Feb 2017 ]

For backend UI Components, the rendered x-magento-init JSON argument contains two top level keys: types and components

    "*": {
        "Magento_Ui/js/core/app": {
            "types": {/*...*/},
            "components": {/*...*/}

The Magento_Ui/js/core/app module/application uses the data in components to instantiated a nested tree of uiClass based objets and register them as KnockoutJS view models (accessible via Magento’s customer KnockoutJS scope binding). It was never clear to me what the types information was for. I’ve sort of figured that out – …

[ 7 Feb 2017 ]


For folks still playing “wait and see” with Magento 2, (i.e. most current Magento systems), and who are using some sort of Composer workflow (not most Magento 1 systems), this is a small autoloader optimization that fixes Magento 1’s selfish “if I try to load someone else’s class and it doesn’t exist I’ll explode” autoloader.

[ 4 Feb 2017 ]

So, over the summer I covered how to invoke a function returning RequireJS modules via an x-magento-init script. Today I discovered there’s a syntax for doing this with an object returning RequireJS module. If you’ve got an x-magento-init that looks like this

<script type="text/x-magento-init">
        "*": {
            "Package_Namespace\/js\/example": {/* ... config object ... */}

just define a module that looks like this

#File: app/code/Package/Namespace/view/web/frontend/js/example.js

define([], function(){
return {

[ 3 Feb 2017 ]

One of the challenges Magento 2, (and all “full stack” oriented frameworks), face is data synchronization between the front end and the server. Server data will always represent the “source of truth” for any particular piece of data, but good front end developers will always be looking to reduce to number of round trips they make to the server. Magento 2 faces an additional cultural challenge in that it remains a PHP framework, and most developers doing Magento 2 work are going to rely on its many code injection features to change how server side data is saved. In other words, reducing a client side round trip may work out of the box, but may result …

[ 3 Feb 2017 ]

How to clear billing form validation errors when using Magento UI components:

A “quick” (har har) answer from me on how to reset a form field’s validation state in the Magento 2 checkout application. This is also a nice example of how, no matter how far we progress with computers doing things for us, it’s always going to be useful to reason about how a computer does the things it does. Without the Magento 2 documentation I’ve written, or the tooling I’ve built, there’s no way this question gets answered without an individual developer spending days or weeks on it.

If you want to be successful with any customizable/programmatic information system – hire developers who know …

[ 2 Feb 2017 ]

A useful code snippet that came out of a discussion on the Patreon slack today.

], function(quote, rateRegistry){
//get address from quote observable
var address = quote.shippingAddress();

//changes the object so observable sees it as changed
address.trigger_reload = new Date().getTime();

//create rate registry cache
//the two calls are required
//because Magento caches things
//differently for new and existing
//customers (a FFS moment)
rateRegistry.set(address.getKey(), null);
rateRegistry.set(address.getCacheKey(), null);

//with rates cleared, the observable listeners should

[ 25 Jan 2017 ]

One the curious/frustrating bits of approaching Magento 2 as a traditional, full-stack Magento 1 developer, is the seemingly incomplete php bin/magento. While this command allows you to clear your Magento cache

php bin/magento cache:clean

and a command to generate “static content” (front end javascript, css, etc. files not generated by the PHP code in the application)

php bin/magento setup:static-content:deploy

It doesn’t contain commands that clear out the Less CSS cache in var/view_preprocessed. The problem? The PHP team at Magento seems to have shifted that responsibility to grunt, the front end build tool for Magento.

The Magento dev docs site has decent instructions (for 2.0 and 2.1) on setting up grunt (which has a precursor of setting up npm (which has …

[ 24 Jan 2017 ]

Progress continues on No Frills Magento 2 Layout, with Patrons receiving full access to the rough draft and initial source code samples. I just finished the section on Magento 2’s Less handling – basically an update to my article on the same topic last year. Here’s an excerpt that wraps up the section.

For folks working for a certain sort of interactive agency, Magento 2’s choice of Less was somewhat disappointing. Other processors like Sass and Stylus seem more popular with this set of developers. Because of this, we’ve seen some efforts to create alternate CSS workflows using these systems.

While these are interesting projects, and do create a workable alternative …

[ 23 Jan 2017 ]

After update from 2.1.2 to 2.1.3 causes store to redirect to wrong domain · Issue #8245 · magento/magento2:

On the other end of the spectrum, it sounds like Magento 2.1.3 broke how the System Configure system handles fallback values. The lack of a clear response from Magento means we don’t know if they consider this new behavior a regression or fixing the old behavior.