[WIP] CMS & Page builder

[leomp12]

My current opinion about storefront page builder:

We must create a builder to dnd and edit storefront-template components, we can do it with:

• Option 1: Edit CMS config to work such as a layout editor with components dnd (create Netlify CMS widget ?);
• Option 2: Add a separate page builder such as TinaCMS (looks awesome but I'm not sure if it'll work for our case, it's called a toolkit for React-based frameworks);

In addition, each widget should have your own Netlify CMS configuration object with visual options whenever possible, and preferably a proper preview.

[leomp12]

@talissonf precisamos progredir com isto, consegue arrumar um tempo pra me ajudar aqui? O CMS atualmente está muito fraquinho...

[talissonf]

Consigo Leo! Eu to resolvendo uns issues no wirecard e quando terminar foco nisso. Você imaginou alguma coisa pra essa opção? Option 1: Edit CMS config to work such as a layout editor with components dnd (create Netlify CMS widget ?);

[leomp12]

Acho que o primeiro passo é fazer o config funcionar programaticamente com JS (exportando objetos) em vez de carregar um YML, o segundo passo é o setup do preview do template, ainda que básico e incompleto por enquanto.

Depois começamos a fazer os configs/previews de cada widget individualmente, então seriam carregados e adicionados ao objeto final de configuração do CMS (por isto ele teria que ser programático).

Faz sentido?

[talissonf]

Acho que o primeiro passo é fazer o config funcionar programaticamente com JS (exportando objetos) em vez de carregar um YML

https://github.com/ecomclub/storefront-template/pull/84

[leomp12]

Acho que o primeiro passo é fazer o config funcionar programaticamente com JS (exportando objetos) em vez de carregar um YML

84

Certo, dei merge na PR, mas mantive chore porque acho que não está pronto como uma feature, acho que só será uma feature quando este objeto for importável e customizável.

Veja aqui:

https://github.com/ecomclub/storefront/blob/master/template/js/admin.js

No storefront o admin.js é importado do template, seria bom se fosse possível customizar o objeto de configuração com um merge, em vez de apenas forçá-lo.

Isto permitiria customização fácil do config em cada storefront, e já facilitaria o outro passo:

Depois começamos a fazer os configs/previews de cada widget individualmente, então seriam carregados e adicionados ao objeto final de configuração do CMS (por isto ele teria que ser programático).

[talissonf]

https://github.com/ecomclub/storefront/blob/master/template/js/admin.js

No storefront o admin.js é importado do template, seria bom se fosse possível customizar o objeto de configuração com um merge, em vez de apenas forçá-lo.

@leomp12 Eu pensei em deixar o admin.js sendo exportado como um modulo, podendo receber um obj com a configuraçao ou não, assim;

import config from './default-config'
// setup cms config
window.CMS_MANUAL_INIT = true
const { CMS } = window

const cmsInit = (options = {}) => {
  const merged = {
    ...config,
    ...options
  }
  CMS.init(merged)
}

export default cmsInit

[leomp12]

@talissonf isto, só não tem este export no admin.js, ele é o arquivo entry, assim como o index.js e checkout.js, como não é uma lib JS, não exporta nada...

[talissonf]

Mas se eu nao posso exportá-lo como eu pego o valor que voce me passa quando chamar o arquivo em outro local, tipo o storefront? :thinking:

[leomp12]

O que você chamou de ./default-config (que na verdade tem que ter um pathname mais descritivo sobre o cms ou admin) tem um export default (o objeto config). O admin.js não tem um export default, ele vai continuar sendo importado apenas com:

import '@ecomplus/storefront-template/template/js/admin'

Isto é o padrão no storefront.

Pra customizar a configuração o merchant/agência deverá substituir o admin.js importado diretamente com algo do tipo:

import config from '@ecomplus/storefront-template/template/js/admin/config'
// continua com o setup customizado do CMS
// ...

Ou criar um alias do Webpack pro arquivo ./admin/config, substituindo o objeto de configuração padrão com o customizado.

[talissonf]

O que você chamou de ./default-config (que na verdade tem que ter um pathname mais descritivo sobre o cms ou admin) tem um export default (o objeto config). O admin.js não tem um export default, ele vai continuar sendo importado apenas com:

import '@ecomplus/storefront-template/template/js/admin'

Isto é o padrão no storefront.

Pra customizar a configuração o merchant/agência deverá substituir o admin.js importado diretamente com algo do tipo:

import config from '@ecomplus/storefront-template/template/js/admin/config'
// continua com o setup customizado do CMS
// ...

Ou criar um alias do Webpack pro arquivo ./admin/config, substituindo o objeto de configuração padrão com o customizado.

esse config-default pra mim seria do storefront-template por isso to importando ele local mesmo

[leomp12]

esse config-default pra mim seria do storefront-template por isso to importando ele local mesmo

Sim, ele tem que ficar no storefront-template, os exemplos que eu dei foi do storefront importando do @ecomplus/storefront-template, entendeu? Na verdade todos os scripts ficam no storefront-template, o storefront só importa, isto é o que mantem os forks/deploys do storefront atualizados.

[talissonf]

esse config-default pra mim seria do storefront-template por isso to importando ele local mesmo

Sim, ele tem que ficar no storefront-template, os exemplos que eu dei foi do storefront importando do @ecomplus/storefront-template, entendeu? Na verdade todos os scripts ficam no storefront-template, o storefront só importa, isto é o que mantem os forks/deploys do storefront atualizados.

Mas então o storefront vai importar o config e da init no cms? :confused: e o init que eu faço no storefront-template?

[leomp12]

Mas então o storefront vai importar o config e da init no cms? confused e o init que eu faço no storefront-template?

O storefront continua exatamente como está, importando o admin.js por padrão que vai fazer tudo, importar o config e iniciar o CMS. O padrão do storefront é apenas copiar coisas plug & play do storefront-template.

Mas sendo o config exportado (em outro arquivo) existe a possibilidade de um merchant/parceiro em um fork customizado do storefront (não no storefront padrão), importá-lo enquanto cria um admin.js customizado, com possibilidade de usar uma configuração diferente combinada com a padrão pra não precisar reescrever tudo, isto é uma feature.

[talissonf]

Eu confundi enquanto explicava. Na verdade eu fiz da seguinte forma; Criei um pasta chamada cms dentro do diretorio template/js/ com os arquivos cms.js e default-config.js.

cms.js

import config from './default-config'
// setup cms config
window.CMS_MANUAL_INIT = true
const { CMS } = window

const cmsInit = (options = {}) => { const merged = { ...config, ...options } CMS.init(merged) }

export default cmsInit

> `default-config`
```javascript
const config = {
  config: {
    backend: {
      name: 'git-gateway',
      branch: 'master'
    },
    collections: [
    ]
  }
}

export default config

E no admin.js eu importo o cms.js

import './lib/config'
import cmsInit from './cms/cms'

document.title = `Admin ~ ${document.title}`

cmsInit()

[leomp12]

@talissonf isso aí

[talissonf]

proximo commit como chore?

[leomp12]

Não, agora é um feat:

Mas sendo o config exportado (em outro arquivo) existe a possibilidade de um merchant/parceiro em um fork customizado do storefront (não no storefront padrão), importá-lo enquanto cria um admin.js customizado, com possibilidade de usar uma configuração diferente combinada com a padrão pra não precisar reescrever tudo, isto é uma feature.

[leomp12]

https://github.com/ecomclub/storefront-template/commit/05951768e3ab9af62c30cff08c6397536c98cb23

[leomp12]

https://github.com/ecomplus/storefront/issues/165