Gato GraphQL + Elementor 데모
템플릿에 데이터를 삽입하여 Elementor 페이지를 동적으로 생성하기
Elementor에서 플레이스홀더가 있는 템플릿 페이지를 만들고, 데이터를 동적으로 삽입하여 새로운 Elementor 페이지를 생성합니다
Elementor 확장 기능（페이지의 Elementor 데이터에 접근하고 수정하기 위해）을 사용하면, 템플릿에서 새로운 Elementor 페이지를 동적으로 생성하고, 어떤 소스에서든 데이터를 삽입할 수 있습니다.
이 데모 영상에서는 GraphQL 변수 딕셔너리를 사용하여 새로운 Elementor 페이지의 데이터를 제공하지만, CSV에서 게시물 가져오기와 같은 다른 데이터 소스도 활용할 수 있습니다.
GraphQL 쿼리는 다음과 같습니다:
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")
}
# rawTitle @export(as: "rawTitle")
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
# elementorData
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
}
}
}
}...그리고 데모로, GraphQL JSON 변수를 통해 데이터를 삽입합니다:
{
"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"]
}