Extend 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 access it, open your Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., click Developer, then Schemas, and click the download button on the Page folder configuration line.

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.

Then you need to upload this schema to 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`., by going to Developer, clicking Schemas, and then clicking the upload icon where it says Page folder 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 information in a Frontastic component

In order to access the information of the current page folder in 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., you'll need to get the page folder injected using the tastify higher-order-component (see the Tastify article for more information):

export default tastify({
    connect: {
        node: true,
    }
})(NodeDataExampleTastic)

This will give a new prop of node to your 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. which contains the full representation of the page folder. If you don't have fields that require default completion in your page folder schema, you can now access the values provided from Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. through the field name in node.configuration. For example, the SEO keywords can be accessed using:

const NodeDataExampleTastic = ({ node }) => {
    return (<div>{node.configuration.seoKeywords || 'no keywords specified'}</div>)
}

Remember that field data can always be empty and you should implement your code around this in a defensive way.

Completing default values

If you have fields with default values configured in the page folder schema, you can use the ConfigurationSchema class to access the completed field information:

import { ConfigurationSchema, DefaultSchemas } from '@frontastic/common'

import customPageFolderSchema from '…/nodeConfiguration.json'

const NodeDataExampleTastic = ({ node }) => {
    const schema = new ConfigurationSchema(
        customPageFolderSchema.schema,
        node.configuration
    )

    return (<div>{schema.get('seoKeywords')}</div>)
}

Note that you can also use DefaultSchemas.nodeSchema for the default page folder schema.


Did this page help you?