Sections are UI components built with Preact that
can receive props configured by users on deco.cx's Admin. The Section local
implementations live on the sections/ folder in the Site's code, but it's also
possible to Install Apps.
Some examples of Sections for an ecommerce store would be:
- ProductShelf.tsx: displays a product shelf with image, title and price.
- Header.tsx: displays the standard header of the store, containing logo, menu categories and links for cart and login.
- Banner.tsx: displays image, text and some Call to action for campaign or specific department.
Interactivity
Note that Sections run on the server-side only, so state and lifecycle such
as useState, useEffect and callbacks such as onClick, onInput will not
work. In order for those to work, you'll need to use
interactive Islands
In deco.cx's Admin, it's possible to interact with Sections in two places:
- Library: Allows developers to configure the properties of Sections and automatically see the generated UI. (Works similar to Storybook)
- Pages: Allows Section to be added to Page on the site, also being configurable.