Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
VTEX Pages Admin
Official extension
Version: 4.54.0
Latest version: 4.54.0

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

{"base64":"  ","img":{"width":98,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":730,"url":"https://api.travis-ci.com/vtex-apps/pages-editor.svg?branch=master"}}

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:


_11
const schema = {
_11
type: 'object',
_11
title: 'The component title',
_11
properties: {
_11
property1: {
_11
type: 'string'
_11
title: 'Title of the property'
_11
},
_11
...{n* properties}
_11
}
_11
}

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.


_53
import { range, map, clone, indexBy, prop } from 'ramda'
_53
_53
const bannerStructure = {
_53
type: 'object',
_53
title: 'banner',
_53
properties: {
_53
image: {
_53
type: 'string',
_53
title: 'Banner image',
_53
},
_53
page: {
_53
type: 'string',
_53
title: 'Banner link',
_53
},
_53
targetParams: {
_53
type: 'object',
_53
title: 'Banner target params',
_53
properties: {
_53
params: {
_53
type: 'string',
_53
title: 'Params',
_53
},
_53
},
_53
},
_53
},
_53
}
_53
_53
static getSchema = ({numberOfBanners}) => {
_53
// Do a for loop replicating the banner structure, to create n* banners
_53
const getRepeatedProperties = (repetition) => indexBy(prop('title'), map((index) => {
_53
const property = clone(bannerStructure)
_53
property.title = `$\{property.title\}$\{index\}`
_53
return property
_53
}, range(1, repetition+1)))
_53
_53
// Call's the function if the numberOfBanners its passed
_53
const generatedSchema = numberOfBanners && getRepeatedProperties(numberOfBanners)
_53
_53
/**
_53
* Returns a schema embedding the generated properties and the static property needed
_53
* to type the number of banners wanted.
_53
*/
_53
return {
_53
type: 'object',
_53
properties: {
_53
numberOfBanners: {
_53
type: 'number',
_53
title: 'Number of banners'
_53
},
_53
...generatedSchema
_53
}
_53
}
_53
}

Custom Content Pages

See docs

See also
VTEX App Store
VTEX IO Apps
CONTENT_PAGE
VTEX IO Apps