Skip to main contentAs 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
