📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.
A layout capable of ordering sections/blocks/components by dragging them on the site editor's interface, and choosing which of them are visible.
✅ SEO-FRIENDLY
- Add
vtex.disposition-layout
1.x as a theme dependency in themanifest.json
file - Declare your orderable components as children of
disposition-layout
- Add, as prop, an array of objects with the numerical assigment of the given components; always start from
1
- Controlling the visibility is done via site editor, inside each item of the array list
Prop name | Type | Description | Default value |
---|---|---|---|
disposition |
array |
An array of objects describing, with integers, the numerical asigment and order | undefined |
disposition
array:
Prop name | Type | Description | Default value |
---|---|---|---|
order |
number |
The numerical assigment for each children | undefined |
A good implementantion is to declare the array length and numerical values corresponding to the length and order of the children array.
"disposition-layout": {
"children": [
"flex-layout.row#one",
"info-card#example",
"flex-layout.row#two"
],
"props": {
"disposition": [
{
"order": 1
},
{
"order": 2
},
{
"order": 3
}
]
}
},
Per example,
- 1 -> "flex-layout.row#one"
- 2 -> "info-card#example"
- 3 -> "flex-layout.row#two"
If by mistake you delete an item from the list, in site editor, remember that you can go to configuration
and restore the original theme settings.
No CSS Handles are available yet for the app customization.
Thanks goes to these wonderful people:
This project follows the all-contributors specification. Contributions of any kind are welcome!