Translations

Introduction

Translating a shop consists of two steps:

• Translating the storefront application.
• Translating the products and other data available in the API.

You can manage the frontend part using extensions like Format.JS. Generated files can be later edited manually or using an external service, for example, Transifex or POEditor. Besides text, also prices and dates should be localized using Intl.NumberFormat and date-fns.

For translating database data, Saleor delivers specialized translation objects which can be modified in dashboard or via the API.

Objects available for translation

• ProductTranslation
• CollectionTranslation
• CategoryTranslation
• AttributeTranslation
• AttributeValueTranslation
• ProductVariantTranslation
• PageTranslation
• ShippingMethodTranslation
• SaleTranslation
• VoucherTranslation
• MenuItemTranslation

Permissions

All users who have a MANAGE_TRANSLATIONS permission can create and modify translations. Additional permissions for managing objects are not required.

How to add translation

As an example, we will use the categoryTranslate mutation. Fields omitted in the input parameter will not be overwritten, so you can choose to only translate one field at a time:

categoryTranslate(
    id: "Q2F0ZWdvcnk6OQ==",
    input: {
        "name": "Wyróżnione produkty"
    },
    languageCode: PL
) {
    category {
        name
    }
    translation(languageCode: PL) {
        name
    }
}

Response:

{
  "data": {
    "categoryTranslate": {
      "category": {
        "name": "Apparel",
        "translation": {
          "name": "Wyróżnione produkty"
        }
      }
    }
  }
}

How to query translation

Let's query the API for a previously created category translation. A translation field in the Category model has a languageCode parameter which requires LanguageCodeEnum.

query {
  category(id: "Q2F0ZWdvcnk6OQ==") {
    name
    seoDescription
    translation(languageCode: PL) {
      name
      seoDescription
    }
  }
}

Response:

{
  "data": {
    "category": {
      "name": "Apparel",
      "seoDescription": "Short category description",
      "translation": {
        "name": "Wyróżnione produkty",
        "seoDescription": null
      }
    }
  }
}

Fields that haven't been translated will be returned as null values.