NumberNine CMS

Create a component

To understand what are components, read this section.

Configuration

In your config/packages/numbernine.yaml file, configure the path where to store components. By default it's src/Component/, if this path suits you then skip this step.

numbernine:
    components_path: 'src/My/Path/To/Components/'

Using CLI

Run this command in your terminal:

docker compose exec php bin/console numbernine:make:component

You'll be asked for a component name, enter the name you want. You can create subfolders, for example Post/PostAuthor.

File structure

A new folder is created with two files:

  • MyComponent/MyComponent.php

    This is the controller of the component template.

  • MyComponent/template.html.php

    This is the template.

Render a component from Twig

To render the component, use this Twig function:

{{ N9_component('MyComponent') }}

Inject variables in a component

You can inject some variables from the parent template into your component:

{{ N9_component('MyComponent', {example: 'string variable'}) }}

To catch it, your component need to implement the corresponding setter:

final class MyComponent implements ComponentInterface
{
    private string $example;

    public function setExample(string $example): void
    {
        $this->example = $example;
    }

    // ...
}

Expose variables to the component's template

Every component must implement getTemplateParameters() which returns an array of exposed variables to the template.

final class MyComponent implements ComponentInterface
{
    // ...

    public function getTemplateParameters(): array
    {
        return [
            'example' => $this->example,
        ];
    }
}

The Twig template can now use this variable:

<p>Displaying custom variable: {{ example }}.</p>

Injecting a service in your component

Every component is a service. This means you can use dependency injection like with any other service.

final class MyComponent implements ComponentInterface
{
    public function __construct(
        EventDispatcherInterface $eventDispatcher
    ) {
        // ...
    }
}