https://github.com/vtex-apps/admin-pages
The VTEX Pages CMS Admin
https://github.com/vtex-apps/admin-pages
hacktoberfest srv-cms vtex-io xp-developer
Last synced: 3 months ago
JSON representation
The VTEX Pages CMS Admin
- Host: GitHub
- URL: https://github.com/vtex-apps/admin-pages
- Owner: vtex-apps
- Created: 2018-02-02T23:24:21.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2025-11-19T19:55:58.000Z (5 months ago)
- Last Synced: 2025-11-19T21:18:53.366Z (5 months ago)
- Topics: hacktoberfest, srv-cms, vtex-io, xp-developer
- Language: TypeScript
- Homepage:
- Size: 6.19 MB
- Stars: 17
- Watchers: 45
- Forks: 13
- Open Issues: 33
-
Metadata Files:
- Readme: docs/README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# VTEX Pages Admin
The Pages Admin is a platform to dynamically edit a VTEX Store, making it possible to select editable components and change its configurations adding or removing content in a straightforward way.
## Continuous Integrations
### Travis CI
[](https://travis-ci.org/vtex-apps/pages-editor)
## How to make your Component editable
The editor supports two ways of defining an editable component, thought a static schema structure or a dynamic function, that receives data and create the schema to be displayed.
### Static Schema
Add to your component an `schema` constant, a JSON object that with the following structure:
```javascript
const schema = {
type: 'object',
title: 'The component title',
properties: {
property1: {
type: 'string'
title: 'Title of the property'
},
...{n* properties}
}
}
```
The property type can be: `String`, `Object` or `Number`, if `Object` it will have the same structure as the parent properties.
### Dynamic Schema
Add to your component a function `getSchema`, that will have the logic to dynamically create the schema need to build your component structure. The Page Editor will call that function each time that the page form has a change to its state, which enables to add and remove fields from the schema, like the example below.
```javascript
import { range, map, clone, indexBy, prop } from 'ramda'
const bannerStructure = {
type: 'object',
title: 'banner',
properties: {
image: {
type: 'string',
title: 'Banner image',
},
page: {
type: 'string',
title: 'Banner link',
},
targetParams: {
type: 'object',
title: 'Banner target params',
properties: {
params: {
type: 'string',
title: 'Params',
},
},
},
},
}
static getSchema = ({numberOfBanners}) => {
// Do a for loop replicating the banner structure, to create n* banners
const getRepeatedProperties = (repetition) => indexBy(prop('title'), map((index) => {
const property = clone(bannerStructure)
property.title = `${property.title}${index}`
return property
}, range(1, repetition+1)))
// Call's the function if the numberOfBanners its passed
const generatedSchema = numberOfBanners && getRepeatedProperties(numberOfBanners)
/**
* Returns a schema embedding the generated properties and the static property needed
* to type the number of banners wanted.
*/
return {
type: 'object',
properties: {
numberOfBanners: {
type: 'number',
title: 'Number of banners'
},
...generatedSchema
}
}
}
```
## Custom Content Pages
See [docs](https://github.com/vtex-apps/admin-pages/blob/master/docs/CONTENT_PAGE.md)