Skip to Content

Globals

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:

Variable Description
_ Underscore library
$() Cash library
$.storage Local storage manager
$.cookies Cookie manager
$.sections Section/Customer data
$.async() DOM watcher tool
$.translation Translation manager
$.lazy Lazy script
$t() Translate function

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:

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>