docs: translation module (#14271)

* docs: translation module

* fix link in JS SDK

* add translations user guides [WIP]

* updates

* fix broken link

* remove mentions of default locale

* change header

* updates

* updated user guides

* handle todos

* fix build error

* fix lint errors

www/apps/api-reference/generated/generated-store-sidebar.mjs

@@ -56,6 +56,12 @@ const generatedgeneratedStoreSidebarSidebar = {
       "path": "workflows",
       "loaded": true
     },
+    {
+      "type": "link",
+      "title": "Localization",
+      "path": "localization",
+      "loaded": true
+    },
     {
       "type": "separator"
     },

www/apps/api-reference/markdown/store.mdx

@@ -5,7 +5,7 @@ import {
   DividedMarkdownCode
 } from "@/layouts/DividedMarkdown/Sections"
 import Section from "@/components/Section"
-import { CodeTabs, CodeTab, H1 } from "docs-ui"
+import { CodeTabs, CodeTab, H1, Prerequisites } from "docs-ui"
 import { Feedback } from "@/components/Feedback"
 
 import ClientLibraries from "./client-libraries.mdx"
@@ -1480,4 +1480,99 @@ Refer to [this guide](!docs!/learn/customization/extend-features/extend-create-p
 
 </SectionContainer>
 
+<SectionContainer noTopPadding={true}>
+
+<DividedMarkdownLayout>
+
+<DividedMarkdownContent>
+
+## Localization
+
+<Prerequisites
+  items={[
+    {
+      text: "Translation Module Configured",
+      link: "!resources!/commerce-modules/translation#configure-translation-module",
+    }
+  ]}
+/>
+
+Medusa's Store APIs support localization. Currently, only product-related information can be localized, such as product titles and descriptions.
+
+By default, the Store APIs return data in the default locale configured in your Medusa application, and falls back to the original data of a resource.
+
+</DividedMarkdownContent>
+
+</DividedMarkdownLayout>
+
+<DividedMarkdownLayout addYSpacing>
+
+<DividedMarkdownContent>
+
+You can set the locale of a request using one of the following methods:
+
+- Use the JS SDK's `setLocale` method. The JS SDK will automatically include the locale in the `x-medusa-locale` header of subsequent requests.
+- Pass the `locale` query parameter to the [List Products API route](#products_getproducts).
+- Set the `x-medusa-locale` header in the API request to the [List Products API route](#products_getproducts).
+
+Locales are in the [IETF BCP 47](https://gist.github.com/typpo/b2b828a35e683b9bf8db91b5404f1bd1) format, such as `en-US` for American English, or `fr-FR` for French.
+
+The returned data will be in the specified locale if a translation exists. Otherwise, it will fall back to the original data.
+
+Learn more in the [Storefront Localization guide](!resources!/storefront-development/localization).
+
+</DividedMarkdownContent>
+
+<DividedMarkdownCode>
+
+<CodeTabs group="request-localization-examples">
+
+<CodeTab label="Using JS SDK" value="js-sdk">
+
+```js
+sdk.setLocale("fr-FR")
+// products content will be in French
+const { products } = await sdk.store.product.list()
+```
+
+</CodeTab>
+
+<CodeTab label="Using Query Parameter" value="query-param">
+
+```bash
+curl "http://localhost:9000/store/products?locale=fr-FR" \
+-H 'x-publishable-api-key: {your_publishable_api_key}'
+```
+
+</CodeTab>
+<CodeTab label="Using Header" value="header">
+
+```bash
+curl "http://localhost:9000/store/products" \
+-H 'x-publishable-api-key: {your_publishable_api_key}' \
+-H "x-medusa-locale: fr-FR"
+```
+
+</CodeTab>
+
+</CodeTabs>
+
+
+</DividedMarkdownCode>
+
+</DividedMarkdownLayout>
+
+<DividedMarkdownLayout>
+
+<Feedback
+  extraData={{
+    section: "localization"
+  }}
+  question="Was this section helpful?"
+/>
+
+</DividedMarkdownLayout>
+
+</SectionContainer>
+
 </Section>