Modules

Modules are JS, SCSS & Handlebars-views, bundled into responsive-base-modules.js, responsive-base.css and responsive-base-views.js

Modules are initialized after J.init, and have access to the entire library.

Modules should be seen as reusable and generic snippets, used to add functionality that more than one shop will use.

Modules will be added continuously to the framework, and the designer will activate modules needed per project.

If a module need changes to HTML-templates those changes need to be documented in readme.md.

Activating modules

Modules use a simple array in file modules/modules.json. Identifier for a module are the folder name.

List of active modules:

#!js
{
    "active": [
        "category-nav",
        "add-to-cart-popup",
        "releware"
    ]
}

File Structure

modules/module-name/

The folder names are used for identification. Use a simple dash-naming-convention for folder names.

modules/module-name/package.json

package.json holds information on the modules creator and version, as well as module name and a short description.

Example of package.json file taken from the Releware module:

#!js
{
    "name": "Releware",
    "version": "0.1.0",
    "description": "Releware - Recommendations",
    "author": {
        "name": "Anders Brandt",
        "email": "anders.brandt@jetshop.se"
    }
}

Flags in package.json

"prototype" : true Indicates a prototype, module are working, but not finished, and will most likely have bugs.

"deprecated" : true Indicates a deprecated module that should not be used.

modules/module-name/readme.md

Add instructions here. Since we can't handle updates of HTML-templates, please be thorough in instructions regarding changes to templates.

Important information that should be included: dependencies on other modules, incompatibility with other modules, changes to templates.

Read more about Atlassians Markdown

modules/module-name/js/

All JavaScript files added to this folder will be combined into responsive-base-modules.js

It's recommended to name the main JavaScript file as the module name, ie module-name.js

Order of includes will be determined by Grunt/Gulp modules/module-name/js/**.js, so double-check the order of includes when debugging.

Read more about JavaScript

modules/module-name/views/

All Handlebar-templates files added to this folder will be combined into responsive-base-views.js

Each view will be accessible as J.views["module-name/view-name"]

Read more about Views

modules/module-name/scss/

All SCSS files added to this folder will be combined into responsive-base-modules.css

Order of includes will be determined by Grunt/Gulp modules/module-name/scss/**.scss, so double-check the order of includes when debugging.

Since SCSS supports @import the order of includes can be handled better, see section 'SCSS includes'

It's recommended to name the main SCSS-file like the module name, ie _module-name.scss

It's important to prefix SCSS-files with underscore, or Grunt will create a new CSS file instead of importing.

Read more about CSS & Sass

SCSS includes

SCSS files need some basic imports to inherit settings:

#!scss
@import "../../../scss/foundation/functions";
@import "../../../scss/base_settings";
@import "../../../scss/responsive-base/mixins";

To include files in a specific order: Check core/scss/responsive-base/_modules.scss for the first file included from module. Add additional files in correct order as imports, to that file.

#!scss
// File: _category.nav.scss
@import "category-nav-settings";

Exposed functions from J

Read more about JavaScript

J.switch: Functions to be triggered on device-width changes

We can detect when user are changing the device-width and add functions to be executed for different breakpoints:

It's important to note that the callback function need to be called without braces: myFunction, not myFunction()

#!js
J.switch.addToSmall(myCustomFunctionForSmall)
J.switch.addToMediumUp(myCustomFunctionForMediumUp)
J.switch.addToMedium(myCustomFunctionForMedium)
J.switch.addToLargeUp(myCustomFunctionLargeUp)

J.translate: Translations

Translations in JS are handled by J.translate(objectName), and translations are stored in J.translations[].

Current language are provided by J.language

Add a translation:

#!js
J.translations.push(
    {
        seeAll: {
            sv: "Se alla",
            en: "See all",
            da: "Se alle",
            nb: "Se alle",
            fi: "Katso kaikki"
        }
    }
);

Translate a string using that newly added translation:

#!js
var translatedStringSeeAll = J.translate("seeAll");

J.pages: Functions to be triggered for specific page-types

Modules can register functions to be executed for a specific page-type, or for all pages.

It's important to note that the callback function need to be called without braces: myFunction, not myFunction()

#!js
J.pages.addToQueue("start-page", myCustomStartPageFunction)
J.pages.addToQueue("product-page", myCustomProductPageFunction)
J.pages.addToQueue("all-pages", myCustomFunctionForAllPageTypes)