Travailler avecElementor
Elementor
Nous pouvons modifier les données Elementor d'un post et les mettre à jour selon les besoins, en interrogeant, itérant, transformant et stockant le meta JSON Elementor de ce post.
Interroger les données Elementor
Il y a 2 champs pour interroger les données Elementor :
elementorDataretourne le JSON de tous les éléments du post ElementorelementorFlattenedDataItemsretourne également le JSON, mais aplati en un tableau à un seul niveau
Pour transformer et mettre à jour les données Elementor, nous utiliserons elementorFlattenedDataItems, car il est plus facile d'itérer les éléments.
Interrogez le champ elementorFlattenedDataItems, qui retourne le JSON aplati de tous les éléments du post Elementor.
query GetElementorData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on ElementorMaybeEnabledForCustomPostType {
elementorFlattenedDataItems
}
}
}La réponse ressemblera à ceci :
{
"data": {
"post": {
"elementorFlattenedDataItems": [
{
"id": "164e55c4",
"elType": "container",
"settings": {
"layout": "full_width",
"flex_gap": {
"size": 0,
"unit": "px",
"column": "0",
"row": "0",
"isLinked": true
},
"min_height": {
"unit": "vh",
"size": 100,
"sizes": []
},
"flex_align_items": "stretch",
"content_position": "middle",
"structure": "20",
"margin": {
"unit": "%",
"top": "",
"right": 0,
"bottom": "",
"left": 0,
"isLinked": true
},
"padding": {
"unit": "%",
"top": "0",
"right": "6",
"bottom": "0",
"left": "6",
"isLinked": false
},
"margin_tablet": {
"unit": "%",
"top": "12",
"right": 0,
"bottom": "0",
"left": 0,
"isLinked": false
},
"margin_mobile": {
"unit": "%",
"top": "20",
"right": 0,
"bottom": "0",
"left": 0,
"isLinked": false
},
"padding_tablet": {
"unit": "%",
"top": "",
"right": "",
"bottom": "",
"left": "",
"isLinked": true
},
"z_index": 1,
"_title": "Hero",
"flex_direction": "row",
"content_width": "full",
"flex_direction_tablet": "column"
},
"isInner": false,
"innerElementIds": [
"600c1786",
"5b451d4"
],
"parentElementId": null
},
{
"id": "600c1786",
"elType": "container",
"settings": {
"_column_size": 50,
"width": {
"size": 50,
"unit": "%"
},
"padding": {
"unit": "%",
"top": "0",
"right": "12",
"bottom": "0",
"left": "0",
"isLinked": false
},
"width_tablet": {
"size": 100,
"unit": "%"
},
"align_tablet": "center",
"flex_gap": {
"size": 20,
"unit": "px",
"column": "20",
"row": "20",
"isLinked": true
},
"padding_tablet": {
"unit": "%",
"top": "0",
"right": "15",
"bottom": "0",
"left": "15",
"isLinked": false
},
"padding_mobile": {
"unit": "px",
"top": "0",
"right": "0",
"bottom": "0",
"left": "0",
"isLinked": false
},
"content_width": "full",
"flex_direction": "column",
"flex_justify_content": "center",
"flex_align_items": "flex-start",
"flex_align_items_tablet": "center"
},
"isInner": true,
"parentElementId": "164e55c4",
"innerElementIds": [
"db84e33",
"7fe7b508",
"314da60",
"7b7e33ce",
"7ff4508"
]
},
{
"id": "db84e33",
"elType": "widget",
"settings": {
"title": "Your health, <br><b>on your time<\/b>",
"header_size": "h1",
"title_color": "#0D3276",
"typography_typography": "custom",
"typography_font_family": "Poppins",
"typography_font_size": {
"unit": "px",
"size": 76,
"sizes": []
},
"typography_font_weight": "400",
"typography_text_transform": "capitalize",
"typography_font_style": "normal",
"typography_text_decoration": "none",
"typography_line_height": {
"unit": "em",
"size": 1,
"sizes": []
},
"typography_letter_spacing": {
"unit": "px",
"size": 0,
"sizes": []
},
"_z_index": 1,
"align_tablet": "center",
"typography_font_size_tablet": {
"unit": "px",
"size": 55,
"sizes": []
},
"typography_font_size_mobile": {
"unit": "px",
"size": 40,
"sizes": []
}
},
"widgetType": "heading",
"parentElementId": "600c1786",
"innerElementIds": []
}
]
}
}
}Nous pouvons également filtrer les éléments par nom via le paramètre filterBy (qui accepte include et exclude).
En exécutant cette requête :
query GetElementorData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on ElementorMaybeEnabledForCustomPostType {
elementorFlattenedDataItems(filterBy: { include: ["heading"] })
}
}
}...on obtiendra cette réponse :
{
"data": {
"post": {
"elementorFlattenedDataItems": [
{
"id": "db84e33",
"elType": "widget",
"settings": {
"title": "Your health, <br><b>on your time<\/b>",
"header_size": "h1",
"title_color": "#0D3276",
"typography_typography": "custom",
"typography_font_family": "Poppins",
"typography_font_size": {
"unit": "px",
"size": 76,
"sizes": []
},
"typography_font_weight": "400",
"typography_text_transform": "capitalize",
"typography_font_style": "normal",
"typography_text_decoration": "none",
"typography_line_height": {
"unit": "em",
"size": 1,
"sizes": []
},
"typography_letter_spacing": {
"unit": "px",
"size": 0,
"sizes": []
},
"_z_index": 1,
"align_tablet": "center",
"typography_font_size_tablet": {
"unit": "px",
"size": 55,
"sizes": []
},
"typography_font_size_mobile": {
"unit": "px",
"size": 40,
"sizes": []
}
},
"widgetType": "heading",
"parentElementId": "600c1786",
"innerElementIds": []
}
]
}
}
}Modifier et stocker les données Elementor
Itérez les éléments dans le JSON produit par elementorFlattenedDataItems, modifiez-les selon les besoins, et stockez le JSON modifié dans le meta du post, via la mutation elementorMergeCustomPostElementDataItem.
Dans cette requête, nous filtrons les éléments par nom, et exportons les headings modifiés (sous la variable dynamique $modifiedElementorHeadings) ainsi que leurs IDs (sous la variable dynamique $modifiedElementorHeadingIDs) :
query GetAndModifyElementorData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on ElementorMaybeEnabledForCustomPostType {
elementorFlattenedDataItems(filterBy: {include: ["heading"]})
@underEachArrayItem(affectDirectivesUnderPos: [1, 3])
@underJSONObjectProperty(by: { key: "id" })
@export(as: "modifiedElementorHeadingIDs")
@underJSONObjectProperty(
by: { path: "settings.title" }
failIfNonExistingKeyOrPath: false
affectDirectivesUnderPos: [1, 2]
)
@strUpperCase
@export(as: "modifiedElementorHeadings")
}
}
}Ensuite, utilisez la mutation elementorMergeCustomPostElementDataItem pour fusionner ces entrées dans le JSON meta du post.
Pour ce faire, vous devez d'abord générer l'input à injecter dans la mutation, sous forme de tableau avec l'ID et les paramètres de chaque élément modifié :
query GenerateElementorMergeDataItemInputs
@depends(on: "GetAndModifyElementorData")
{
elementorMergeDataItemInputs: _echo(value: $modifiedElementorHeadingIDs)
@underEachArrayItem(
passIndexOnwardsAs: "index",
passValueOnwardsAs: "id"
affectDirectivesUnderPos: [1, 2]
)
@applyField(
name: "_arrayItem",
arguments: {
array: $modifiedElementorHeadings,
position: $index
},
passOnwardsAs: "heading"
)
@applyField(
name: "_echo",
arguments: {
value: {
id: $id,
settings: {
title: $heading
}
}
}
setResultInResponse: true
)
@export(as: "elementorMergeDataItemInputs")
}
mutation StoreElementorData($customPostId: ID!)
@depends(on: "GenerateElementorMergeDataItemInputs")
{
elementorMergeCustomPostElementDataItem(input: {
customPostID: $customPostId
elements: $elementorMergeDataItemInputs
}) {
status
errors {
__typename
...on ErrorPayload {
message
}
}
customPost {
__typename
...on CustomPost {
id
elementorFlattenedDataItems
}
}
}
}Prev
Next