Werken metElementor
Elementor
Je kunt de Elementor-data van een bericht bewerken en naar wens bijwerken door de Elementor JSON-meta van dat bericht op te vragen, te doorlopen, te transformeren en op te slaan.
Elementor-data opvragen
Er zijn 2 velden om Elementor-data op te vragen:
elementorDatageeft de JSON terug van alle elementen in het Elementor-berichtelementorFlattenedDataItemsgeeft ook de JSON terug, maar dan afgevlakt tot een array van één niveau
Om Elementor-data te transformeren en bij te werken, gebruiken we elementorFlattenedDataItems, omdat dat het doorlopen van de elementen makkelijker maakt.
Vraag veld elementorFlattenedDataItems op, dat de afgevlakte JSON van alle elementen in het Elementor-bericht retourneert.
query GetElementorData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on ElementorMaybeEnabledForCustomPostType {
elementorFlattenedDataItems
}
}
}Het antwoord ziet er als volgt uit:
{
"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": []
}
]
}
}
}Je kunt elementen ook filteren op naam via de parameter filterBy (die include en exclude accepteert).
Als je deze query uitvoert:
query GetElementorData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on ElementorMaybeEnabledForCustomPostType {
elementorFlattenedDataItems(filterBy: { include: ["heading"] })
}
}
}...krijg je dit antwoord:
{
"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": []
}
]
}
}
}Elementor-data wijzigen en opslaan
Doorloop de elementen in de JSON die door elementorFlattenedDataItems wordt geproduceerd, pas ze naar wens aan en sla de gewijzigde JSON terug op in de berichtmeta via de mutatie elementorMergeCustomPostElementDataItem.
In deze query filteren we de elementen op naam en exporteren we de gewijzigde koppen (onder de dynamische variabele $modifiedElementorHeadings) en ook hun ID's (onder de dynamische variabele $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")
}
}
}Gebruik daarna de mutatie elementorMergeCustomPostElementDataItem om die vermeldingen samen te voegen in de berichtmeta-JSON.
Hiervoor moet je eerst de invoer genereren die in de mutatie wordt geïnjecteerd, als een array met het ID en de instellingen van elk gewijzigd element:
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