JS SDK Examples
Familiarize yourself with the use of JS SDK events and methods.
On this page
- Create additional switcher
- Create languages links
- Switch to another language
- Create currencies links with active state
- Switch to another currency
- React on the opened dropdown switcher
- Take action only if certain language is chosen
- Format product price
- Show price in your own format
- Save user last language before language switching
- Track switching the currency with Google Analytics
- Translate third-party app's static content
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