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á.

​
Leitura adicional