React-Shopify Translations | How to get products in a second language from Shopify

Hello everyone. I’m trying to get products in the second language from Shopify store.

The Storefront API states that the HTTP request header must contain Accept-Language: de, in my case (in React), the settings should look like this: https://shopify.dev/tutorials/manage-app-translations-with-admin-api#storefront-api-translation-header

const clientWithTranslatedContent = Client.buildClient({
  domain: 'your-shop-name.myshopify.com',
  storefrontAccessToken: 'your-storefront-access-token',
  language: 'de' // Accept-Language
});

How it have to work you can find here: https://github.com/Shopify/js-buy-sdk/blob/update-language-setting/src/client.js

I’m using Shopify Webhook API version 2020-07 (Latest). Here https://github.com/gatsbyjs/gatsby/issues/24173#issuecomment-646820211 I found information that in version 2020-04 Accept-Language header supports translations, but it doesn’t work in my case.

In building an application, I always receive goods with default translation (EN).

[mattia85]

Would love to know more about this as well…

Sure, these are the steps to reproduce the problem.

1. Add a second language to your Shopify (under Settings > Store Languages).
2. Translate some product fields using langify application or using the Shopify api.
3. Inside you frontend create the shopify-buy client passing the language code (no the default one).

const shopifyBuyClient = Client.buildClient({
  domain: 'your-shop-name.myshopify.com',
  storefrontAccessToken: 'your-storefront-access-token',
  language: 'it-IT'
});

1. Add the translated product inside the cart using shopifyBuyClient
2. Take a look to the checkout object returned from the addLineItems call, the products fields inside lineItems array are not translated.

I hope it’s clear now. Thank you.

[a5okol]

The problem was caused by the “gatsby-source-shopify” plugin that generates pages in gatsby-node.js. It doesn’t take into account Accept-Language in the header of HTTP requests. To solve the problem, my team has finalized this plugin.

Here’s a link: https://github.com/alex-borodin-vtlabs/gatsby-source-shopify-translated