App reviews, troubleshooting, and recommendations
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?
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.
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...)?
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
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.
Thanks for your answer but useShopifyUserLocale doesn't exist in
Module '"@shopify/app-bridge-react"' has no exported member 'useShopifyUserLocale'.
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 . 🙂
@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.
I dont have useLocale nor useShopifyUserLocale?
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
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024