Wiki
Clone wikiresponsive-base / documentation / javascript
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
, notmyFunction()
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.
Updated