First is adding a functionality in to an existence file. Go to a file that you gonna edit, just like footer.json. Add your propertie or array or object, just like:
"stores": {
"list": [
{
"title": "Title",
"text": "Description"
},
{
"title": "Title",
"text": "Description"
}
]
}
Then, treat this part of json in your code. In this case, will be in footer.ejs, just like:
<% footer.stores.list.forEach(({ title, text }) => { %>
<div class="col">
<strong><%- title %></strong>
<p><%- text %></p>
</div>
<% }) %>
If you do this, your code is already working. But, for your user, will be horrible. Because every time he needs to edit it, he will be changing JSON. Our client, do not know how to edit JSON in most of cases.
So we have to insert one more configuration informing some properties with his type respectively, the system will know and render the exact input for that field.
Examples:
-
Your client need to insert a title or a link or a text:
"widget": "string" -
Your client need to insert an image:
"widget": "image" -
Your client need to insert an html or css or js:
"widget": "code", "default_language": "html" -
Your client need to insert a number of seconds to autoplay or a number of elements of products on collection:
"widget": "number"
If you have one or more fields, your widget will be a list or an object or can be both
An example of a list is to receive an array of elements with link, image and target.
An example of object is to receive additional or more than one propertie, just like insert a code. We have additional propertie "default_language": "html".
An example with both, we can see below.
You just need to add this configuration on path /template/public/admin/config.json with propertie "collections". To do that, we have to pass through all the same path of footer and add a new field with the properties that we use on footer.json, just like:
"collections": [
{
"label" : "Moara",
"name": "moara",
"files": [
{
"label": "Layout",
"name": "layout",
"delete": false,
"description": "Layout base todas as páginas",
"files": [
{},
{},
{
"file": "content/footer.json",
"label": "Rodapé",
"name": "footer",
"fields": [
{
"label": "Lojas",
"name": "stores",
"widget": "object",
"fields": [
{
"label": "Listas de lojas",
"name": "list",
"widget": "list",
"fields": [
{
"label": "Nome da loja",
"name": "title",
"widget": "string"
},
{
"label": "Texto da loja",
"name": "text",
"widget": "string"
}
]
}
]
}
]
}
]
}
]
To test if configuration goes well, you can run locally then go to /admin/ and saw console log. If its okay, will appear the new configuration at the existance collection.