Weglot Integration Guide

About Weglot

1

App Information

• Weglot helps you to grow and increase your business by adding new languages to your store.
• App details: https://apps.shopify.com/weglot

2

Integration Benefit

• Translate your websites' filter options/values as well as Search/Suggestion into different languages.

Demo

Here are some of our customers' stores with our app and Weglot integration

• https://fitnessnutrition.ca/collections/all

• https://www.delea.ch/collections/all

Instruction

Attention: The current document only works with the new front-end lib from Boost Commerce. Please read this document first to know if you are using the latest version.

How to translate Product

We do not need to add any custom code to translate product item, Weglot supports doing it automatically.

How to translate Filter

1
Go to the admin section of the Weglot app.
2
Scroll down to  Dynamic elements option and enter " .boost-pfs-filter-option-value" into the textbox.
3
Do the same with other elements:  .boost-pfs-filter-top-sorting

4
Click  Add

5
Save Settings
6
Add the texts that need to translate to the Weglot database by clicking to the Edit my translation button

How to translate Search & Suggestion

Weglot helps to translate the Search term from a language that is not English to English. In order to do it, we will send a request provided by Weglot to get the translated Search term, then use it to request to our API. Here are the steps: 

// Only send Weglot request if the current language is different from English
function isWeglotActive() {
    if (!window.Weglot || !window.Weglot.initialized) {
      	return false;
    } else {
    	var currentLang = Weglot.getCurrentLang();
	// Change 'en' to suitable with original language of the store
    	return currentLang !== 'en';
    }
}
  
 InstantSearchApi.beforeCallAsync = function(searchTerm, callInstantSearchApi) {
    // Then use it in our API
    if (window.Weglot && window.Weglot.initialized && isWeglotActive()) {
        Weglot.search(searchTerm, function(englishTerm) {
		Globals.instantSearchQueryParams['q'] = englishTerm;
        	callInstantSearchApi();
       	});
    } else {
        callInstantSearchApi();
    }
}

// Only send Weglot request if the current language is different from English
function isWeglotActive() {
    if (!window.Weglot || !window.Weglot.initialized) {
      	return false;
    } else {
    	var currentLang = Weglot.getCurrentLang();
	// Change 'en' to suitable with original language of the store
    	return currentLang !== 'en';
    }
}
    
FilterApi.beforeCallAsync = function(callFilterApi) {
    // Then use it in our API
    if (Utils.isSearchPage() && window.Weglot && window.Weglot.initialized && isWeglotActive()) {
          Weglot.search(Utils.getSearchTerm(), function(englishTerm) {
              	Globals.queryParams['q'] = englishTerm;
              	callFilterApi();
          });
    } else {
          callFilterApi();
    }
}

Reference

• https://gist.github.com/nico2che/5c781358192773b16c89b868b4ac3c88
• https://developers.weglot.com/api/reference