Architecture
Considerable research was conducted to devise a practical and comprehensible approach to porting Livewire into a Magento module, while maintaining a straightforward architecture to encourage broader contribution.
Module
The module structure differs slightly from a typical Magento module.
| Directory | Description |
|---|---|
./dist |
The classes generated by Portman are based on the configuration source and any overrides, following a similar folder structure to the one found in the ./portman directory. |
./lib |
Contains framework-related classes, including core Features and Mechanisms. |
./portman |
Specific Portman class overwrites. |
./src |
Core structure serving as the initial entry point, binding key elements to Magento. |
./tests |
Multiple type of tests e.g. Playwright |
./themes |
Theme support decided into sub-modules |
Themes
Magewire is build to support multiple themes with having the Hyvä theme as its default. A theme needs to be made compatible adding or overwriting specific theme related code re-using the javascript which is written in a modular and loosly coupled fashion.
Example
Among other things, some theme-specific adjustments for Hyvä were necessary — in this example, the flash messages are being made compatible.
<script>
(() => {
window.addEventListener('magewire:flash-messages:dispatch', event => {
dispatchMessages(event.detail)
})
})()
</script>
The magewire:flash-messages:dispatch event is triggered by the MagentoFlashMessages feature. An array containing a
name and its corresponding params, in this case, the flash messages extracted from the component during dehydration,
is pushed into the dispatches property.
<?php
...
class SupportMagentoFlashMessages extends \Magewirephp\Magewire\ComponentHook
{
public function dehydrate(\Magewirephp\Magewire\Mechanisms\HandleComponents\ComponentContext $context): void
{
...
$context->pushEffect('dispatches', [
'name' => 'magewire:flash-messages:dispatch',
'params' => $messages,
]);
}
}