Javascript

Javascript-files needed by the framework:

client.js Working file for custom client JS. This is the file used by designers to add functionality and controllers not suitable for modules. This file will be renamed to clientName.js per Install Instructions.

responsive-base-core.js Core-functionality for Responsive Base Framework. We do not recommend editing this file unless necessary.

responsive-base-libraries.js This file is a great place to put 3'rd party plugins and minified function libraries. Basic functions needed by the framework goes in here.

responsive-base-modules.js This file is generated dynamically from activated modules. Do not edit this file.

responsive-base-views.js This file is generated dynamically from activated modules & the content from folder core/views/. Do not edit this file.

#window.J

API

Methods for fetching JSON data from the REST-api. Read more about API.

Config

J.responsive Bool, always true. Use this to check if the environment is "Jetshop Base Responsive".

J.config.breakpoints All breakpoints from _base-settings.scss exposed to JS

J.config.cartUrl Legacy-setting used to differ from normal checkout vs responsive checkout. Do not change.

J.config.cartRESTUrl Used for updating the cart content. Do not change.

J.config.apiCachePrefix Used by J.api to clear local storage when user change the VAT-settings. Do not change after site have been put in production.

J.config.cssFallbackUrl Used as a fallback URL for injection of CSS into pages that are not including the proper head-tag setup from Admin > Script management.

J.config.foundationConfig Configuration for Foundation.

J.config.sameHeightConfig Configuration for jQuery-plugin 'jquery-match-height', used for article grids & all situations where same height on objects are needed for the responsive design.

J.config.urls Used as default for dynamic urls for services and cart-related requests. Read more about Dynamic Urls

Jetshop data: J.data & J.checker

J.data object holds Jetshop-specific information as string or object. Current currency and language, category & product id as well as information on price lists.

Please use this object and do not make direct calls to JetshopData or jlib.

Example: J.data.currency holds an object with detailed information on the active currency.

J.checker object holds Jetshop-specific information as booleans.

Example: J.checker.isLoggedIn are true for a logged in customer.

Pages

J.setPageType() will handle detection of page-types. This function will run on script load and will set the J.pageType variable, add the page-type as a body-class, and set the matching J.checker to true.

List of current page types:

• all-pages
• start-page
• product-page
• category-advanced-page
• category-page
• orderconfirmation-page
• manufacturer-advanced-page
• manufacturer-page
• news-page
• checkout-page
• searchresult-page
• my-page
• changepassword-page
• standard-page
• sitemap-page

Functions to be triggered for specific page-types

All page types have queues where page-type specific functions can be added.

Example usage for startpage

The body-tag will have the CSS-class "start-page" added.

J.checker.isStartPage will be true

#!js
J.pages.addToQueue("start-page", myCustomStartPageFunction)

Example usage for all pages

#!js
J.pages.addToQueue("all-pages", myCustomFunctionForAllPageTypes)

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

Device width, resize

J.deviceWidth Returns string containing device width, "xxlarge" etc.

Device width's are handled by Foundation and are set in core/scss/_base-settings.scss, and mirrored in core/scss/foundation/_global.scss

Width are always reflected as a body class, body.device-width-xxlarge etc. Updated on resize.

Actual pixel-values for breakpoints are exposed as J.config.breakpoints

There is a global event for switch, which are triggered on a successful width-change:

#!js
$(window).trigger('switch', [width, oldWidth]); 

#!js
$(window).on('switch', function (event, width, oldWidth) {
// Do something      
});

This event can be used for custom functions that require more granular control.

Switch queues:

J.switch.queue.small All functions added to this queue will fire if page are loaded at size small, or size small are reached at resize.

J.switch.queue.mediumUp All functions added to this queue will fire if page are loaded at size small and and resized to a larger size. Will not be triggered on page load.

J.switch.queue.medium All functions added to this queue will fire if page are loaded at size medium, or size medium are reached at resize.

J.switch.queue.largeUp All functions added to this queue will fire when switching from small or medium to a larger size. Will be triggered on page load.

NOTE: A resize in one step from size "small" to "x-large" will trigger both "mediumUp" & "largeUp". Be careful.

Adding functions to switch queue:

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

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

JetshopData

J.jetshopData Bool that indicates if we have JetshopData or not (some pages are missing this).

Cart

J.cart Returns array with the current cart. Updated from J.components.updateCartData on ajaxComplete.

Events triggered by cart:

$(window).triggerHandler('cart-loaded'); After inital load of cart.

$(window).triggerHandler('cart-updated'); After every update in loaded cart.

Translations

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

Current language are provided by J.data.language

Fallback language is English.

Add a translation:

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

Example usage:

#!js
var translatedStringCart = J.translate("cart");

Events

cart-loaded

cart-updated

switch [width, oldWidth]

dynamic-cart-closed

Other

J.browser Returns object with data from Bowser.js Can be used like "if (J.browser.ie)" etc.

J.data.manufacturerList Returns array with manufacturers. Uses J.components.getManufacturerList() to populate.