Hi! I’m pretty new to Shopify extension development, actually I’m working on my first Shopify app, but i might have found a bug.
What I want to do is to get the ‘locale’ containing the region as well, so I can display dates, currencies and so on like the user is expecting them.
In the general account settings I set the language to ‘English’ and the regional format to ‘American English’.
Now I try to get the locale in the loader method in my `app._index.tsx`:
export const loader = async ({request}: LoaderFunctionArgs) => {
const { admin } = await authenticate.admin(request);
const url = new URL(request.url);
const locale = url.searchParams.get("locale");
console.log('locale from URL', locale); // output: 'en' instead of 'en-US'
};
Following the documentation I should be able to get the locale from the GET request.
Get access to the user’s locale
‘For example, apps rendered in the Shopify admin receive the app user’s chosen locale in the locale request parameter in Shopify’s GET requests to the app.’
Now the bug I am talking about is, that the locale is ‘en’ instead of ‘en-US’.
Now the reason, why I think it is a bug:
When I inspect the page, I see the following HTML code:
<!-- Simplified code -->
<!-- Here the locale is correct -->
<html lang="en-US">
<body>
<!-- The iFrame of the Shopify extension - locale=en instead of locale=en-US -->
<iframe
title="extension-title"
src="https://some-url.trycloudflare.com/app?otherProperties&locale=en&otherParameters">
</iframe>
</body>
In the iFrame’s src the locale GET parameter has the value ‘en’ instead of ‘en-US’.
And using the app bridge I also get ‘en’ as the locale, so I think the cause is, that the wrong locale is passed to the iFrame here.
Does anyone else experience the same issue or am I doing something wrong?
If you have any questions on how to reproduce this, feel free to ask.