Section Template

Section templates are reusable page section components in Garchi CMS. They act as blueprints for sections on your pages.

To use a section template in your site, you need to have the corresponding component in your codebase. For example, a "Hero" template in Garchi CMS should have a <Hero /> (Hero.jsx) component in your React app or a "Card" template in Garchi CMS should have a <Card /> (Card.vue) component in your Vue app.

To create a Section template

1. Go to Headless Web ---> Section Templates in the dashboard sidebar.
2. Click the "Add new template" button.
3. Give the template a name that matches your component name.
4. (Optional) Add a description for your own reference.
5. Click Save Changes

You can edit the template by clicking on the cog/settings icon next to the respective template.

To delete a template click on the Thrash icon.

Adding Template Props

Props allow you to pass dynamic data to your section templates.

To add props to a template:

1. Click "Manage Props" in front of the respective Section Template.
2. Enter a prop name and select the type: text, longtext, richtext, or media (images).
3. Click "Save".

Let's take an example of a React TeamCard component which has image, title and name

// TeamCard.jsx
function TeamCard({image, title, name})
{
    return (
    <div className="your_css_classes">
        <img src={image} alt={name} />
        <h2>{name}</h2>
        <p>{title}</p>
    </div>
    )
}

We also need to create the Section template named TeamCard through Garchi dashboard. After the section template is created through the dashboard, we need to add image, title and name as props.

After creating a "TeamCard" template, you can add those props value on the respective page through the dashboard so they can be populated dynamically.

For now the media type supports images only. You can manage the images by clicking on Headless Web -> Assets.

Managing Section Templates via API

Utilize the section_template API to efficiently create or update Section Templates. This API requires a space_uid and a section_templates array, representing the component tree structure. Automating the creation of section templates through this API is more streamlined than the manual bulk operations available via the dashboard.

The section_templates array facilitates the synchronization of the component tree within the specified space, allowing for the addition, update, or deletion of templates as necessary.

Example usage

Important: This method is recommended for development environments only.

Structure of components.json:

[
    {
        "name": "Header",
        "description": "A header section",
        "props": [
            {
                "key": "title",
                "type": "text"
            },
            {
                "key": "subtitle",
                "type": "text"
            }
        ]
    },
    {
        "name": "InputField",
        "prev_name": "FormField", //in case if updating an existing template
        "description": "A input field section",
        "props": [
            {
                "key": "label",
                "type": "text"
            },
            {
                "key": "placeholder",
                "type": "text"
            },
            {
                "key": "type",
                "type": "select",
                "allowed_values": "text,email,password"
            }
        ]
    }
]

Sending a Request Using Node.js:

const components = require('./components.json')



fetch("https://garchi.co.uk/api/v2/section_template", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json",
    "Authorization": "Bearer your_api_key",
  },
  body: JSON.stringify({
    "section_templates": components,
    "space_uid": "respective_space_uid"
  })
}).then(res => {
  if (res.ok) {
    return res.json()
  } else {
    return Promise.reject(res)
  }
})
.then(data => console.log(data))
.catch(err=> console.log(err))

Execution: Run this script as a one-off operation or continuously in development using tools like nodemon

node script.js

This approach ensures your Section Templates are seamlessly integrated and managed through your API, simplifying development workflows.