diff --git a/docs/store-operations/translations/filters.mdx b/docs/store-operations/translations/filters.mdx new file mode 100644 index 000000000..7bd37bdd4 --- /dev/null +++ b/docs/store-operations/translations/filters.mdx @@ -0,0 +1,285 @@ +--- +title: Product Filter Translations +keywords: translations, product filters, localization, i18n, graphql, filters +description: Translate product filter display names and labels for multilingual storefronts using the Translations Admin GraphQL API. +--- + +# Translations for Product Filters (Beta) + + +The Translations Admin GraphQL API is currently available on Catalyst storefronts only. + + +This subset of the Translation API is built for translating the labels on the faceted search / product filtering fields on the storefront. In particular, it allows you to translate the general filter names such as Category, Brand, and Custom Fields. These translations specifically apply to the title of the group, not the filter values and variables. To manage the filter values themselves, refer to the specific resources. + +The product filter translatable fields are: + +| Filter Type | Translatable Fields | +|-------------|-------------------| +| Category, Brand, Variants, Custom Fields, Price, Rating | Display Name as the field name (e.g. `brand` or `category`) | +| Other Filters | Display Name as `display_name`
Has Free Shipping as `has_free_shipping`
Is Featured as `is_featured`
In Stock as `in_stock` | + + +While most translatable entities use a `resourceId` format of `bc/store/{{type}}/{id}}`, product filters use a different format. + +Use `bc/store/ProductFilters/{filterName}`, using the filters above for reference. + + + +Only string values are translatable. Numeric content such as product count or price values are not translatable. + + +## Query translations + +This query returns a paginated list of translations by `resourceType`, `channelId`, and `localeId` with a maximum of 50 results per request. + +Translated fields are returned whenever available, and the default locale values are returned otherwise on a field-by-field basis. + + + +```graphql filename="Example query: Query a list of translations" showLineNumbers copy +GRAPHQL https://api.bigcommerce.com/stores/{{store_hash}}/graphql +X-Auth-Token: {{token}} + +query { + store { + translations(filters: { + resourceType: PRODUCT_FILTERS, + channelId: "bc/store/channel/{{channel_id}}", + localeId: "bc/store/locale/fr" + } first: 50) { + edges { + node { + resourceId + fields { + fieldName + original + translation + } + } + cursor + } + } + } +} +``` + + + +```json filename="Example query: Query a list of translations" showLineNumbers copy +{ + "data": { + "store": { + "translations": { + "edges": [ + { + "node": { + "resourceId": "bc/store/productFilters/brand", + "fields": [ + { + "fieldName": "brand", + "original": "Brand", + "translation": null + } + ] + }, + "cursor": "YnJhbmQ6Mg==" + } + ] + } + } + } +} +``` + + + +### Query a translation by `resourceId` + + +When querying a translation by `resourceId`, you must provide the full `resourceId` in the format `bc/store/product-filter/{filter_id}`. + + +This query returns translation(s) by `resourceId`. + + + + ```graphql filename="Example query: Query a translation by resource id" showLineNumbers copy +GRAPHQL https://api.bigcommerce.com/stores/{{store_hash}}/graphql +X-Auth-Token: {{token}} + +query { + store { + translations(filters: { + resourceType: PRODUCT_FILTERS, + channelId: "bc/store/channel/{{channel_id}}", + localeId: "bc/store/locale/it", + resourceIds: ["bc/store/productFilters/brand"] + }) { + edges { + node { + resourceId + fields { + fieldName + original + translation + } + } + cursor + } + } + } +} +``` + + + +```json filename="Example query: Query a translation by resource id" showLineNumbers copy +{ + "data": { + "store": { + "translations": { + "edges": [ + { + "node": { + "resourceId": "bc/store/productFilters/brand", + "fields": [ + { + "fieldName": "brand", + "original": "Brand", + "translation": null + } + ] + }, + "cursor": "eyJpZCI6NDJ9" + } + ] + } + } + } +} +``` + + + +## Update a translation + +This mutation updates a translation. + + + +```graphql filename="Example mutation: Update a translation" showLineNumbers copy +GRAPHQL http://api.bigcommerce.com/stores/{{store_hash}}/graphql +X-Auth-Token: {{token}} + +mutation { + translation { + updateTranslations(input: { + resourceType: PRODUCT_FILTERS, + channelId: "bc/store/channel/{{channel_id}}", + localeId: "bc/store/locale/es", + entities: [ + { + resourceId: "bc/store/productFilters/brand", + fields: [ + { + fieldName: "brand", + value: "brand (OVR)" + } + ] + } + ] + }) { + __typename + errors { + __typename + ... on Error { + message + } + } + } + } +} +``` + + + +```json filename="Example mutation: Update a translation" showLineNumbers copy +{ + "data": { + "translation": { + "updateTranslations": { + "__typename": "UpdateTranslationsResult", + "errors": [] + } + } + } +} +``` + + + +## Delete a translation + +The following mutation deletes a translation. + + + +```graphql filename="Example mutation: Delete a translation" showLineNumbers copy +GRAPHQL https://api.bigcommerce.com/stores/{{store_hash}}/graphql +X-Auth-Token: {{token}} + +mutation { + translation { + deleteTranslations(input: { + resourceType: PRODUCT_FILTERS, + channelId: "bc/store/channel/{{channel_id}}", + localeId: "bc/store/locale/es", + resources: [ + { + resourceId: "bc/store/productFilters/brand", + fields: ["brand"], + } + ] + }) { + __typename + errors { + __typename + ... on Error { + message + } + } + } + } +} +``` + + + +```json filename="Example mutation: Delete a translation" showLineNumbers copy +{ + "data": { + "translation": { + "deleteTranslations": { + "__typename": "DeleteTranslationsResult", + "errors": [] + } + } + } +} +``` + + + +## Limitations + +- Product count and other numeric-only fields do not support localization. +- Only displayable string content for filter names and values is translatable. +- Currently available on Catalyst storefronts only. + +## Best Practices + +- Use the GraphQL Admin API to manage translations in bulk. +- Check for existing translations before creating new ones to minimize overwrites. +- Always use full `resourceId` values as required by the API. +- Storefront GraphQL API automatically uses the shopper’s locale for product filter display names.