Demo Gato GraphQL + Elementor
Tạo trang Elementor động bằng cách chèn dữ liệu vào mẫu
Tạo một trang mẫu trong Elementor với các trình giữ chỗ, và chèn dữ liệu vào chúng một cách động để tạo ra một trang Elementor mới
Leonardo Losoviz -
Chúng ta có thể sử dụng tiện ích mở rộng Elementor (để truy cập và chỉnh sửa dữ liệu Elementor từ một trang) để tạo động một trang Elementor mới từ một mẫu, chèn dữ liệu từ bất kỳ nguồn nào.
Trong video demo này, chúng ta sử dụng từ điển biến GraphQL để cung cấp dữ liệu cho trang Elementor mới, tuy nhiên bạn cũng có thể sử dụng các nguồn dữ liệu khác, chẳng hạn như CSV.
Câu truy vấn GraphQL như sau:
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
}
}
}
}...và để minh họa, chúng ta chèn dữ liệu thông qua các biến JSON GraphQL:
{
"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"]
}