Gato GraphQL + Bricks Builder + Translation 데모

Bricks 콘텐츠 번역

Gato GraphQL을 사용하여 Bricks 페이지의 텍스트 콘텐츠를 지정한 언어로 번역합니다

Leonardo Losoviz
Leonardo Losoviz -
Logo
Image
Target Image
Target Image

Gato GraphQLBricks 확장 기능Translation 확장 기능을 함께 사용하면, Bricks 페이지 요소 내의 콘텐츠를 다양한 언어로 자동 번역할 수 있습니다.

이 쿼리는 Bricks 페이지의 heading, text, text-basic, button, dropdown 요소의 콘텐츠를 다른 언어로 번역합니다.

다음 변수를 제공해야 합니다:

  • customPostId: 업데이트할 Bricks 커스텀 포스트의 ID
  • targetLanguageCode: 콘텐츠를 번역할 대상 언어 코드 (예: "es", "fr", "de")

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
      }
    }
  }
}

변수는 다음과 같이 지정합니다:

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

뉴스레터 구독하기

Gato GraphQL의 모든 업데이트를 놓치지 마세요.