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
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:
_11const 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.
_53import { range, map, clone, indexBy, prop } from 'ramda'_53_53const 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_53static 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