[Sugester V2 EN](https://sugester.intum.pl/kb/sugester-v2-en.md) / [CMS](https://sugester.intum.pl/kb/sugester-v2-en/cms.md)

# [Multilingual Pages in CMS](https://sugester.intum.pl/kb/sugester-v2-en/multilingual-pages-in-cms.md)

How to create multilingual pages with a switcher and correct SEO tags.

## Structure

Each language version is a **separate page** with its own fields:

```
Site: MyCompany-marketing
├── Page: main (path: "")        → mycompany.com/
├── Page: main-en (path: "en")   → mycompany.com/en
├── Page: Dashboard (path: "Dashboard")  → mycompany.com/dashboard
└── Page: Dashboard-en (path: "Dashboard-en") → mycompany.com/dashboard-en
```

## Required fields for each page

### PL Page:
```json
{
  "lang": "pl",
  "current_lang": "pl",
  "page_path_pl": "/dashboard",
  "page_path_en": "/dashboard-en",
  "hreflang_pl": "https://mycompany.com/dashboard",
  "hreflang_en": "https://mycompany.com/dashboard-en",
  "canonical_url": "https://mycompany.com/dashboard"
}
```

### EN Page:
```json
{
  "lang": "en",
  "current_lang": "en",
  "page_path_pl": "/dashboard",
  "page_path_en": "/dashboard-en",
  "hreflang_pl": "https://mycompany.com/dashboard",
  "hreflang_en": "https://mycompany.com/dashboard-en",
  "canonical_url": "https://mycompany.com/dashboard-en"
}
```

## Language switcher in the layout

### Simple (links):
```html
<a href="{{ page_path_pl }}" 
   class="{% if current_lang == 'pl' %}active{% endif %}">PL</a>
<a href="{{ page_path_en }}" 
   class="{% if current_lang == 'en' %}active{% endif %}">EN</a>
```

### Dropdown:
```html
<div class="lang-dropdown">
  <button>{{ current_lang | upcase }}</button>
  <div class="lang-menu">
    <a href="{{ page_path_pl }}">PL - Polish</a>
    <a href="{{ page_path_en }}">EN - English</a>
  </div>
</div>
```

## Navigation menu with language

Links to other pages must consider the current language:

```html
<a href="https://mycompany.com{% if current_lang == 'en' %}/en{% endif %}">
  MyCompany
</a>

<a href="https://mycompany.com{% if current_lang == 'en' %}/dashboard-en{% else %}/dashboard{% endif %}">
  Dashboard
</a>
```

## hreflang tags

Inform Google about language versions:

```html
<link rel="alternate" hreflang="pl" href="{{ hreflang_pl }}">
<link rel="alternate" hreflang="en" href="{{ hreflang_en }}">
<link rel="alternate" hreflang="x-default" href="{{ hreflang_pl }}">
```

`x-default` indicates the default version (usually the main language).

## Multilingual content

For content in paragraphs, you have two options:

### Option 1: Separate paragraphs
- `Hero PL` (priority 100) assigned to the PL page
- `Hero EN` (priority 100) assigned to the EN page

### Option 2: Variables in one paragraph
```html
{% if lang == 'pl' %}
  <h1>Welcome to MyCompany</h1>
{% else %}
  <h1>Welcome to MyCompany</h1>
{% endif %}
```

**Recommended:** Option 1 - easier to maintain.

## API - creating pages

```bash
# PL Page
curl -X POST "https://domain.com/cms/pages.json?api_token=TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "page": {
      "name": "Dashboard PL",
      "path": "Dashboard",
      "site_id": 1018,
      "layout_id": 1018,
      "fields": {
        "lang": "pl",
        "current_lang": "pl",
        "page_path_pl": "/dashboard",
        "page_path_en": "/dashboard-en"
      }
    }
  }'
```

## Checklist

- [ ] Each language version has a separate page
- [ ] `lang` and `current_lang` set
- [ ] `page_path_pl` and `page_path_en` on both pages
- [ ] `hreflang` tags in the layout
- [ ] `canonical_url` unique for each page
- [ ] Language switcher works correctly