JavaScript customizations

Each localized page has access to JavaScript global object window.glopalYou can use it to determine if code is running on original or localized page:

if (window.glopal !== undefined) {
    /* Remove newsletter popup on localized pages */
    $.fancybox && $.fancybox.close(true)
}

Configuration

Inside window.glopal.config.target property you can find useful data about language and currency and localized page:

{
    "countryCode": "PL",
    "languageTag": "pl-PL",
    "currencyCode": "PLN",
    "currencySymbol": "zł"
}

You can use them for dynamic customizations:

if (window.glopal !== undefined) {
  /* load additional font for greek language */
  (function() {
   a if (!glopal.config.target.languageTag.startsWith('el-')) {
      return;
    }
  
    const n = document.createElement('style');
    n.textContent = "@font-face {font-family:Interstate; src:local(serif);}";
    document.head.appendChild(n);
  })();
}

Content localization

Glopal will automatically localize all visible content and links, even if it is updated dynamically after the initial page load.

Even that in general you don't need customizations to get localization of your website, in some specific cases it may be useful to have additional control. For example there could be analytics code that is not visible or elements of the UI that should be sorted where translating dynamic content before it is rendered can be useful. Glopal is exposign public API that can be used in site JavaScript code in such scenarios.

If localizing visible elements, it is required to apply gp-noloc attributes on already localized content to avoid double-localization.

Link rewrite

Method window.glopal.localizeUrl() can be used to get localized links for the current site.

// localizeUrl(url: string): string

window.glopal.localizeUrl("https://www.example.com/en/product");
// On FR localized site, result: https://fr.example.com/fr/product

Translations

Method window.glopal.localize() can be used to get translations inside your code:

// type LocalizeArgs = string[] | { [key: string]: string };
// localize<T extends LocalizeArgs>(args: T): Promise<T>

window.glopal.localize([
  "Monday",
  "Tuesday",
  "Wednesday"
]).then(data => console.log(data)); // ["Poniedziałek", "Wtorek", "Środa"]

window.glopal.localize({
  "monday": "Monday",
  "tuesday": "Tuesday",
  "wednesday": "Wednesday"
}).then(data => console.log(data)); // {"monday": "Poniedziałek", "tuesday": "Wtorek", "wednesday": "Środa"}