Overwriting the Messages app

Introduction

Messages is VTEX IO's key tool for your store's internationalization, since it's responsible for translating any website message (that is, website text content) for rendering.

However, you may feel that some translations done by the app are not what you want them to be and therefore wish to change the translated content to something more specific or representative of your store, such as a special login message for Spanish speaking users from Argentina.

This recipe will show you how to overwrite the Messages app and easily create new message content through your store's admin.

Step by step

  1. Install the vtex.admin-graphql-ide@3.x app using your terminal.

  2. Access the GraphQL admin IDE section of the desired account. You may find it in the admin's side-bar menu:

overwriting-messages-adminsidebarmenu

  1. From the dropdown list, choose the vtex.messages app.
  2. Write the following mutation command in the text box that is displayed:
mutation Save($save: SaveArgs!){
  save(args: $save)
}
  1. Then, click on Query variables at the bottom of the page.
  2. According to your store's scenario, write the following variables into the text box:
{
  "save": {
    "to": "en-US",
    "messagesByProvider": [{
      "provider": "vtex.login@2.x",
      "messages": [{
        "id": "store/login.signIn",
        "content": "Welcome! Please log in "
      }]
    }]
  }
}

Note that the variable values to, provider, id and content will tell the Messages app where and what the message change will be. Therefore, these variables are flexible and must fit your store's desired scenario. The variables are as follows:

  • to: where the message is located.
  • provider: App message provider.
  • id: message ID.
  • content: message content itself.

Following the given example above, your admin should look similar to this:

overriding-messages-interface

Finally, click on the play button to run the declared mutation.

overwriting-messages-play

The expected response is as follows:

{
  "data": {
    "save": true
  }
}

Now, no other actions are needed on your part. Once you receive the expected response, you are ready to check out the desired changes in your store!

Edit this page on GitHub