Translations

Introduction

Translating shop consist of two steps:

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

Frontend part can be managed using extensions like Format.JS. Generated files can be later edited by hand or using 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 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 a example we will use categoryTranslate mutation. Fields omitted in parameter input 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 which were not yet translated will be returned as null values.