Skip to content

vtex-apps/admin-pages

This branch is up to date with master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ffbb7ce · Feb 4, 2025
Mar 12, 2020
Jul 15, 2024
Sep 9, 2019
Jan 6, 2025
Jun 27, 2019
Feb 4, 2025
Feb 2, 2018
Aug 27, 2019
Aug 27, 2019
Jul 26, 2022
Feb 4, 2025
Apr 28, 2021
Feb 4, 2025
Mar 10, 2020
Aug 27, 2019

Repository files navigation

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

Build Status

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:

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.

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