Predictive search on multilanguage shop

wecre8websites
Shopify Expert
1 0 3

Hi everyone,

I'm the lead developer behind Transl8 | Translate & Localize, which uses the Shopify translation API to support multilingual stores. We've noticed that the predictive search API has conflicting documentation regarding support of multi-language shops and returns some baffling results. 

In the API page, it shows which languages the api will work with, while in the tutorials it says it is not compatible with ML shops.

What we're actually seeing is that the Predictive search is returning ML results, but merged together and unparsed:

Screenshot 2020-08-10 114034.png

Is this the expected behavior? Languages are separated by a single space, making parsing very difficult. Returning an object with multiple language labels or adding a language parameter would greatly simplify things. Since the root URL already has the language, ideally the search should return just the current language, right?

 

- Jonathan

Nico17
Tourist
3 0 2

Hello,

I've just noticed this behavior on my store. Predictive Search Results returns product names in all languages separated by a space. Is there any fix so far? 

Nico17_0-1599413468800.png

Thanks.

Nico17
Tourist
3 0 2

Hello,

I just figured out that the results given by the predictive search are always linking to the default language product.

To summarize, there are 2 issues with the predictive search on multi language sites. If I am on the store in German and I search for a product:

1) The products displayed in the predictive search results are in all languages.

2) I click on a product and it always redirects me to the product in English (default language of the store).

Is anyone has any idea on how to resolve that?

Many thanks.

Nico17
Tourist
3 0 2

Hello,

I built a crappy solution using the Product API references : https://shopify.dev/docs/themes/ajax-api/reference/product

In theme.js, we just need to update the product link url and the product title. So I made something like this in the renderProduct() function.

    // we need to know the current language of the store.
    var pathname = window.location.pathname;
    var langCode= pathname.split("/");
    var lang = langCode[1];

    var french_path = '/fr'+product.url.replace("/fr/", "/").split('?')[0];
    var english_path = product.url.replace("/fr/", "/").split('?')[0];
    var url = '';
    var title = '';

    if(lang === 'fr'){
      url = french_path;
      $.ajax({
        url: french_path+'.js', 
        dataType : 'json',
        async : false,
        success : function(product) { 
          title = product.title;
        }
      });
.....

 

It's just a bit slower because it needs to call and fetch the product api for each key you type in the searchbar and I made it synchronous.

Crappy workaround but it works.

Feel free to contact me if you need assistance.

0 Likes
pavlor
Shopify Partner
1 0 0

Is there any elegant solution to this issue? 

0 Likes
Adrien2p
New Member
7 0 0

Hi guys,

I found a way to do it without loosing performance and for free.

I put the translated content into the description of the product and I apply the style color: rgb(0,0,0,0) !important; font-size: Opx !important and then in the theme.js into the default config of the predictive search I add the BODY that way the content take no place and can't be visible from the customer. But the customer can search in his own language.

What do you think ?

0 Likes