This section will teach you just enough about Magewire to get started.
For more detailed information please refer to the documentation in the Magwire GitHub repo.
Once you have a solid grasp of the Magewire fundamentals, the Livewire API Reference will become a very helpful resource.
Magewire is installed as a dependency of Hyvä Checkout
It is not necessary to install Magewire individually, because it will be installed by composer as a dependency of the Hyvä Checkout.
Please refer to the Hyvä Checkout installation instructions for details.
What is Magewire?
Magewire is a port of the popular Laravel Livewire library to Magento.
Magewire in Magento
Any block instance can be turned into a Magewire component by declaring a block argument with the name
magewire in layout XML.
Any Magento developer who knows Magento PHP ViewModels will be familiar with this approach to injecting an Object instance into a block.
<block name="checkout.shipping-details" template="Hyva_Checkout::component/shipping-details.phtml"> <arguments> <argument name="magewire" xsi:type="object"> \Hyva\Checkout\Magewire\ShippingDetails </argument> </arguments> </block>
The special argument name
magewire is what allows the library to recognize the view model is a Magewire component.
magewire view model is the PHP class the front end will be able to interact with.
To render values in the HTML page, view models methods are called by the
.phtml template as usual.
When the page is rendered in a browser, a special binding syntax is used to allow calls to methods on the PHP view model via Ajax.
The method calls can update the view model properties and a re-render of the template will update the page.
Under the hood
In a nutshell, Magewire will detect if a block has a
magewire view model, and if so, it will render a few additional arguments on the HTML the block produces.
When the user interacts with the component on the page, this object will trigger Ajax requests to invoke the specified
magewire view model methods and properties.
During this process, Magewire calls lifecycle hook methods on components (if present), and also provides ways to send messages from one component to another, as well as other useful utilities.
The HTTP request during which a component is rendered the first time is known as the preceding request, and any request that is triggered by Magewire after a visitor interacts with a component is called subsequent request.
The following pages will get you up to speed with Magewire so you can start working with the Hyvä Checkout.
However, more details can be found in the Magewire documentation.
Check out the Livewire API Reference once you are familiar with Magewire