3.9.2 Javascript

Overview:

 

Examples on this page shows different guidelines and solutions to setup and working with SmartWeb platform. The examples are displayed as code examples and can be copied and pasted into a script on a SmartWeb website.

 

Platform Variable Examples

As you have surely read 3.3.1 Javascript Variables and that contains a lot of information about the solution you are on. This information is applicable depending on what side you are on, if its a matter of what currency must be chosen to which template should be shown.

Note: The easiest way is to see what information there is, or by looking in the console in your browsers development tools. What information is available is described on page: 3.3.1 Javascript Variables. Note that information is different from page to page. The product does not necessarily have the same information as a blog post.

 

The examples below show how the platform variable can be used:

window.platform.page examples:

If the pages id is 10, run the script:

 

*CODE* *SNIPPIT*
(function () {
    if (window.platform.page.id === "10") {
       ...
    } 
})(); *CODE*

If the page is situated in a folder in the page tree with id 5, run the script:

 

*CODE* *SNIPPIT*
(function () {
    if (window.platform.page.categoryId === "5") {
        ...
    } 
})(); *CODE*

If the page is of page type news and language is set to danish, run the script:

 

*CODE* *SNIPPIT*
(function () {
    if (window.platform.page.isNews && window.platform.language.iso === "DK") {
        ...
    } 
})();
*CODE*

 

window.platform.template examples:

Insert a picture with with a pathway to the solutions CDN (Content Delivery Network):

 

*CODE* *SNIPPIT*
(function () {
    var img = new Image();
    img.src = window.platform.template.cdn + "/upload_dir/gfx/timeglass.png";
    document.getElementById("#loader").appendChild(img);

    // or with a picture in the template folder
    var img2 = new Image();
    img.src = window.platform.template.path + /gfx/timeglass.png";
    document.getElementById("#loader").appendChild(img2);
})();
*CODE*

Use Template / Design Manager background color on an element:

 

*CODE* *SNIPPIT*
(function () {
    var farve = window.platform.template.settings.DESIGN_BODY_BACKGROUND_COLOR;
    document.getElementById("#element").style.backgroundColor = Color;
})();
*CODE*

 

window.text example:

Create a button and give it translated text, depending on which language is available on the website:

 

*CODE* *SNIPPIT*
(function () {
    var btn document.createElement("button");
    btn.innerHTML = window.text.PRODUCT_CATALOG_PRODUCT_BUY;
    document.getElementById("#form").appendChild(btn);
})();
*CODE*

 

window.platform.product example:

platform.product is a variable, that is used on products, but contains lots of information about the product you are on. Below is an example of how it can be used to run a script, if the product is of variant type dropdown:

 

*CODE* *SNIPPIT*
(function () {
    var product = window.platform.product
    if (product && product.Type === "variant" && product.VariantDisplayMode === "dropdown") {
        ...
    }
})();
*CODE*

 

Platform functions examples:

In additionm to all the information about the framework and system that can be downloaded, there are also some built in functions in the platforms variable.

The examples below show how some of them can be used:

 

window.platform.currency_format exmaple:

This example shows how you can use the platform.currency_format to format numbers, so it becomes an amount with the correct currency format. platform.currency_format complies with settings in the shop settings which tells the currency if it should stand to the left or right of the amount.

 

*CODE* *SNIPPIT*
(function () {
    var amount = window.platform.currency_format(100);
    // The amount is now "100,00 DKK" if you are on a shop with danish currency selected.
})();
*CODE*

 

window.template.bp.current example:

The template.bp variable contains information about the templates breakpoints, but in a breakpoint object you will also find a function named template.bp.current, this can tell you which TorqueUI breakpoint is currently being used in the browser. In other words, the function can be used to run some specific code on a specific breakpoint. The function returns one of the following TorqueUI breakpoints: 'xl', 'l', 'm' or 's'.

 

*CODE* *SNIPPIT*
(function () {
    var breakpoint = window.template.bp.current();

    if (breakpoint === "xl") {
        ...
    }

    if (breakpoint === "l") {
        ...
    }

    if (breakpoint === "m") {
        ...
    }

    if (breakpoint === "s") {
        ...
    }
})();
*CODE*

 

platform events:

Platform events are built on the platform function platform.subscribe, platform.publish and platform.unsubscribe. These features are a part of the programmings design pattern, so called PubSub and basically sends out messages about events to and from the system.

  • window.platform.subscribe: This is used to subscribe to events.
  • window.platform.publish: This is used to broadcast messages.
  • window.platform.unsubscribe: This is used to remove subscriptions to events.

 

window.platform.subscribe

window.platform.subscribe works this way: First you need to write the event you wish to subscribe to as a string as the first parameter for the subscribe function. The next parameter should be the function you want to handle the events. See the example below to see how you can set this up:

 

*CODE* *SNIPPIT*
(function () {
    window.platform.subscribe("/product/buy/warning", function(event, data) { 
        ... 
    });
})();
*CODE*

The function that shall handle the events, recieves 2 arguments; Event, this is the event being called and Data, which is an array with the paramenters that broadcast the event.

 

window.platform.publish

window.platform.publish is the second part of PubSub, which boradcasts the events. It happens simply by giving the publish function 2 paramenters in a string with the event that should be sent out and an array with the data that should be sent with it. See the example below to see how it can be set up:

 

*CODE* *SNIPPIT*
(function () {
    window.platform.publish("/my/own/event", ["custom", "data"]);
*CODE*

 

Product events

In the product it is possible to subscribe to events with platform.subscribe, there is a list of possibilities below:

For the product you can subscribe to "/product/buy/warning" this is broadcast when a user recieves an error message when buying a product. e.g. When selecting all variant types:

For the parcel product you can subscribe to 3 events:

  1. "/product/packet/selected": This is broadcast when an assembled parcel product is selected.
  2. "/product/packet/unselected": This is broadcast when one of the parcels in parcel product are unselected / deselected, so not all are selected.
  3. "/product/packetItem/selected": This is broadcast when one of the packages in the parcel product are selected.

For all products of type Variant have 2 events that can be subscribed to:

  1. "/product/variant/selected": This is broadcast when this variant is selected.
  2. "/product/variant/unselected": This is broadcast when a variant is excluded because one of the variant types are unselected / deselected.

For all products of type Variant and display type Button have 3 events that can be subscribed to:

  1. "/variant/variantData/selected": This is broadcast when a button is selected.
  2. "/variant/variantData/unselect": This is broadcast when a button is unselected / deselected.
  3. "/variant/variantData/unselected": This is broadcast when when all buttons are unselected / deselected.

For all products of type Variant and display type Dropdown or Order form Dropdown have 1 event that can be subscribed to:

  1. "/variant/variantType/selected": This is broadcast when a variant is selected.

 

jQuery example

With the SmartWeb platform loader we automatically load jQuery with the help of the app.js file, so it is not important for you to get jQuery. We have a little tip that shows how you can be sure that jQuery is actually loaded and that is when you use $ variables. This examples is especially for those of you who load external scripts into SmartWeb that overide the $ variable with e.g. MooTools.

 

*CODE* *SNIPPIT*
(function($) {
    function start_slider () {
        ...
    }

    function start_menu () {
        ...
    }

    $(function() {
        start_slider();
        start_menu();
    });
})(jQuery);
*CODE*

The example shows how you can create a script that uses a Javascript slider and a Javascript dropdown menu.