From your Loki Component, you can send notifications to the user via two different mechanisms:
For instance, if you want to show a popup notification in the top of the screen, a global message could be used. If you want messages to be displayed below a certain input field, local messages could be used.
The most common usage is to add messages via the ComponentRepository
class of a component. The following shows how to add global messages:
$this->getGlobalMessageRegistry()->addSuccess('Hello World');`
$this->getGlobalMessageRegistry()->addWarning('Hello World');`
$this->getGlobalMessageRegistry()->addError('Hello World');`
$this->getGlobalMessageRegistry()->addNotice('Hello World');`
These global messages are picked up by the Loki Component GlobalMessages
and rendered server-side. Note however that the messages are actually turned into AlpineJS-based objects, so that the same component also allows sending messages via JavaScript.
The following shows how to add local messages:
$this->getLocalMessageRegistry()->addSuccess($this->component, 'Test success');
$this->getLocalMessageRegistry()->addWarning($this->component, 'Test warning');
$this->getLocalMessageRegistry()->addError($this->component, 'Test error');
$this->getLocalMessageRegistry()->addNotice($this->component, 'Test notice')
Each local message is added to the registry under its own component. The ComponentViewModel
then fetches these messages again (getMessages()
), turns them into JavaScript properties of the Alpine component. Next, the component could add the child-template loki-components.utils.local-messages
to its own PHTML templates to allow rendering of these messages:
<?= $blockRenderer->html('loki-components.utils.local-messages', $block) ?>
Do not try to send messages from your ComponentViewModel
, because you could be adding messages after the local messages have been rendered.
Note that the LocalMessageRegistry
is not part of your own component but it is a separate class. This also explains why you need to pass your own component ($this->component
) as an argument. An added feature here is that you can also add local messages to another component than your own.
If you want to add messages from observers (or other classes), go ahead. Just inject either LocalMessageRegistry
or GlobalMessageRegistry
.
You might say why this mechanism was custom-made, instead of re-using the Magento core its message manager. One of the reason is that Loki Components are actually rendered with any change (the AJAX call to modify data is also rendering the block output again), while the core messaging system was designed to temporarily store messages in the session. Furthermore, messages are then rendered client-side by using localStorage
as a mechanism to store messages only for a single HTTP request round. This core mechanism is actually for more complex than the messaging of Loki Components.