Démo Gato GraphQL + Elementor
Créer une page Elementor dynamiquement en injectant des données dans un modèle
Créez une page modèle dans Elementor avec des espaces réservés, et injectez-y des données dynamiquement pour créer une nouvelle page Elementor
Leonardo Losoviz -
Nous pouvons utiliser l'extension Elementor (pour accéder aux données Elementor d'une page et les modifier) afin de créer dynamiquement une nouvelle page Elementor à partir d'un modèle, en injectant des données provenant de n'importe quelle source.
Dans cette vidéo de démo, nous utilisons le dictionnaire de variables GraphQL pour fournir les données de la nouvelle page Elementor, mais vous pouvez également utiliser d'autres sources de données, comme l'import de posts depuis un CSV.
La requête GraphQL est la suivante :
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
}
}
}
}...et pour la démonstration, nous injectons les données via les variables 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"]
}