Re: Storefront API and multiple languages

malthemilthers · ‎09-06-2019

Hi,

I'm building a storefront in react.js using the Shopify Storefront API. Everything has been setup to work with the base store, including pulling collections, products and cart interactions. However, the site is multi lingual (two languages), and I need the shopify products, collections and checkout to reflect that.

Is this possible? And if so, how can I do this?

laurencedorman · ‎04-01-2020

After further investigation, I am pleased to report that this feature is working as described in the documentation here: https://shopify.dev/tutorials/manage-app-translations-with-admin-api#storefront-api-translation-head...

My mistake was to initially not use a sufficiently recent version of the Storefront API. This functionality works from version 2020-01 onwards.

View solution in original post

Busfox · ‎09-06-2019

Hey @malthemilthers,

I believe I answered your question here: https://community.shopify.com/c/Shopify-APIs-SDKs/New-Translation-API-is-available-from-which-API-ve....

TLDR: the translation API is only available in our admin API currently.

To learn more visit the Shopify Help Center or the Community Blog.

malthemilthers · ‎09-06-2019

Right thank you,

So i just need to clarify that it's not possible in anyway to serve translated storefront API data. Even if you combine the two APIs?

Sorry for running this in two threads. probably more appropriate to continue here.

Busfox · ‎09-06-2019

No problem! Yea, let's stick to this thread for now.

There's no way to serve translated storefront API data currently. You could potentially come up with a solution using different products for each different translation, but it would be a workaround for sure.

Translation support for our storefront API is something we'll definitely be exploring in the near future, so stay tuned.

To learn more visit the Shopify Help Center or the Community Blog.

malthemilthers · ‎09-07-2019

Alright,

It definitely feels like a necessary step towards headless e-commerce to be able to translate product data, so that the products in cart reflects the chosen language. None of the Shopify translation apps deals with issue as far as I can tell. They only work with regular Shopify themes.

One more question: how is it possible to translate product information via the admin API, when it's not possible via the admin itself? It doesn't seem possible to fill out title and description etc in different languages for the same product. Is that also something that is likely to become natively available in Shopify in the near future?

Thank you!

Busfox · ‎09-09-2019

Hi again @malthemilthers,

The plan is for translations to be served by the API initially. Native translation fields are a possibility in the future, but the opportunity will be given to our app ecosystem initially regardless of the direction we go after.

To learn more visit the Shopify Help Center or the Community Blog.

devkai · ‎11-07-2019

I ran into the same problem since I have to build a headless multilang store using nextjs.
But there is a workaround, you can make your shop a multilang json endpoint if you let liquid render json

theme.json.liquid (you have to leave in some of original content in comment-tag because shopify validates their tags to be in)

{{ content_for_layout }}
{% comment %}
<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
...
{% endcomment %}

product.json.liquid

{% layout 'theme.json' %}
{{ product | json }}

now under /de/products/my-product you have a the my-product populated in json with german translations.

For the cart you can fetch /de/cart.js for translated cart contents.

I don't know if this is the preferred shopify solution, but on the other hand it doesn't make sense to me building translations into the backend but not make them available in the frontend apis

malthemilthers · ‎11-07-2019

i Devkai,

Does that also work for the checkout pages? Are you able to get the product titles translated in the checkout flow?

I agree. I'm baffled that multi-language is not a build in feature in Shopify. Also baffled that no other platform have taken that market yet. Can't believe we're stuck with hacks and workarounds for this stuff in 2020, unless we build the whole thing from scratch.

devkai · ‎11-07-2019

puh for the checkout I have no headless-hack, I'm going to use the shopify checkout.

malthemilthers · ‎11-08-2019

Right so produkt titles will still me one language only in checkout, correct?

devkai · ‎11-08-2019

I did not find the docs for the direct checkout links but if you do a POST to "/de/cart" and checkout param is set you get redirected /checkout but with german translations.

I tried it in standard template on the cart page by editing changing the cart-form-url from "/cart" to "/de/cart".

_Dominik_ · ‎01-09-2020

Might work now. Did not test but found this in the docs:

Retrieving Storefront API translations:
You can query the supported resources using the Accept-Language HTTP header, to return translated content to the Storefront API.

Source: https://help.shopify.com/en/api/guides/multi-language/translating-content-api#retrieving-storefront-...

laurencedorman · ‎03-31-2020

I've tested this. The documentation seems to indicate that this should be possible, but it doesn't work.

Here is what I did:

installed a translation app
published a language - "German"
added some translated content for this language
added the "Accept-Language" HTTP Header to the Storefront API request and gave it the value of the ISO-code of the language, "de"

But the content comes back in English. Has anyone else tried this and had more success?

laurencedorman · ‎04-01-2020

After further investigation, I am pleased to report that this feature is working as described in the documentation here: https://shopify.dev/tutorials/manage-app-translations-with-admin-api#storefront-api-translation-head...

My mistake was to initially not use a sufficiently recent version of the Storefront API. This functionality works from version 2020-01 onwards.

city17 · ‎11-10-2020

It seems the last post indeed solves the problem of getting translated content.

But I still can't find any info on how to make sure you send customers to the right language checkout page. Did any of you find out how to do that?

devkai · ‎11-10-2020

if you use the shopify buy sdk your client has a checkout property that holds a checkout-url. You can add a locale query param to select the language.

handleCheckout() {
  const url = `${this.checkout.webUrl}&locale=${this.locale}`
  window.open(url, '_self')
}

city17 · ‎11-10-2020

Amazing, that is exactly what I was looking for. Does it also result in a different language email being sent? Or is that something you need to set in the Shopify admin area?

devkai · ‎11-14-2020

Yes the locale is stored in the customer data an transactional emails are send in that language.

One caveat, you have to stick to the shopify default E-Mails, you can not customize multilang emails.