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 AI Search & Discovery app.

On this page

About Weglot

1
App Information

2
Integration Function

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

How to integrate Weglot with Boost AI Search & Discovery

This feature only works with Boost AI Search & Discovery V2 and above. To find out which version of our app your store's current theme is installed with, please follow this article.

Integrate with Filter trees & Product list

1
Open Weglot app in Shopify Admin.
2
Select Visual Editor.

3
Go to Settings > Shopify Settings > Add Dynamic.

Select one of the Versions below for the app version that your theme is installed with (if you have not known it, yet, please follow this article to find out):V2 or V3. Then follow its corresponding Step 4. 

4 (V2)
 In the Selector box, add all these classes below: 
.boost-pfs-filter-option-value,.boost-pfs-filter-option-title-text,.boost-pfs-filter-top-sorting,.boost-pfs-filter-option-item,
4 (V3)
 In the Selector box, add all these classes below:
  • Instant Search
.boost-sd__header-item, .boost-sd__suggestion-queries-link, .boost-sd__suggestion-queries-item-title, .boost-sd__view-all-text, .boost-sd__search-form-title
  • Banner & Toolbar
.boost-sd__header-title, .boost-sd__header-description, .boost-sd__view-as-text, .boost-sd__product-count, .boost-sd__sorting-label, .boost-sd__sorting-button, .boost-sd__sorting-option
  • Filter tree
.boost-sd__filter-option-title, .boost-sd__filter-option-item-button, .boost-sd__product-title, .boost-sd__button
  • Search page header result
.boost-sd__search-result-toolbar-panel, .boost-sd__search-result-toolbar-panel, .boost-sd__search-result-toolbar-item
5
Make sure the settings Translate search in your visitors' language is turned ON.


6
Click Save Changes. After 30s, please open your storefront website again in private mode (or clear your browser's cache) in order to see the translated contents.

Integrate with Search & Instant search

1

From your Shopify admin, go to Online Store > Themes.

2
Find the theme you'd like to integrate the app and click Actions (⋯) > Edit code.

Select one of the tab below for the app version that your theme is installed with (if you have not known it, yet, please follow this article to find out):V2 or V3. Then follow its corresponding Step 4. 

V2

3 (V2)
In Asset folder, find boost-pfs-filter.js file.

4 (V2)
Scroll all the way down to the bottom of the file, locate the line right above the last one.


5 (V2)
Copy & paste this code snippet: 
// Only send Weglot request if the current language is different from Englishfunction 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();    
}}
6 (V2)
Click Save and you're set!

V3

3 (V3)
In Asset folder, locate a file named boost-sd-custom.js.
4 (V3)
Add the code snippet below to the boost-sd-custom.js file: 
if (window.boostSDAppConfig) {  window.boostSDAppConfig.integration =  Object.assign({     languages: 'weglot' }, window.boostSDAppConfig.integration || {});}5 (V3)

5 (V3)
Click Save and you're all set!

Reference

If you encounter any issues during the integration process, please don't hesitate to contact our support team for further assistance at support@boostcommerce.net.