As Sections são componentes de UI criados com
Preact que pode receber props configuradas por
usuários no Admin da deco.cx. As implementações locais de Section vivem na
pasta sections/ no código do Site, porém é possível
Instalar novas apps.
Alguns exemplos de Section para uma loja de ecomemerce seriam:
- ProductShelf.tsx: exibe uma prateleira com imagem, título e preço.
- Header.tsx: exibe o cabeçalho padrão da loja, contendo logotipo, categorias de menu e links para carrinho e login.
- Banner.tsx: exibe imagem, texto e alguns Call to action para campanha ou departamento específico.
Interatividade
Observe que as seções são executadas somente no lado do servidor, portanto,
gerenciamento de estado e ciclo de vida como useState, useEffect e callbacks
como onClick, onInput não irão funcionar. Para que funcionem, você precisará
usar Islands.
No Admin da deco.cx é possível interagir com as Sections em dois locais:
- Library: permite que desenvolvedores configurem as propriedades das Section e visualizaem automaticamente a UI renderizada. (Funciona semelhante ao Storybook)
- Pages: Permite que a Section seja adicionada à Pages no Site, sendo também configuráveis por lá.