A Magento 2 module that exposes structured data of PageBuilder content
To get structured PageBuilder data via GraphQL:
- Open a product in the Magento Admin and create PageBuilder content for the description field and save the product.
- Add the following field to the
productsquery:
pagebuilder {
id
name
children
}The items field return a list of nodes which can be expanded per content-type to include data specific to that content-type.
| Name | Type | Description |
|---|---|---|
| id | ID | 7-digit alphanumeric identifier |
| name | String | type of the content-type, eg. row or text |
| data | String | json-encoded content-type data |
| appearance | String | selection on how the content-type should be rendered, eg. default, contained, etc. |
| children | [ID!]! | List id child content-types that are contained by the current content-type |
The following contains type conditions for the PageBuilderDefaultContentType and PageBuilderHeading content-types.
pagebuilder {
id
name
appearance
children
... on PageBuilderProductList {
products {
sku
type_id
image {
disabled
}
__typename
name
}
}
... on PageBuilderHeading {
heading_text
heading_type
}
}So the query for a product with the sku: "CONF-NO-SWATCHES" reads:
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
children
... on PageBuilderProductList {
products {
sku
type_id
image {
disabled
}
__typename
name
}
}
... on PageBuilderHeading {
heading_text
heading_type
}
}
}
}
}Which would result in:
{
"data": {
"products": {
"items": [
{
"sku": "CONF-NO-SWATCHES",
"pagebuilder": [
{
"id": "PB5M3RB",
"name": "heading",
"children": [],
"heading_text": "Header 1",
"heading_type": "h2"
},
{
"id": "Y1G3MAV",
"name": "products",
"children": [],
"products": [
{
"sku": "text-area-option-test",
"type_id": "simple",
"image": {
"disabled": null
},
"__typename": "SimpleProduct",
"name": "Text Area Option Test"
},
{
"sku": "GC-1048-SOCK",
"type_id": "configurable",
"image": {
"disabled": null
},
"__typename": "ConfigurableProduct",
"name": "Ages at Fashion"
},
{
"sku": "GC-906-SOCK",
"type_id": "configurable",
"image": {
"disabled": null
},
"__typename": "ConfigurableProduct",
"name": "Oro Jellies"
},
{
"sku": "GC-890-SOCK",
"type_id": "configurable",
"image": {
"disabled": null
},
"__typename": "ConfigurableProduct",
"name": "Anxious Tattle Tale"
},
{
"sku": "GC-709-SOCK",
"type_id": "configurable",
"image": {
"disabled": null
},
"__typename": "ConfigurableProduct",
"name": "Part-Time Bridesmaid"
}
]
},
{
"id": "K4C5UFA",
"name": "row",
"children": [
"PB5M3RB",
"Y1G3MAV"
]
}
]
}
]
}
}
}Likewise, add a pagebuilder field to the queries for other PageBuilder enabled entities:
Categories:
query {
category(id: 145) {
id
level
name
pagebuilder {
id
name
... on PageBuilderProductList {
products {
sku
type_id
image {
disabled
}
__typename
name
}
}
... on PageBuilderHeading {
heading_text
heading_type
}
}
}
}CMS Pages:
query {
cmsPage(identifier: "my-page") {
identifier
url_key
pagebuilder {
id
name
... on PageBuilderProductList {
products {
sku
type_id
image {
disabled
}
__typename
name
}
}
... on PageBuilderHeading {
heading_text
heading_type
}
}
}
}CMS Blocks:
query {
cmsBlocks(identifiers: "my-block") {
items {
identifier
title
content
pagebuilder {
id
name
... on PageBuilderProductList {
products {
sku
type_id
image {
disabled
}
__typename
name
}
}
... on PageBuilderHeading {
heading_text
heading_type
}
}
}
}
}To query PageBuilder data for used-defined PageBuilder product-attributes, first add the custom product-attribute using the Magento Admin or data-patches. Make sure the attribute is of the PageBuilder-type and add it to the required product attribute-set(s).
Once configured, the PageBuilder data authored for the product with sku CONF-NO-SWATCHES using the custom PageBuilder product-attribute extra_pagebuilder can be queried like:
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
extra_pagebuilder {
id
name
... on PageBuilderProductList {
products {
sku
type_id
image {
disabled
}
__typename
name
}
}
... on PageBuilderHeading {
heading_text
heading_type
}
}
}
}
}The PageBuilderRow content-type represents the row-container which holds other content-types.
| Name | Type |
|---|---|
| min_height | String |
| justify_content | String |
| enable_parallax | String |
| parallax_speed | Float |
- PageBuilderContentTypeInterface
- PageBuilderAdvancedConfigInterface
- PageBuilderBackgroundInterface
- PageBuilderBackgroundVideoInterface
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderRow {
data
min_height
justify_content
enable_parallax
parallax_speed
background {
background_attachment
background_image {
url
name
}
}
background_video {
video_source
video_overlay_color
video_loop
video_lazy_load
video_play_only_visible
video_fallback_image {
url
}
}
}
}
}
}
}The PageBuilderColumn content-type represents a single column that is created when columns are added.
| Name | Type |
|---|---|
| min_height | String |
| justify_content | String |
| width | String |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderColumn {
min_height
justify_content
width
background {
background_color
background_image {
name
type
url
}
mobile_image {
name
type
url
}
background_size
background_position
background_attachment
background_repeat
}
}
}
}
}
}The PageBuilderColumnGroup content-type represents a single column that is created when columns are added.
| Name | Type |
|---|---|
| grid_size | String |
| min_height | String |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderColumnGroup {
grid_size
min_height
background {
background_color
background_image {
name
type
url
}
mobile_image {
name
type
url
}
background_size
background_position
background_attachment
background_repeat
}
}
}
}
}
}The PageBuilderTabs content-type represents a collection of PageBuilderTabItem content-types
| Name | Type |
|---|---|
| default_active | Int |
| min_height | String |
| navigation_alignment | String |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderTabs {
default_active
min_height
navigation_alignment
}
}
}
}
}The PageBuilderTabItem content-type represents a single tab within a PageBuilderTabs content-type.
| Name | Type |
|---|---|
| tab_name | String |
| min_height | String |
| justify_content | String |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderTabItem {
tab_name
min_height
justify_content
background {
background_color
background_image {
name
type
url
}
mobile_image {
name
type
url
}
background_size
background_position
background_attachment
background_repeat
}
advanced {
text_align
border
border_color
border_width
border_radius
css_classes
display
margins_and_padding {
margin {
top
right
bottom
left
}
}
}
}
}
}
}
}The PageBuilderText content-type represents a single text element.
| Name | Type |
|---|---|
| content | String |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderText {
content
advanced {
text_align
border
border_color
border_width
border_radius
css_classes
display
margins_and_padding {
margin {
top
right
bottom
left
}
}
}
}
}
}
}
}The PageBuilderHeading content-type represents a h1-6 html tag.
| Name | Type |
|---|---|
| heading_type | String |
| heading_text | String |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderHeading {
heading_text
heading_type
}
}
}
}
}The PageBuilderButtonsList content-type represents a container of PageBuilderButtonItem content-types.
| Name | Type |
|---|---|
| is_same_width | Boolean |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderButtonsList {
is_same_width
advanced {
text_align
border
border_color
border_width
border_radius
css_classes
margins_and_padding {
margin {
top
right
bottom
left
}
}
}
}
}
}
}
}A PageBuilderButtonItem content-type represents a single button.
| Name | Type |
|---|---|
| button_text | String |
| button_type | String |
| button_link | PageBuilderDefaultLink |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderButtonItem {
button_type
button_text
button_link {
open_in_new_tab
link_type
url
entity_url {
relative_url
redirect_code
type
}
}
advanced {
border_color
}
}
}
}
}
}The PageBuilderDivider content-type represents a horizontal divider
| Name | Type |
|---|---|
| line_color | String |
| line_thickness | Int |
| line_width | String |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderDivider {
line_color
line_thickness
line_width
advanced {
text_align
border
border_color
border_width
border_radius
css_classes
margins_and_padding {
margin {
top
right
bottom
left
}
padding {
top
right
bottom
left
}
}
}
}
}
}
}
}The PageBuilderHtml content-type represents a content-type containing raw html.
| Name | Type |
|---|---|
| html | String |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderHtml {
html
advanced {
text_align
border
border_color
border_width
border_radius
css_classes
margins_and_padding {
margin {
top
right
bottom
left
}
padding {
top
right
bottom
left
}
}
}
}
}
}
}
}The PageBuilderImage content-type represents a single image.
| Name | Type |
|---|---|
| image | PageBuilderUploadedImage |
| mobile_image | PageBuilderUploadedImage |
| link_url | PageBuilderDefaultLink |
| image_caption | String |
| alt | String |
| title_attribute | String |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderImage {
image {
name
url
}
image_caption
alt
title_attribute
mobile_image {
name
url
}
link_url {
open_in_new_tab
link_type
url
entity_url {
relative_url
redirect_code
type
}
}
}
}
}
}
}The PageBuilderVideo content-type represents a single video.
| Name | Type |
|---|---|
| video_source | String |
| max_width | Int |
| autoplay | Boolean |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderVideo {
video_source
max_width
autoplay
advanced {
text_align
border
border_color
border_width
border_radius
css_classes
margins_and_padding {
margin {
top
right
bottom
left
}
}
}
}
}
}
}
}The PageBuilderProductList content-type represents the Products content-type
| Name | Type |
|---|---|
| products | [ProductInterface] |
| carousel_config | PageBuilderCarouselConfig |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderProductList {
carousel_config {
autoplay
}
products {
sku
type_id
__typename
name
}
}
}
}
}
}The PageBuilderBanner content-type represents single banner
| Name | Type |
|---|---|
| min_height | String |
| content | String |
| link_url | PageBuilderDefaultLink |
| show_button | PageBuilderShowButtonEnum |
| button_text | String |
| button_type | String |
| show_overlay | PageBuilderShowButtonEnum |
| overlay_color | String |
| alt | String |
| title_attribute | String |
- PageBuilderContentTypeInterface
- PageBuilderAdvancedConfigInterface
- PageBuilderBackgroundInterface
- PageBuilderBackgroundVideoInterface
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderBanner {
min_height
content
show_button
link_url {
open_in_new_tab
link_type
url
entity_url {
relative_url
redirect_code
type
}
}
show_button
button_type
show_overlay
overlay_color
alt
title_attribute
}
}
}
}
}The PageBuilderSlider content-type represents a Slider container, containing 1 or more PageBuilderSlider content-types.
| Name | Type |
|---|---|
| min_height | String |
| autoplay | Boolean |
| autoplay_speed | Int |
| fade | Boolean |
| is_infinite | Boolean |
| show_arrows | Boolean |
| show_dots | Boolean |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderSlider {
min_height
autoplay
autoplay_speed
fade
is_infinite
show_arrows
show_dots
advanced {
margins_and_padding {
margin {
top
}
padding {
top
right
}
}
}
}
}
}
}
}The PageBuilderSlide content-type represents a single slide in the PageBuilderSlider content-type.
| Name | Type |
|---|---|
| slide_name | String |
| min_height | String |
| content | String |
| link_url | PageBuilderDefaultLink |
| show_button | PageBuilderShowButtonEnum |
| button_text | String |
| button_type | String |
| show_overlay | PageBuilderShowButtonEnum |
| overlay_color | String |
| alt | String |
| title_attribute | String |
- PageBuilderContentTypeInterface
- PageBuilderAdvancedConfigInterface
- PageBuilderBackgroundInterface
- PageBuilderBackgroundVideoInterface
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderSlide {
slide_name
min_height
content
link_url {
open_in_new_tab
link_type
url
entity_url {
relative_url
redirect_code
type
}
}
show_button
button_text
button_type
show_overlay
alt
title_attribute
background_video {
video_source
}
background {
background_image {
url
}
background_size
}
advanced {
margins_and_padding {
margin {
top
}
padding {
top
right
}
}
}
}
}
}
}
}The PageBuilderMap content-type represents the Map content-type
| Name | Type |
|---|---|
| height | Int |
| show_controls | Boolean |
| locations | [PageBuilderMapLocation] |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderMap {
height
show_controls
locations {
location_name
address
phone
comment
position {
latitude
longitude
}
}
}
}
}
}
}The PageBuilderStaticBlock content-type represents the Dynamic Block content-type
| Name | Type |
|---|---|
| html | String |
query products($pageSize: Int, $currentPage: Int) {
products(
filter: { sku: { eq: "CONF-NO-SWATCHES" } }
pageSize: $pageSize
currentPage: $currentPage
) {
items {
sku
pagebuilder {
id
name
... on PageBuilderStaticBlock {
html
}
}
}
}
}These types represent a group of fields that are grouped logically, but do not represent a content-type.
type PageBuilderTopRightBottomLeft {
top: Int
right: Int
bottom: Int
left: Int
}type PageBuilderMarginAndPadding {
margin: PageBuilderTopRightBottomLeft
padding: PageBuilderTopRightBottomLeft
}type PageBuilderAdvancedConfig {
text_align: String
border: String
border_color: String
border_width: Int
border_radius: Int
css_classes: String
margins_and_padding: PageBuilderMarginAndPadding
display: Boolean
}type PageBuilderDefaultLink {
open_in_new_tab: Boolean
link_type: String!
url: String
entity_url: RoutableInterface
}type PageBuilderUploadedImage {
name: String
type: String
url: PageBuilderDefaultLink
}type PageBuilderBackground {
background_color: String
background_image: PageBuilderUploadedImage
mobile_image: PageBuilderUploadedImage
background_size: String
background_position: String
background_attachment: String
background_repeat: String
}type PageBuilderBackgroundVideo {
video_source: String
video_overlay_color: String
video_loop: Boolean
video_lazy_load: Boolean
video_play_only_visible: Boolean
video_fallback_image: PageBuilderUploadedImage
}type PageBuilderMapLocationPosition {
latitude: Float
longitude: Float
}type PageBuilderMapLocation {
comment: String
location_name: String
position: PageBuilderMapLocationPosition
phone: String
address: String
city: String
state: String
zipcode: String
country: String
}enum PageBuilderShowButtonEnum {
ALWAYS
HOVER
NEVER
}The PageBuilderContentTypeInterface interface represents a content-type and should be implemented by all GraphQL types that represent a PageBuilder content-type.
interface PageBuilderContentTypeInterface
id: ID!
name: String!
data: String
viewportsData: String
}The PageBuilderCarouselConfig interface represents the configuration for PageBuilderProductList regarding the way products should be rendered in a carousel.
type PageBuilderCarouselConfig {
carousel_mode: String
autoplay: Boolean
autoplay_speed: Int
carousel_products_count: Int
is_infinite: Boolean
show_arrows: Boolean
show_dots: Boolean
}The PageBuilderAdvancedConfigInterface interface represents the configuration of that is shared between most content-types. This configuration consists of padding, margin, css-classes etc.
When opening the configuration modal for a content-type, these settings are listed under: Advanced
interface PageBuilderAdvancedConfigInterface
advanced: PageBuilderAdvancedConfig
}The PageBuilderBackgroundInterface interface represents the configuration regarding background image.
interface PageBuilderBackgroundInterface
background: PageBuilderBackground
}The PageBuilderBackgroundVideoInterface interface represents the configuration regarding background video.
interface PageBuilderBackgroundVideoInterface {
background_video: PageBuilderBackgroundVideo
}