Magento developers often struggle with customizing the native checkout process, which can generate stress and lengthy code. Checkout performance is also a common issue in e-commerce, often causing visitors to abandon their carts.

̈Fortunatelly, the Hyvä team are trying to simplify the developer’s experience by reducing complexity and improving frontend performance, first with the Hyvä Theme and now they have taken on the challenge of improving the checkout process, so they launched the Hyvä Checkout.

Hyvä Checkout is a brand new checkout, built from scratch, with the idea of introducing an enjoyable experience for developers... PHP developers!

Bird with "developer" tag touching with one leg cold water with tag "luma checkout customization"
(image from https://twitter.com/memegento)

Hyvä Checkout is based on Magewire, an open-source Magento framework for building dynamic interfaces in a simple way, without leaving the comfort of PHP and Magento’s core concepts, layout and template systems.

So, going deep into Magewire

Some basic concepts:

Magewire allows interaction with PHP class properties and methods from the browser without writing JavaScript. Any block instance can be turned into a Magewire component by declaring a block argument "magewire" in layout XML. A simple component is composed by a PHP class and a .phtml template.

Magewire PHP component needs to extend Magewire\Magewire\Component class.

Magewire provides a special attribute syntax to declare magic bindings in the template, the keyword `wire/` .

This is used not to call a JavaScript functions, but instead, it will trigger an interaction with the PHP `$magewire` component.

Magento's blocks transformed to Magewire components are initially rendered as normal as Magento does for every page, while every later interaction in the component from frontend (clicking a button or choosing a value in a dropdown) are Ajax requests which will magically change the state of the component.

In Magewire hooks methods can be optionally implemented by components as needed.

If a hook method exists on a component class, Magewire will automatically call it at the appropriate time (check more about hooks in the official documentation)

So now let's do an experiment with Magewire and try to create a dynamic product listing in Magento with Ajax. We use a vanilla Magento installation with Luma theme and sample products, so anyone can do the same exercise at home ;) .

Animation luma

A side note: we deliberately avoid describing how to create a module in Magento or a controller, they should be already established concepts ;) . Anyway, if you are lazy you can download the module with complete examples from https://github.com/SnowdogApps/magewire-examples

Let's go:

  • Let's create a new module in Magento providing a controller which renders a .phtml as usual.
  • Add Magewire library as a dependency to the module this way:

Magewire is already available as a dependency in Hyvä Theme and it can be also used also outside Hyvä (i.e. in Luma) just by adding the polyfill library for requirejs "Magewire/magewire-requirejs"

We should now create a template to list product names:

...and the template to add filters for the products (size and color):

Now we need the layout xml file which allows us to display those blocks and add the Magewire PHP class references (in our example it's magewire_productfilter_index.xml ):

Then let's go to create our PHP classes. First, we'll create the class which allows us to handle our dropdown filters.

As we have two dropdowns (color and size), first we need to fetch attribute values and populate them:

As you can see, we use the mount hook method to "hydrate" (populate) the two dropdowns at first render. They are bind to the PHP class via a public property:

Then in the .phtml:

(the same code is used for the for the size attribute)

Now we need to bind the interaction between the dropdowns change events with a public property in the PHP class:

Here we're going to use the updated hook function to "listen" the updating of a property.

As our dropdowns are bind through the wire:model="size" and wire:model="color" properties, changing in status of the dropdowns will call automatically the *updated* hook passing the name of the property and its value, then that function emits a Magewire's event to fire a filter<property> method (we'll create those filters methods later).

More about magic interaction in the official docs.

Now let's go to create PHP component class for the product listing part

We need to populate the list using a Magento collection. We are filtering products for a specific category, for simplicity and to have products with color and size attributes with values.

As the same as the filter block, here we're using the mount method to "hydrate" component list with its data.

Then we'll add properties, filter methods and listeners property as well to make the interaction work (more about listeners):

This way, as soon as filterSize or filterColor method are fired, co-because they are listening to the emit event from the PHP filter class, they will call the updateProducts method which updates the public property $this->products . This is the bind propery in the listing template so product list then will be updated automatically.

Feel free to check and use, for your own experiments, the module with the examples on our public github.

Conclusion

As we could see, we managed to get a dynamic responsive component in Magento without writing a single line of JavaScript! In my opinion, this can definitely is a real game changer for PHP developers, who often struggle and argue with Magento JavaScript stuff and last but not least we haven't seen any Magento UI component here ;) and also if we think this is used in Hyvä checkout, it makes its customization fun!

Useful links: