# Messages

**From the backend or from the JavaScript level, messages can be sent to be displayed within the HTML element with class `messages`. Here you will find the approach that Loki Theme Kit took to replace this with modern JavaScript.**

The Alpine.js store `LumaMessageStore` extends from the `LumaLocalStorage` store and makes it easy to access the private data section `messages`. The HTML element for messages is extended with an HTML attribute `data-js-component="LumaMessage"` referring to the JS component `LumaMessage`. This JS component retrieves data from the Alpine.js store, but also from the browser cookie `mage-messages`. 

Once the messages are retrieved, new HTML message-elements are created below the main HTML element. Each element is automatically removed again after a configured timeout.

## Examples
```js
Alpine.store('LumaMessageStore').addErrorMessage('Example error');
Alpine.store('LumaMessageStore').addWarningMessage('Example warning');
Alpine.store('LumaMessageStore').addSuccessMessage('Example success');
Alpine.store('LumaMessageStore').addNoticeMessage('Example notice');
```

## Timeout for removing messages automatically
A message can be removed by giving it a double-click. And they automatically disappear when a timeout is reached. This timeout is by default 5000 milliseconds, but this can be easily tuned with an XML layout update:

```xml
<referenceBlock name="messages">
    <arguments>
        <argument name="timeout" xsi:type="int">10000</argument>
    </arguments>
</referenceBlock>
```