Content Localization

Content localization is the process of adapting your content to different languages and regions. Every CMS module supports multilingual content, allowing you to create and manage content in multiple languages and render it in your Storefront. In this guide, you will learn how to achieve content localization in your CMS.

Overview

Content internationalization in the CMS is based on the concept of locales. A locale is a combination of a language and a region. For example, en-US represents the English language as spoken in the United States.

Types of Localization

There are two types of localization in the CMS:

1. Component-level localization: This type of localization allows you to create and manage components in multiple languages and regions. For example, you can add a banner with information about a discount specific to a locale, or you can create completely different landing pages for different locales.
2. Field-level localization: This type of localization allows you to manage fields in multiple languages and regions. It's the most common type of localization, enabling you to translate the content within your CMS.

The default Alokai content type schemas for CMS integrations leverage field-level localization wherever possible.

CMS Support

Setting Up Localization

The process of setting up localization in the CMS varies depending on the CMS you are using. We recommend following the official guidelines provided by each platform:

• Amplience
• Bloomreach Content
• Builder.io
• Contentful
• Contentstack

Fetching Localized Content

Once you have set up localization in your CMS, you can fetch localized content in your Storefront. The unified getPage() method available in every Alokai CMS integration accepts the locale parameter:

import { getSdk } from '@/sdk/sdk.server';

interface PageProps {
  locale: string
}

export default function Page({ locale }: PageProps) {
  const sdk = getSdk();

  const page = await sdk.unifiedCms.getPage({
    path: '/',
    locale,
  });

  return (
    <>
      {/** ... */}
    </>
  )
}

The locale you pass to the getPage method should match the locale set up in your CMS. It can be different from your Storefront's locale. To mitigate that, you can use an object that maps the Storefront locale to the CMS locale.

const appLocaleToCmsLocale: Record<string, string> = {
  de: 'de',
  en: 'en-US',
};

This ensures that when you navigate to the /en page in your Storefront, the en-US locale will be passed to the getPage method.