Gato GraphQL + Elementor demo
Creating an Elementor page dynamically by injecting data into a template
Create a template page in Elementor with placeholders, and dynamically inject data into them, to dynamically create a new Elementor page
Leonardo Losoviz -
We can use the Elementor extension (to access and mutate Elementor data from a page) to dynamically create a new Elementor page from a template, injecting data from any source.
In this demo video, we use GraphQL variables dictionary to provide the data for the new Elementor page, however you can use other data sources too, such as CSV.
The GraphQL query is this one:
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
}
}
}
}...and to demonstrate, we inject data via the GraphQL JSON variables:
{
"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"]
}