Weglot Integration Guide

Weglot helps you to grow and increase your business by adding new languages to your store. Here is the guide for Weglot Integration with Boost Product Filter & Search app.

In this article

About Weglot

1
App Information

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

Weglot integration Demo

Weglot integration

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
    Click on Visual editor

    Click on Visual editor

    3
    Go to Settings -> Shopify Settings
    4
    Add all the class: .boost-pfs-filter-option-value, .boost-pfs-filter-top-sorting, .boost-pfs-filter-option-title-text, .boost-pfs-filter-option-item
    Add all the class: .boost-pfs-filter-option-value, .boost-pfs-filter-top-sorting, .boost-pfs-filter-option-title-text, .boost-pfs-filter-option-item

    5
    Save Changes
    6
    After 30s, please open the website again in private mode in order to see all the changes has been made.

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: 

1
Translate Suggestion
Copy the following code, then paste it to the end of the boost-pfs-instant-search.js file 
// 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();
    }
}

Copy the following code, then paste it to the end of the boost-pfs-instant-search.js file

2
Translate Search
Copy the following code, then paste it to the end of the boost-pfs-filter.js file. 
// 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();
    }
}

Translate Search

Reference