How to display an app in the user's selected admin language?

[JB27]

Hi,

I'm creating an app in two languages.

What's the best way to retrieve the current admin language selected by the user to display the app in this same language if it exists?

[PageFly-Kate]

Hi @JB27 

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

The Shopify API provides a way to access the current language for a shop by sending a GET request to the "/admin/shop.json" endpoint. You can retrieve the current language in the response, under the "primary_locale" key. You can use this information to determine the language to display your app in.

Here is an example in Ruby using the shopify_api gem:

require 'shopify_api'

# Connect to the shop
ShopifyAPI::Base.site = "https://#{api_key}:#{password}@#{shop_name}.myshopify.com/admin"

# Get the shop details
shop = ShopifyAPI::Shop.current

# Retrieve the current language
language = shop.primary_locale

If the language is available in your app, you can display the content in that language. If the language is not available, you can default to a different language or a fallback language of your choice.

[JB27]

Hi,

Thanks for your reply.

Indeed, I've seen this endpoint on the GraphQL API, but it requires an extra HTTP query and the scope read_locales.  

I thought there was a simpler way to get this information using Polaris.

Also if you're using this, how do you manage to get the data to pass the right translations to <AppProvider /> (https://github.com/Shopify/shopify-frontend-template-react/blob/1b54ce0884a4fa629be3ab6fa782751da46b...)?

[JB27]

I've change the locale in my account on shopify, the admin displays in this new locale, but the primary_locale is still 'en'. I've tried both REST and GraphQL API. Btw the REST endpoints doesn't seem to require the read_locales scope.

EDIT:

After some tests, the primary_locale is the one set in https://admin.shopify.com/store/STORE_NAME/settings/languages not the admin one

[PageFly-Kate]

You can use Polaris components to retrieve the current language used by the admin in the Shopify store.

To retrieve the current language, you can use the useShopifyUserLocale hook, provided by the @Shopify/app-bridge-react library.

Here's an example of how you could use this hook to retrieve the current language and pass it to the AppProvider component:

import { useShopifyUserLocale } from '@shopify/app-bridge-react';

const MyApp = () => {
  const language = useShopifyUserLocale();
  
  return (
    <AppProvider i18n={{ [language]: translations[language] }}>
      {/* your app components here */}
    </AppProvider>
  );
};

In this example, the useShopifyUserLocale hook returns the current language code (e.g. "en" or "fr"), and this value is used as the key to access the relevant translation data in the translations object. The translations object could be an object that you define yourself, with translation data for each language you support in your app.

[JB27]

Thanks for your answer but useShopifyUserLocale doesn't exist in

@Shopify/app-bridge-react@^3.7.2

Module '"@shopify/app-bridge-react"' has no exported member 'useShopifyUserLocale'.

---

[leo-hackin]

Hello @JB27 , 

I'm using @Shopify/app-bridge-react@3.7.4 version and @PageFly-Kate solution worked (on a different scenario, but yet using the same lib) changing from useShopifyUserLocale to useLocale.

Hope that help you. And thanks for your response @PageFly-Kate . 🙂 

[PageFly-Kate]

@leo-hackin You're welcome. I'm so glad to hear that my suggestions can help you. 😊