> For the complete documentation index, see [llms.txt](https://valantic.gitbook.io/spartacus-mock/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://valantic.gitbook.io/spartacus-mock/examples/define-translations.md).

# Define Translations

Out of the box, spartacus-mock uses the default english translations provided by spartacus itself. You can override these translations, enhance them with additional translations or add your own custom translations:

## Override default translations

1. Open the file `src/mock-server/mock-data/translations/translations.ts` (created by the setup schematics)
2. Out of the box, the default translations from Spartacus Assets are imported in this file
3. Create a folder `en` within the `translations` folder
4. Create a file `src/mock-server/mock-data/translations/en/product.ts` with the following content

```ts
// src/mock-server/mock-data/translations/en/product.ts
// your custom translations for the chunk product

export const product = {
  // your custom translations for the chunk product
  // you can add any nested objects here, they get deep merged with the existing default translations
  productSummary: {
    id: 'ID (custom)',
  },
};
```

5. Create a file `src/mock-server/mock-data/translations/en/index.ts` with the following content

```ts
// src/mock-server/mock-data/translations/en/index.ts
import { mergeDeep } from '@valantic/spartacus-mock';
import { translations } from '@spartacus/assets';
import { product } from './product';

export const en = {
  ...mergeDeep(translations['en'], { product }),
};
```

6. Add the enhanced english chunks to the translations file

```ts
import { en } from './en';

export const translationResources = {
  en,
};
```

## Add custom chunks for language EN

1. Open the file `src/mock-server/mock-data/translations/translations.ts`
2. Create a folder `en` within the `translations` folder
3. Create a file `src/mock-server/mock-data/translations/en/my-custom-chunk.ts` with the following content

```ts
// src/mock-server/mock-data/translations/en/product.ts
// your custom translations for the chunk myCustomChunk

export const myCustomChunk = {
  myCustomChunk: {
    foo: 'bar',
  },
};
```

5. Create a file `src/mock-server/mock-data/translations/en/index.ts` with the following content

```ts
// src/mock-server/mock-data/translations/en/index.ts
import { translations } from '@spartacus/assets';
import { myCustomChunk } from './my-custom-chunk';

export const en = {
  ...translations['en'],
  myCustomChunk,
};
```

6. Add the enhanced english chunks to the translations file

```ts
import { en } from './en';

export const translationResources = {
  en,
};
```

7. Use your new translation in the template: `{{'myCustomChunk.foo' | cxTranslate}}`

> Pro tip: Do not forget to add the new chunk to the translation chunk config of the spartacus configuration module.

## Add translations for other languages

1. Open the file `src/mock-server/mock-data/translations/translations.ts` and add a `de` property

```ts
// src/mock-server/mock-data/translations/translations.ts
import { TranslationResources } from '@spartacus/core';
import { de } from './de';

export const translationResources: TranslationResources = {
  en: translations['en'],
  de,
};
```

2. Create a folder `de` within the `translations` folder
3. Create a file `src/mock-server/mock-data/translations/de/index.ts` with the following content

```ts
// src/mock-server/mock-data/translations/de/index.ts
// your custom chunks that you want to override
import { product } from './product';

export const de = {
  product,
};
```

4. Create a file `src/mock-server/mock-data/translations/de/product.ts` with the following content

```ts
// src/mock-server/mock-data/translations/de/product.ts
// your german translations for the chunk product

export const product = {
  // your  german translations for the chunk product
};
```

5. Append your translations to your mockConfig in your `main.ts` file

```ts
// src/main.ts
// add your translation overrides
import { translationResources } from './mock-server/mock-data/translations/translations';

const mockConfig: MockConfig = {
  // ...
  translations: translationResources,
  // ...
};
```

> Pro tip: If you want to have full control over the translations, you can also provide a custom handler for the translation endpoint as described in "Add Handlers for Endpoints"


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://valantic.gitbook.io/spartacus-mock/examples/define-translations.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
