Extending the page folder schema

If you need to be able to set configurations for URLs, not just page folders, you can integrate an additional API to do that but you can also extend your page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. schema within Frontastic to have an extra field or section that can be edited in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

To do this, you'll need to open the nodeConfiguration.json for your project and add in the field that you'd like.

To do this, follow the steps below.

  1. Open the Developer area, then click Schemas
  1. Click the download icon on the project schema line, then open the file

You'll notice that the page folder configuration doesn't include the general settings or data source section in this configuration file, this is because these should never be edited or removed.

  1. Add what you'd like to be editable in your schema

Let's look at a cut-down example of the schema. Say we want to add a new field for SEO Keywords, we'd put it in like the below:

{
    "schema": [
        {
            "name": "Display Properties",
            "fields": [...
            ]
        },
        {
            "name": "SEO",
            "fields": [
                {
                    "label": "Title",
                    "field": "seoTitle",
                    "type": "string",
                    "translatable": true
                },
                {
                    "label": "Description",
                    "field": "seoDescription",
                    "type": "string",
                    "translatable": true
                },
                {
                    "label": "Keywords",
                    "field": "seoKeywords",
                    "type": "string",
                    "translatable": true
                }
            ]
        }
    ]
}

Be sure to keep in all the previous fields to ensure Backwards Compatibility.

  1. Click the upload icon on the project and select your updated schema

Once uploaded, go to a page folderpage folder - A way of structuring the pages within a project and forms the URL structure – they can contain sub-folders. Known as `node` in code. within the site buildersite builder - An interface that you work with to build your commerce site. Previously known as `stage`., and input the data you want within your new field.

Access page folder configuration in a data source

Inside an extensionextension - Data connectors that you add specifically to your project., you can access the page folder configuration in a data sourcedata source - The data provided from an API to display products, content, or anything from an integration or extension. A data source filter is created and can be selected for a Frontastic component that will display the data source filter on your commerce site.. The page folder is passed to the data source in the DataSourceContext:

const seoDataSource = async (config: DataSourceConfiguration, context: DataSourceContext) => {
  return {
    dataSourcePayload: {
      title: context.pageFolder.configuration.seoTitle,
      seoDescription: context.pageFolder.configuration.seoDescription,
      seoKeywords: context.pageFolder.configuration.seoKeywords,
    },
  };
};

Access page folder configuration in a Frontastic component

Inside a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., the pageFolder is passed as a prop. The page folder configuration can be accessed from there:

function SeoTastic({ data, pageFolder }) {
  return (
    <div>
      <h1>{pageFolder.configuration.seoTitle}</h1>
      <p>{pageFolder.configuration.seoDescription}</p>
      <p>{pageFolder.configuration.seoKeywords}</p>
    </div>
  );
}

Did this page help you?