zeluizr / disposition-layout

Order and show/hide blocks/components by dragging them on the site editor's interface

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

DISPOSITION LAYOUT - 1.x

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

Configuration

1. Add vtex.disposition-layout 1.x as a theme dependency in the manifest.json file
2. Declare your orderable components as children of disposition-layout
3. Add, as prop, an array of objects with the numerical assigment of the given components; always start from 1
4. Controlling the visibility is done via site editor, inside each item of the array list

disposition-layout props

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

Modus Operandi

A good implementantion is to declare the array length and numerical values corresponding to the length and order of the children array.

⚠️ Always use an ascending pattern starting from 1, as this array is correlated with the indices of the children

"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.

Customization

No CSS Handles are available yet for the app customization.

Contributors ✨

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind are welcome!