Components

Components allow you to add more advanced features to a section and let you really make a website functional.

Section components work almost identically to Components however the main different is all components when used in a section file must be prefixed with a s: in the section parameter. e.g: <x-store-menu section="s:client_logos" />

Managing components

Much like configs/pages.json the only difference here is, instead of assigning components to pages, you instead assign them to the components within the sections config.

Here's an example of a component with a menu under the name client_logs

{
    "id": "clients",
    "name": "Clients",
    "default_view": "components.sections.clients",
    "pages": "any",
    "components": {
        "menu": [
            "client_logos"
        ]
    },
    "settings": [],
    "translations": {
        "en": {}
    },
    "layout": {}
}

and much like components you may also turn on repeating

{
    "id": "clients",
    "name": "Clients",
    "default_view": "components.sections.clients",
    "pages": "any",
    "components": {
        "tag": {
            "products": {
                "repeat": true
            }
        }
    },
    "settings": [],
    "translations": {
        "en": {}
    },
    "layout": {}
}

Using components

When using components in sections things change a little, however not by much.

When checking if a component exists you can do

@if(Section::hasComponent('menu', 'client_logos'))
    <x-store-menu section="s:client_logos" />
@endif

or alternatively you can do

@if(Theme::hasComponent('menu', 's:client_logos'))
    <x-store-menu section="s:client_logos" />
@endif

TIP

You can still use page specific and global components in your sections by using Theme::hasComponent('menu', 'g:header') but this is not recommended as sections are supposed to separated

For more information on components checkout the components page and replace Theme:: with Section::