Basically, you need to access your GitHub repository and find the file template/public/admin/config.json.
If you only want to insert a section on a single page, you can simply follow this link: https://gist.github.com/matheusgnreis/27b4c5eda995a13f663c824e91cc790c.
However, if you want to combine your new sections with other sections from your website and/or add new collections, you will need to perform some additional steps, which may be a little complex. I will provide an example below and then explain each line to you.
From the default template, you can find where all the CMS sections are defined by visiting this link: https://github.com/ecomplus/storefront/tree/master/%40ecomplus/storefront-template/template/js/netlify-cms/base-config.
To achieve the same, you can create a "#netlify-cms" folder. Inside that folder, create another folder called "#base-config" and add the necessary files, similar to the default template. One of the files is "sections.js" (optional), which is the same as the one found here: https://github.com/ecomplus/storefront/blob/master/%40ecomplus/storefront-template/template/js/netlify-cms/base-config/sections.js. (Alternatively, you can concatenate the existing one or create the sections from the default file and insert your new sections inside "sections.js", then import it into your "index.js".)
The other file is "index.js", which will combine the sections and new folders. It is similar to the file found here: https://github.com/ecomplus/storefront/blob/master/%40ecomplus/storefront-template/template/js/netlify-cms/base-config/index.js. Lastly, you need to create a "collections" folder that contains your new collections.
import getSections from '@ecomplus/storefront-template/template/js/netlify-cms/base-config/sections'
import getSettings from '@ecomplus/storefront-template/template/js/netlify-cms/base-config/collections/settings'
import getLayout from '@ecomplus/storefront-template/template/js/netlify-cms/base-config/collections/layout'
import getPages from '@ecomplus/storefront-template/template/js/netlify-cms/base-config/collections/pages'
import getBlogPosts from '@ecomplus/storefront-template/template/js/netlify-cms/base-config/collections/blog-posts'
import getExtraPages from '@ecomplus/storefront-template/template/js/netlify-cms/base-config/collections/extra-pages'
import getWidgets from '@ecomplus/storefront-template/template/js/netlify-cms/base-config/collections/widgets'
These commands simply import the current configuration from the default template.
Next, you need to import your new collections. You can do this by following these steps:
import getCustomCollection from './collections/custom-collection'
import getCustomConfig from './collections/custom-config'
And then, bring all things together:
export default options => {
options.sections = getSections(options).concat([
{
"label": "Código HTML Famosos",
"name": "famous",
"widget": "object",
"fields": [
{
"label": "Conteúdo HTML customizado Famosos",
"name": "html",
"widget": "code",
"default_language": "html",
"output_code_only": true
}
]
},
{
"label": "Código HTML Falam",
"name": "speaking",
"widget": "object",
"fields": [
{
"label": "Conteúdo HTML customizado Falam",
"name": "html",
"widget": "code",
"default_language": "html",
"output_code_only": true
}
]
},
{
"label": "Código HTML Resultados",
"name": "results",
"widget": "object",
"fields": [
{
"label": "Conteúdo HTML customizado resultados",
"name": "html",
"widget": "code",
"default_language": "html",
"output_code_only": true
}
]
},
{
"label": "Código HTML Comprar now",
"name": "buy-now",
"widget": "object",
"fields": [
{
"label": "Conteúdo HTML customizado Comprar now",
"name": "html",
"widget": "code",
"default_language": "html",
"output_code_only": true
}
]
},
{
"label": "Grid de influencers",
"name": "carousel-influencers",
"widget": "object",
"fields": [
{
"label": "Banners",
"name": "banners",
"widget": "list",
"fields": [
{
"label": "Imagem",
"name": "img",
"widget": "image"
},
{
"label": "Link",
"required": false,
"name": "link",
"widget": "string"
},
{
"label": "Alt",
"required": false,
"name": "alt",
"widget": "string"
}
]
},
{
"label": "Carousel autoplay",
"required": false,
"name": "autoplay",
"hint": "Exibição de cada página em milisegundos, 0 desativa o autoplay",
"min": 0,
"step": 1000,
"widget": "number"
}
]
},
{
"label": "Grid de avaliações",
"name": "grid-review",
"widget": "object",
"fields": [
{
"label": "Banners",
"name": "banners",
"widget": "list",
"fields": [
{
"label": "Imagem",
"name": "img",
"widget": "image"
},
{
"label": "Link",
"required": false,
"name": "link",
"widget": "string"
},
{
"label": "Alt",
"required": false,
"name": "alt",
"widget": "string"
}
]
},
{
"label": "Carousel autoplay",
"required": false,
"name": "autoplay",
"hint": "Exibição de cada página em milisegundos, 0 desativa o autoplay",
"min": 0,
"step": 1000,
"widget": "number"
},
{
"label": "Conteúdo HTML para título",
"name": "html",
"widget": "code",
"default_language": "html",
"output_code_only": true
}
]
}
])
return {
backend: {
name: 'git-gateway',
branch: 'master',
commit_messages: {
create: 'Create {{collection}} “{{slug}}”',
update: 'Update {{collection}} “{{slug}}”',
delete: 'Delete {{collection}} “{{slug}}”',
uploadMedia: 'Upload “{{path}}”',
deleteMedia: '[skip ci] Delete “{{path}}”',
openAuthoring: '{{message}}'
}
},
logo_url: 'https://ecom.nyc3.digitaloceanspaces.com/storefront/cms.png',
locale: 'pt',
load_config_file: Boolean(window.CMS_LOAD_CONFIG_FILE),
media_folder: `${options.baseDir}template/public/img/uploads`,
public_folder: '/img/uploads',
slug: {
encoding: 'ascii',
clean_accents: true,
sanitize_replacement: '-'
},
collections: [
getSettings(options),
getLayout(options),
getPages(options),
getBlogPosts(options),
getCustomCollection(options),
getCustomConfig(options),
getExtraPages(options),
getWidgets(options)
]
}
}
#Important: The name of the widget needs to be the same as the name of the section created in template/pages/@/sections/. When they have the same name, they establish a connection for usage.
#Example of collection:
export default ({ baseDir, sections }) => ({
name: 'custom-collection',
label: 'Custom Collection',
folder: `${baseDir}content/custom`,
extension: 'json',
create: true,
slug: '{{slug}}',
fields: [
{
label: 'Produto',
name: 'title',
widget: 'string'
},
{
label: 'Imagem em Destaque',
name: 'imagem',
widget: 'image'
},
{
label: 'Característica dos produtos',
name: 'carac-produto',
widget: 'string'
},
{
label: 'Itens relacionados',
name: 'relac-itens',
widget: 'markdown'
},
{
label: 'Seções',
name: 'sections',
required: false,
hint: 'Por padrão o layout será composto por breadcrumbs, título e corpo do post',
widget: 'list',
types: [
{
label: 'Corpo do post',
name: 'blog-post',
widget: 'object',
fields: [
{
label: 'Exibir conteúdo do post',
name: 'enabled',
widget: 'boolean',
default: true
}
]
}
].concat(sections)
}
]
})