Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Custom product translation / multiple languages / Next.js custom storefront

Solved

Custom product translation / multiple languages / Next.js custom storefront

Donfetto
Shopify Partner
8 0 6

Hallo world,

I am building a custom Storefront with next.js using the vercel commerce kit.

I added custom product translations using the shopify app Translate My Store.

Querying the translation in the graphiql App works just fine:

 

 

  productByHandle(handle: $slug) {
    id
    handle
    title
    translations(locale: $locale) {
      key
      value
      locale
    }
  }

 

 

And the result:

 

{
  "data": {
    "productByHandle": {
      "id": "gid://shopify/Product/6726839238806",
      "handle": "kinder-t-shirt",
      "title": "Kinder T-shirt",
      "translations": [
        {
          "key": "title",
          "value": "Camiseta blanca",
          "locale": "es"
        }
      ]
    }
  }

 

 

But if I send a graphql request from my next.js app it crashes, showing this error: Error: Field 'translations' doesn't exist on type 'Product'

 

 

productByHandle(handle: $slug) {
      translations(locale: "es") {
        key
        value
        locale
      }
      id
      handle
      title
    }

 

 

 

 

I am able to get all the other product information I need. Why I am not able to receive the translations?

Only querying translations won't work.

 

Thanks for your help.

 

Accepted Solution (1)

davidgg
Shopify Partner
7 1 3

This is an accepted solution.

You're using different API's, I think.

 

 

When querying the Storefront you've to add a Header with the locale like this

Accept-Language: en

 

View solution in original post

Reply 1 (1)

davidgg
Shopify Partner
7 1 3

This is an accepted solution.

You're using different API's, I think.

 

 

When querying the Storefront you've to add a Header with the locale like this

Accept-Language: en