Globals

• About
• Underscore
• Cash
• Local storage
• Cookies
• Customer data
• Async
• Translate
• Lazy script
• Deferred

About

Since Breeze doesn’t use modern JS techniques to load js dependencies, you will work with global js variables. For the sake of simplicity, most of globals declared under $ scope:

Underscore

Underscore is a JavaScript library that provides useful functional programming helpers:

// find first even number
var value = _.find([1, 2, 3, 4, 5, 6], function(num) {
    return num % 2 == 0;
});

// render template
var string = _.template('hello: <%= name %>')({name: 'moe'});

// create throttled function
var throttled = _.throttle(updatePosition, 100);

Cash

Cash is a super small jQuery alternative which provides:

• DOM query selector
• DOM manipulation
• Collection methods

Usage example:

$('button.continue')
    .attr('id', 'next')
    .html('Next Step...')
    .on('click', function (event) {
        //
    });

Local storage

$.storage — is a Breeze wrapper around window.localStorage that adds namespaces support and a few additional methods.

Usage examples:

// Simple storage
$.storage.set(key, value);
$.storage.get(key);
$.storage.remove(key|keys);

// Namespaced storage
var storage = $.storage.ns('vendor-module');
storage.set(key, value);
storage.get(key);
storage.keys();
storage.remove(key|keys);
storage.removeAll();

Cookies

$.cookies — is a wrapper around JS Cookie library. Our wrapper adds ability to work with JSON data in cookies.

Usage examples:

$.cookies.set(name, value);
$.cookies.get(name);
$.cookies.setJson(name, object);
$.cookies.getJson(name);
$.cookies.remove(name);

Customer data

$.customerData or $.sections — is an object to work with Magento’s dynamic sections (Wishlist, Shopping Cart, Messages, etc).

Usage examples:

$.sections.get(name);
$.sections.set(name, data);
$.sections.reload(names, forceNewSectionTimestamp);
$.sections.invalidate(names);
$.sections.getAffectedSections(url);

Async

$.async — is a handy function to watch for selector appearance in DOM structure. It uses MutationObserver under the hood.

Usage example:

$.async('.selector', function (node) {
    //
});

Translate

$.translation — is an object to work with js translations. There is shorthand to the $.translation.translate method available: $t.

Usage examples:

// get translated string
var translated = $t('Shopping Cart');

// Dynamically register translation for the 'key' phrase
$.translation.add('key', 'value');
// or
$.translation.add({
    'key': 'value'
});

Lazy script

$.lazy — is a function that will evaluate passed function after first user interaction. It’s useful to postpone loading of not critical resources. Read more information.

Usage examples:

$.lazy(function () {
    console.log('hello!');
});

Or, you can use lazy type attribute:

<script type="lazy">
    console.log('hello!');
</script>

Deferred

$.Deferred — is a function that creates and returns a new deferred object. It has a jQuery-compatible API.

Usage examples:

var resolvedPromise = $.Deferred().resolve();

console.log(resolvedPromise.state());