A simple Field Component

Block definition in the XML layout

A simple Field Component could first be defined by using the XML layout:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
    <update handle="loki_field_components"/>
    
    <body>
        <referenceContainer name="after.body.start">
            <block
                name="yireo-training.example-field-component.example"
                template="Loki_FieldComponents::form/field.phtml"/>
        </referenceContainer>
    </body>
</page>

Note that the handle loki_field_components is added, to make sure not only the Loki Components are properly defined, but also all of the Loki Field Component specific functionality.

Component definition in etc/loki_components.xml

Next, a file etc/loki_components.xml upgrades your block to an actual component. Note that the name of the component is equal to the name of your block:

<?xml version="1.0" encoding="UTF-8" ?>
<components xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Loki_Components:etc/loki_components.xsd">
    <component 
        name="yireo-training.example-field-component.example"
        viewModel="Loki\Field\Component\Base\Field\FieldViewModel"
        repository="YireoTraining\ExampleFieldComponent\Component\ExampleFieldComponentRepository"
    />
</components>

Note that there is reference to PHP classes that we will still need to create as well.

Custom FieldRepository class

The goal of a Loki Field Component is to save the value of an input field in Magento easily. Where in Magento this should be saved is something you need to determine yourself, by extending the abstract class Loki\Field\Component\Base\Field\FieldRepository. This class simply adds a couple of handy field-related methods on top of the abstract class Loki\Components\Component\ComponentRepository which requires you to implement the following methods:

  • abstract public function getValue(): mixed
  • abstract public function saveValue(mixed $value): void

A simple example could look as follows:

<?php declare(strict_types=1);

namespace YireoTraining\ExampleLokiFieldComponent\Component;

use Loki\Field\Component\Base\Field\FieldRepository;
use Magento\Customer\Model\Session as CustomerSession;

class ExampleFieldComponentRepository extends FieldRepository
{
    public function __construct(
        private readonly CustomerSession $customerSession,
    ) {
    }

    public function getValue(): mixed
    {
        return $this->customerSession()->getData($this->getComponentName());
    }

    public function saveValue(mixed $value): void
    {
        if (is_array($value)) {
            $value = json_encode($value);
        }

        $this->customerSession()->setData($this->getComponentName(), $value);
    }
}

This class retrieves and saves the field value from the customer session, by uniquely identifying it with the component name (which equals the block name in the layout).

Last modified: September 4, 2025