manual-pink•6mo ago

Breadcrumb i18n

How can I translate part of my breadcrumb to a specific i18n key? I've seen in the code that breadcrumb searches for the i18n key the following way:

tsx 
pickNotDeprecated(
  parentResource.meta?.label,
      parentResource.options?.label,
  ) ??
  translate(`${parentResource.name}.${parentResource.name}`,
    textTransformers.humanize(parentResource.name),
  ),

tsx 
pickNotDeprecated(
  parentResource.meta?.label,
      parentResource.options?.label,
  ) ??
  translate(`${parentResource.name}.${parentResource.name}`,
    textTransformers.humanize(parentResource.name),
  ),

What do I need to add to my i18n config file to provide a custom translation for an action in a resource? In my case, I want to translate 'Editar' to 'Detalhes' only for the 'Loja' resource.

3 Replies

kapa.ai•6mo ago

Hi @Chrystian Ferreira. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To provide a custom translation for an action in a resource, you need to add the translation to your i18n configuration file. In your case, you want to translate 'Editar' to 'Detalhes' only for the 'Loja' resource. You can do this by adding a new entry to your translation file (common.json) under the actions key. The actions key is used by the useBreadcrumb hook to translate the names of CRUD operations (list,create,edit,show). Here is an example of how you can add the translation:

{
  "actions": {
    "edit": "Detalhes"
  }
}

{
  "actions": {
    "edit": "Detalhes"
  }
}

This will translate 'edit' to 'Detalhes' for all resources. If you want to do this only for the 'Loja' resource, you can add a new key for 'Loja' and specify the translations for its actions:

{
  "Loja": {
    "actions": {
      "edit": "Detalhes"
    }
  }
}

{
  "Loja": {
    "actions": {
      "edit": "Detalhes"
    }
  }
}

Please note that the useBreadcrumb hook uses the label property of the resource definition if it exists. Otherwise, it uses the name property. So, make sure that your 'Loja' resource has the correct label or name property set. For more information, you can refer to the Refine documentation on i18n support (https://refine.dev/docs/core/hooks/utilities/use-breadcrumb#i18n-support) and Refine documentation on adding translation files (https://refine.dev/docs/guides-concepts/i18n#adding-the-translations-files). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@1072217596058939412> kapa.ai is still learning and improving, please let us know how it did by reacting below

manual-pink•6mo ago

@kapa.ai This didn't work. In my 'edit' page of the 'Loja' resource, the breadcrumb shows Lojas / Editar instead of Lojas / Detalhes