JS SDK Examples

Familiarize yourself with the use of JS SDK events and methods.

On this page

Create additional switcher

<nav>

    <ul>

        ...

        <li id="switcher-container"></li>

    </ul>

</nav>

LangShopSDK.on("afterSwitchersCreated", function(){

    LangShopSDK.createCurrenciesSwitcher({

        "target": document.getElementById("switcher-container"),

        "type": "dropdown",

        "icons": "rounded",

        "position": "relative",

        "display": "titles",

        "shortTitles": true

    });

});

Note

See information about "createLanguagesSwitcher" and "createCurrenciesSwitcher" methods.

Create languages links

LangShopSDK.on("ready", function(){




    var list = document.createElement("ul"),

        languages = LangShopSDK.getLanguages();




    for(var i = 0, count = languages.length; i < count; i++) {




        var item = document.createElement("li"),

            link = document.createElement("a"),

            language = languages[i];




        link.setAttribute("href", "#");

        link.setAttribute("data-code", language.code);

        link.innerHTML = language.title;

        link.className = "language-link";




        item.appendChild(link);

        list.appendChild(item);

    }




    document.body.appendChild(list);

});

Note

See information about "getLanguages" method.

Switch to another language

Using inline javascript code

<a href="javascript:LangShopSDK.switchLanguage('fr');">French</a>

or using event listener

<a href="javascript:void(0);" class="language-link" data-code="fr">French</a>

<a href="javascript:void(0);" class="language-link" data-code="en">English</a>

var links = document.querySelectorAll(".language-link");




for(var i = 0, count = links.length; i < count; i++) {




    links[i].addEventListener("click", function(e) {

        var code = e.currentTarget.dataset.code;

        LangShopSDK.switchLanguage(code);

    });

}

Note

See information about "switchLanguage" method.

Create currencies links with active state

LangShopSDK.on("ready", function(){




    var list = document.createElement("ul"),

        current = LangShopSDK.getCurrentCurrency(),

        currencies = LangShopSDK.getCurrencies();




    for(var i = 0, count = currencies.length; i < count; i++) {




        var item = document.createElement("li"),

            link = document.createElement("a"),

            currency = currencies[i];




        link.setAttribute("href", "#");

        link.setAttribute("data-code", currency.code);

        link.innerHTML = currency.title;

        link.className = "currency-link";




        if(currency.code === current.code) {

            link.className += " currency-link-active";

        }




        item.appendChild(link);

        list.appendChild(item);

    }




    document.body.appendChild(list);

});

Note

See information about "getCurrentCurrency" and "getCurrencies" methods.

Switch to another currency

<select id="simple-selector">

    <option value="eur">Euro</a>

    <option value="usd">US Dollar</a>

</select>

var selector = document.getElementById("simple-selector");




selector.addEventListener("change", function(e) {

    var code = e.currentTarget.value;

    LangShopSDK.switchCurrency(code);

});

Note

See information about "switchCurrency" method.

React on the opened dropdown switcher

var timerId;




function switcherStillOpened() {

    // Will be called after 5 seconds if switcher still opened

}




LangShopSDK.on("dropdownSwitcherOpened", function(){

    timerId = setTimeout(switcherStillOpened, 5000);

});




LangShopSDK.on("dropdownSwitcherClosed", function(){

    clearTimeout(timerId);

});

Take action only if certain language is chosen

function showUserModal() {

    // The function will be called only for French

}




LangShopSDK.on("ready", function(){




    var language = LangShopSDK.getCurrentLanguage();

    if(language.code !== "fr") {

        return;

    }




    showUserModal();

});

Note

See information about "getCurrentLanguage" method.

Format product price

function getProductByHandle(handle) {




    // Receive needed product from global scope or with XMLHttpRequest.




    return product;

}




function createProductModal(handle) {




    var product = getProductByHandle(handle),

        title = product.title,

        description = product.description,

        price = LangShopSDK.formatMoney(product.price);




    // Create new modal window with previously defined content

}

Note

Format money method expects to receive the price in cents. Multiply the price by 100 if needed to convert to cents. See information about "formatMoney" method.

Show price in your own format

function createFormattedPrice(amount, currency) {




    // Make your own formatting for an amount according to currency




    return formattedPrice;

}




var currency = LangShopSDK.getCurrentCurrency(),

    amount = LangShopSDK.convertAmount(product.price),

    price = createFormattedPrice(amount, currency.code);




// Use formatted price as you need

Note

See information about "convertAmount" and "getCurrentCurrency" methods.

Save user last language before language switched

function saveUserLastLanguage(code) {

    // Save last language to storage (e.g. localStorage, cookies, IndexedDB)

}




LangShopSDK.on("beforeLanguageSwitched", function(){




    var language = LangShopSDK.getCurrentLanguage();

    saveUserLastLanguage(language.code);

});

Note

See information about "getCurrentLanguage" method.

Track switching the currency with Google Analytics

LangShopSDK.on("beforeCurrencySwitched", function(code){

    ga('send', 'event', {

        eventCategory: 'Currencies',

        eventAction: 'switch',

        eventLabel: code

    });

});

Translate third-party app's static content

The translations process takes some time. In this case, we recommend creating a translatable container for all needed locales as fast as possible.

// Create LocalesBag class

var LocalesBag = function (locales) {

  var _this = this;




  _this.locales = locales;




  var translate = function () {

    if (typeof LangShopSDK.translate === "undefined") {

      return;

    }




    var keys = Object.keys(_this.locales);




    LangShopSDK.translate(

      "8a2203211dbb8db4e7209cede045cbe7b0deffefd49e678a86872370ea866de0",

      Object.values(_this.locales),

      function (result) {

        for (var i = 0, length = result.length; i < length; i++) {

          _this.locales[keys[i]] = result[i];

        }

      }

    );

  };




  var isLangShopLoaded = typeof LangShopSDK !== "undefined"

    && LangShopSDK.isLoaded();

 

  // Add event listener if LangShop is not loaded yet or not exist on the store

  if (!isLangShopLoaded) {

    document.addEventListener("langshop:loaded", translate);

  } else {

    translate();

  }

};

 

// Getter for ease of use

LocalesBag.prototype.get = function (key, replacements) {

  var locale = this.locales[key];




  if (typeof locale === "undefined") {

    return key;

  }




  if (typeof replacements !== "undefined") {

    for (var property in replacements) {

      if (!replacements.hasOwnProperty(property)) {

        continue;

      }




      var parts = locale.split(property);

      for (var i = 1, length = parts.length; i < length; i += 2) {

        parts[i] = replacements[property];

      }




      locale = parts.join('');

    }

  }




  return locale;

};

// Create LocalesBag instance

Then you can receive strings translations during the render process.

var increment = 0;

// Render modal

Note

See information about "translate" method

Report incorrect information

Still Have Questions?

Our customer care team is here for you!

Contact Us