Skip to content

Upgrading to 1.1.27

This release primarily focuses on the removal of auto-saving in forms, alongside several minor improvements.

Please refer to the changelog for details.

Please check the upgrade process overview for Hyvä-Checkout first.
Then, to upgrade, run the command

composer update --with-dependencies hyva-themes/magento2-hyva-checkout:1.1.27

Removal of Forms Auto-saving

Auto-saving forms have been a core feature of our checkout product since its inception, primarily introduced to ensure that other components dependent on form data always had access to the latest information—even after a page reload. While this approach provided some advantages, we quickly identified significant drawbacks, including unwanted UX behavior that negatively impacted the user experience.

Addressing these dependencies from an architectural perspective posed challenges. It wasn’t straightforward to ensure components received accurate data without triggering frequent, unnecessary saves. Over time, we introduced architectural improvements to tackle this stubborn problem, including the introduction of the Evaluation API, which served as a crucial missing piece.

As we redesigned the form implementation, we realized that developers could take control of saving specific data rather than relying on the system to save everything. Often, large portions of form data are only relevant for placing an order and don’t need to be saved continuously. To enable this, we introduced the new Magewire directive wire:auto-save, which works in combination with wire:model.defer. By flagging a field with auto-save, developers can specify that the checkout should save the data only when the user is about to place the order or proceed to the next step. Additionally, the .self modifier allows developers to designate fields that should save immediately after the user fills them out.

From a backend perspective, each form now injects an Evaluation Navigation Task into the checkout process. This ensures that any form changes are checked and saved before proceeding to the next task, whatever it may be. To improve the user experience further, we added a separate loading spinner to the primary navigation button, which is also disabled during loading to prevent multiple clicks. This enhancement resolves a long-standing issue where the checkout occasionally appeared stalled while performing background navigation tasks.

For more details, please refer to the auto-save documentation

Upgrade

Under normal circumstances, no additional actions are required after upgrading. However, we strongly recommend thoroughly testing your implementation, especially if you use third-party extensions that modify any forms.

Most form fields already use wire:model.defer, which prevents fields from making immediate update requests to the backend. These fields are now automatically detected and do not necessarily require a wire:auto-save directive. The navigation task will automatically check for any deferred actions and process them by sending the data to the backend before placing the order or moving to the next step.

The wire:auto-save directive with a .self modifier allows a field to save its data immediately after the user focuses out of the field. While this behavior is similar to the previous implementation, we recommend using it only when absolutely necessary, leaving the responsibility to developers to determine its appropriate use.

Backward Incompatible Changes

Hyva\Checkout\Model\Magewire\Component\Evaluation\Concern\StackingCapabilities

  • Added a self return type hint to the withStackPosition method. This change is expected to have minimal impact, as it primarily concerns architectural structure.

Hyva\Checkout\Model\Magewire\Component\Evaluation\Concern\DispatchCapabilities

  • The dispatch method now accepts a bool $dispatch parameter as its first argument, with a default value of true. This change is expected to have minimal impact due to its architectural nature.

Deprecations

Hyva\Checkout\Magewire\Checkout\AddressView\AbstractMagewireAddressForm

  • Replaced by the more advanced \Hyva\Checkout\Magewire\Component\AbstractForm

Hyva\Checkout\Model\Form\EntityFormEavAttributeShippingAddressForm

  • Replaced by Hyva\Checkout\Model\Form\EntityForm\ShippingDetailsForm, which extends Hyva\Checkout\Model\Form\EntityFormEavAttributeShippingAddressForm during the deprecation period. This ensures backward compatibility. If you are extending the original, it can be safely updated.

Layout Form Child Block Aliases: address-form.before and address-form.after

  • These have been replaced by before and after. While the original aliases are still rendered, they will eventually be removed from the form template.

Templates changes

  • src/view/frontend/templates/form/element/button.phtml
  • src/view/frontend/templates/magewire/component/form.phtml
  • src/view/frontend/templates/navigation/history.phtml
  • src/view/frontend/templates/navigation/place-order.phtml
  • src/view/frontend/templates/page/js/checkout-form-validation.phtml

  • src/view/frontend/templates/page/js/api/v1/alpinejs/magewire-form-component/magewire-form-guest-details.phtml

  • src/view/frontend/templates/page/js/api/v1/alpinejs/magewire-form-component.phtml @internal

  • src/view/frontend/templates/page/js/api/v1/directive/navigation.phtml @internal
  • src/view/frontend/templates/page/js/api/v1/evaluation/executables/navigation.phtml @internal
  • src/view/frontend/templates/page/js/api/v1/init-loader.phtml @internal
  • src/view/frontend/templates/page/js/api/v1/init-validation.phtml @internal

  • src/view/frontend/templates/page/js/api/v1.phtml @internal

  • src/view/frontend/templates/checkout/address-view/address-form.phtml @deprecated

  • src/view/frontend/templates/page/js/api/v1/alpinejs/address-form-component.phtml @deprecated

Translation changes

  • No translation changes.

Changelogs

Changelogs are available from the CHANGELOG.md in the codebase, or here in the docs.