browse the blogs

[ 21 Nov 2016 ]

Another 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 javascript console, try running the following commands

//import registry
reg = requirejs('uiRegistry');

//we check the `customer_listing.customer_listing` object in
//the registry for a name property. Not needed, but helps
//make it clear what `imports` does
cl = reg.get('customer_listing.customer_listing');
console.log(cl.name);

//base class/constructor function
UiElement = requirejs('uiElement');

//define a class/constructor using UiElement as base
//this class imports value from customer_listing registry
OurClass = UiElement.extend({
defaults:{
imports:{
...

[ 18 Nov 2016 ]

Every 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 string, into a an observable while maintaining its value. If you look at the source of the observe method

observe: function (useAccessors, properties) {
var model = this,
trackMethod;

if (typeof useAccessors !== 'boolean') {
properties = useAccessors;
useAccessors = false;
}

...

[ 18 Nov 2016 ]

When 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 …

[ 17 Nov 2016 ]

Here’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 module/template matching/identifying was done with Commerce Bug 3.2.

The first thing to understand about the billing step is, each payment method has its own Place Order button in a Knockout template. This also means each payment method has a view model.

The view models for payment methods are child models in the following view model.

reg = requirejs('uiRegistry');
reg.get('checkout.steps.billing-step.payment.payments-list')

This view model’s constructor factory/component …

[ 16 Nov 2016 ]

This 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 should be useful throughout Magento 2 though.

Also, this assumes you’ve at least skimmed my Advanced Javascript and UI Components articles. We’re using Commerce Bug 3.2 to match up RequireJS modules with their Knockout.js remote templates.

This one is probably confusing – no way around that. We’ll update each section with an executive summary. If you need further help ask a question

[ 14 Nov 2016 ]

This 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 observable arrays, which are basically observables, that are arrays, with whose subscribers fire only when items are added and removed from the array.

This seems straight forward enough, but one thing that didn’t immediately click for me is any foreach binding that users an observable array with re-render when a programmer updates the observable array. Probably because I have trouble thinking of foreach as a binding

[ 12 Nov 2016 ]

More 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 🙂

If the concepts below confuse you, reading through my Magento 2 Advanced Javascript tutorial is a good place to start, and after that the UI Components series

The shipping step form submits to a

`setShippingInformation`

function.

#File: vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js
setShippingInformation: function () {
if (this.validateShippingInformation()) {
setShippingInformationAction().done(
...

[ 11 Nov 2016 ]

One 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 > span:after {
    font-family: 'luma-icons';
    content: '\e610';
}

The \e610 is a private unicode character that Magento populates via it’s bananas custom font thing.

The progress features come from a equally crazy feature of CSS I wasn’t aware of – CSS Counters.

.opc-progress-bar-item > span:before, .opc-progress-bar-item > span:after {
/* ... */
content: counter(i);
counter-increment: i;
/* ...

[ 11 Nov 2016 ]

Writing 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;
steps.sort(this.sortItems).forEach(function(element, index) {
if (element.isVisible()) {
element.isVisible(false);
activeIndex = index;
}
});
if (steps().length > activeIndex + 1) {
var code = steps()[activeIndex + 1].code;
...

[ 8 Nov 2016 ]

This 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 can access a GUI that will let you manager your composer packages and/or upgrade Magento via a browser. This GUI never mentions composer – instead there’s a thing gossamer applied to make things appear as though you’re just managing Magento packages.

The Web Setup Wizard involves a “readiness check” that makes sure your system is ready for an upgrade. Many users, my patron included, are …