Re: Localize app

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

JB27
Shopify Partner
7 0 1

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?

Replies 9 (9)

PageFly-Kate
Shopify Partner
1296 365 398

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.

Please let me know if it works by giving it a Like or marking it as a solution!


Unlock the secrets to a record-breaking BFCM with PageFly and Canva


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)


➜ Weekly updated Shopify tutorials on YouTube


All features are available from the Free plan. Live Chat Support is available 24/7.


JB27
Shopify Partner
7 0 1

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
Shopify Partner
7 0 1

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
Shopify Partner
1296 365 398

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.

Please let me know if it works by giving it a Like or marking it as a solution!


Unlock the secrets to a record-breaking BFCM with PageFly and Canva


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)


➜ Weekly updated Shopify tutorials on YouTube


All features are available from the Free plan. Live Chat Support is available 24/7.


JB27
Shopify Partner
7 0 1

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
Shopify Partner
4 0 2

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
Shopify Partner
1296 365 398

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

Please let me know if it works by giving it a Like or marking it as a solution!


Unlock the secrets to a record-breaking BFCM with PageFly and Canva


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)


➜ Weekly updated Shopify tutorials on YouTube


All features are available from the Free plan. Live Chat Support is available 24/7.


Webwizzy
Shopify Partner
17 1 0

I dont have useLocale nor useShopifyUserLocale?

Fullstack Developer - Founder of the cryptocurrency market data aggregator, https://www.bitculator.com
Webwizzy
Shopify Partner
17 1 0

In newer versions of the app bridge its defined like this:

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

 

You then have a settings object where you can access the locale: 

const appBridge = useAppBridge();
appBridge.config.locale
Fullstack Developer - Founder of the cryptocurrency market data aggregator, https://www.bitculator.com