Gato GraphQL + Elementor demosu
Şablona veri enjekte ederek dinamik olarak bir Elementor sayfası oluşturma
Elementor'da yer tutuculara sahip bir şablon sayfa oluşturun ve bu yer tutuculara dinamik olarak veri enjekte ederek yeni bir Elementor sayfası dinamik biçimde oluşturun
Leonardo Losoviz -
Bir sayfanın Elementor verilerine erişmek ve bu verileri değiştirmek için Elementor uzantısını kullanarak, herhangi bir kaynaktan veri enjekte ederek bir şablondan dinamik olarak yeni bir Elementor sayfası oluşturabiliriz.
Bu demo videosunda, yeni Elementor sayfasının verilerini sağlamak için GraphQL değişken sözlüğünü kullanıyoruz; ancak CSV'den içerik aktarımı gibi başka veri kaynaklarını da kullanabilirsiniz.
GraphQL query şu şekildedir:
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
}
}
}
}...ve bunu göstermek amacıyla GraphQL JSON değişkenleri aracılığıyla veri enjekte ediyoruz:
{
"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"]
}