Démo de Gato GraphQL + Bricks Builder + Translation

Traduire le contenu de Bricks

Traduit le contenu textuel d'une page Bricks dans la langue indiquée

Leonardo Losoviz
Leonardo Losoviz -
Logo
Image
Target Image
Target Image

Nous pouvons utiliser Gato GraphQL avec l'extension Bricks et l'extension Translation pour traduire automatiquement le contenu des éléments d'une page Bricks vers différentes langues.

Cette requête traduit le contenu des éléments heading, text, text-basic, button et dropdown d'une page Bricks vers une autre langue.

Nous devons fournir les variables suivantes :

  • customPostId : L'ID du custom post Bricks à mettre à jour
  • targetLanguageCode : Le code de langue vers lequel traduire le contenu (par exemple, "es", "fr", "de")

Voici la requête GraphQL :

query InitializeGlobalVariables
  @configureWarningsOnExportingDuplicateVariable(enabled: false)
{
  emptyArray: _echo(value: [])
    @export(as: "elementToUpdateIDs")
    @export(as: "elementToUpdateTexts")
    @remove
}
 
query GetAndTranslateBricksData(
  $customPostId: ID!
  $targetLanguageCode: String!
)
  @depends(on: "InitializeGlobalVariables")
{
  customPost(by:{ id: $customPostId }, status: any) {
    id
    title
    bricksData(filterBy: { include: [
      "heading",
      "text",
      "text-basic",
      "button",
      "dropdown",
    ] })
      @underEachArrayItem(
        affectDirectivesUnderPos: [1, 3]
      )
        @underJSONObjectProperty(by: { key: "id" })
          @export(as: "elementToUpdateIDs")
        @underJSONObjectProperty(
          by: { path: "settings.text" }
          affectDirectivesUnderPos: [1, 2]
        )
          @strTranslate(to: $targetLanguageCode)
          @export(as: "elementToUpdateTexts")
  }
}
 
query GetElementToUpdateData
  @depends(on: "GetAndTranslateBricksData")
{
  elementToUpdateMergeInputElements: _echo(value: $elementToUpdateTexts)
    @underEachArrayItem(
      passIndexOnwardsAs: "index",
      passValueOnwardsAs: "elementToUpdateText"
      affectDirectivesUnderPos: [1, 2]
    )
      @applyField(
        name: "_arrayItem",
        arguments: {
          array: $elementToUpdateIDs,
          position: $index
        },
        passOnwardsAs: "elementToUpdateID"
      )
      @applyField(
        name: "_echo",
        arguments: {
          value: {
            id: $elementToUpdateID,
            settings: {
              text: $elementToUpdateText
            }
          }
        }
        setResultInResponse: true
      )
    @export(as: "elementToUpdateMergeInputElements")
}
 
mutation StoreUpdatedElementText($customPostId: ID!)
  @depends(on: "GetElementToUpdateData")
{
  bricksMergeCustomPostElementDataItem(input: {
    customPostID: $customPostId
    elements: $elementToUpdateMergeInputElements
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
          @passOnwards(as: "message")
          @fail(
            message: $message
            condition: ALWAYS
          )
      }
    }
    customPost {
      __typename
      ...on CustomPost {
        id
        bricksData
      }
    }
  }
}

Les variables ressembleraient à ceci :

{
  "customPostId": 123,
  "targetLanguageCode": "es"
}

Abonnez-vous à notre newsletter

Restez au courant de toutes les nouveautés de Gato GraphQL.