What is Magewire?

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.

Magewire is a port of the popular Laravel Livewire library to Magento.
It allows interaction with PHP class properties and methods from a browser without writing JavaScript or PHP glue code.

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.

This 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.

These attributes are used by the front end Magewire JavaScript library to initialize a JavaScript object for each component.

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.

Then the blocks template will then be rendered again and the output is used to update the component on the front end via JavaScript.

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