템플릿에서 Elementor 페이지 만들기

이 쿼리는 템플릿에 데이터를 주입하여 Elementor 페이지를 동적으로 만들기 데모에서 소개됩니다.

이 쿼리는 템플릿에서 새로운 Elementor 페이지를 만들고, 임의의 소스에서 데이터를 주입합니다.

다음 작업을 수행합니다:

동적 변수 초기화
페이지 템플릿 가져오기 및 데이터 내보내기
템플릿에서 새 페이지 만들기
페이지의 Elementor 데이터를 제공된 데이터로 교체
새 데이터로 Elementor 페이지 업데이트

이 쿼리를 사용하려면 Elementor 확장 기능이 활성화되어 있어야 합니다.

필요한 변수는 다음과 같습니다:

templatePageId: Elementor 템플릿 페이지의 ID
pageTitle: 새 페이지의 제목
imageUrl: call-to-action 위젯에 사용할 이미지의 URL
heading: heading 위젯에 사용할 제목 텍스트
description: text editor 위젯에 사용할 설명 텍스트
items: icon list 위젯에 사용할 문자열 배열

query InitializeDynamicVariables
  @configureWarningsOnExportingDuplicateVariable(enabled: false)
{
  authorID: _echo(value: null)
    @export(as: "authorID")
    @remove
 
  featuredImageID: _echo(value: null)
    @export(as: "featuredImageID")
    @remove
 
  meta: _echo(value: {})
    @export(as: "meta")
    @remove
}
 
query GetPageTemplateAndExportData($templatePageId: ID!)
  @depends(on: "InitializeDynamicVariables")
{
  exportPage: page(by: { id: $templatePageId }, status: any) {
    # Fields not to be duplicated
    id
    slug
    date
    status
 
    # Fields to be duplicated
    author {
      id @export(as: "authorID")
    }
    rawContent @export(as: "rawContent")
    rawExcerpt @export(as: "excerpt")
    featuredImage {
      id @export(as: "featuredImageID")
    }
 
    metaKeys(filter: { exclude: [
      "_thumbnail_id",
      "_edit_last",
      "_elementor_page_assets",
      "_elementor_controls_usage",
      "_elementor_css",
      "_elementor_screenshot",
    ] })
    meta(keys: $__metaKeys) 
      @export(as: "meta")
  }
}
 
mutation CreatePageFromTemplate(
  $pageTitle: String!
)
  @depends(on: "GetPageTemplateAndExportData")
{
  createPage(input: {
    status: draft,
    authorBy: {
      id: $authorID
    },
    contentAs: {
      html: $rawContent
    },
    excerpt: $excerpt
    featuredImageBy: {
      id: $featuredImageID
    },
    title: $pageTitle,
    meta: $meta
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    page {
      # Fields not to be duplicated
      id
      slug
      date
      status
 
      # Fields to be duplicated
      author {
        id
      }
      rawContent
      excerpt
      featuredImage {
        id
      }
      title
      
      metaKeys
      meta(keys: $__metaKeys)
    }
    pageID @export(as: "newPageId")
  }
}
 
query ReplaceElementorDataInPage(
  $imageUrl: String!
  $heading: String!
  $description: String!
  $items: [String!]!
)
  @depends(on: "CreatePageFromTemplate")
{
  page(by: { id: $newPageId }, status: any) {
    title
    elementorFlattenedDataItems
      @underEachArrayItem(
        passValueOnwardsAs: "element"
        affectDirectivesUnderPos: [1, 2, 3]
    	)
        @applyField(
          name: "_objectProperty",
          arguments: {
            by: {
              key: "widgetType"
            },
            object: $element
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "widgetType"
        )
        @applyField(
          name: "_equals",
          arguments: {
            value1: $widgetType
            value2: "call-to-action"
          }
          passOnwardsAs: "isWidget"
        )
        @if(condition: $isWidget)
          @underJSONObjectProperty(
            by: {
              path: "settings.bg_image.url"
            }
          )
            @applyField(
              name: "_echo",
              arguments: {
                value: $imageUrl
              }
              setResultInResponse: true
            )
    
      @underEachArrayItem(
        passValueOnwardsAs: "element"
        affectDirectivesUnderPos: [1, 2, 3]
    	)
        @applyField(
          name: "_objectProperty",
          arguments: {
            by: {
              key: "widgetType"
            },
            object: $element
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "widgetType"
        )
        @applyField(
          name: "_equals",
          arguments: {
            value1: $widgetType
            value2: "heading"
          }
          passOnwardsAs: "isWidget"
        )
        @if(condition: $isWidget)
          @underJSONObjectProperty(
            by: {
              path: "settings.title"
            }
          )
            @applyField(
              name: "_echo",
              arguments: {
                value: $heading
              }
              setResultInResponse: true
            )
    
      @underEachArrayItem(
        passValueOnwardsAs: "element"
        affectDirectivesUnderPos: [1, 2, 3]
    	)
        @applyField(
          name: "_objectProperty",
          arguments: {
            by: {
              key: "widgetType"
            },
            object: $element
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "widgetType"
        )
        @applyField(
          name: "_equals",
          arguments: {
            value1: $widgetType
            value2: "text-editor"
          }
          passOnwardsAs: "isWidget"
        )
        @if(condition: $isWidget)
          @underJSONObjectProperty(
            by: {
              path: "settings.editor"
            }
          )
            @strReplace(
              search: "{description}",
              replaceWith: $description
            )
    
      @underEachArrayItem(
        passValueOnwardsAs: "element"
        affectDirectivesUnderPos: [1, 2, 3]
    	)
        @applyField(
          name: "_objectProperty",
          arguments: {
            by: {
              key: "widgetType"
            },
            object: $element
            failIfNonExistingKeyOrPath: false
          }
          passOnwardsAs: "widgetType"
        )
        @applyField(
          name: "_equals",
          arguments: {
            value1: $widgetType
            value2: "icon-list"
          }
          passOnwardsAs: "isWidget"
        )
        @if(condition: $isWidget)
          @underJSONObjectProperty(
            by: {
              path: "settings.icon_list"
            }
          )
            @underEachArrayItem
              @underJSONObjectProperty(
                by: {
                  key: "text"
                }
              )
                @strReplaceMultiple(
                  search: ["{item1}", "{item2}", "{item3}", "{item4}", "{item5}", "{item6}"],
                  replaceWith: $items
                )
      @underEachArrayItem
        @objectKeepProperties(keys: ["id", "settings"])
      @export(
        as: "updatedElementorDataItems"
      )
  }
}
 
mutation CreateElementorPageWithData
  @depends(on: "ReplaceElementorDataInPage")
{
  elementorMergeCustomPostElementDataItem(input: {
    elements: $updatedElementorDataItems,
    customPostID: $newPageId
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
  }
}

변수의 예시는 다음과 같습니다:

{
  "templatePageId": 2746,
  "pageTitle": "My awesome services",
  "imageUrl": "https://gatographql.com/assets/GatoGraphQL-logo-suki-rectangular.png",
  "heading": "My great header",
  "description": "Please come visit my website",
  "items": ["Great value", "Amazing features", "Friendly staff", "Open 24/7", "Money-back guarantee", "Premium support"]
}