Loki_Components

Jump to User Docs

Components
PHP 8.3 | 8.4
Magento 2.4.7 | 2.4.8
Unit Tests 16
Integration Tests 20
Latest Release 2.0.15

This is the main core package for Loki Components, as is being used by the Loki Checkout suite.

Installation

Install this package via composer (assuming you have setup the composer.yireo.com repository correctly already):

composer require loki/magento2-components

Next, enable this module:

bin/magento module:enable Loki_Components

Support

For getting support, create an Issue under the following project URL:

https://github.com/LokiExtensions/Loki_Components

Configuration Options

The following options of this module can be configured via the Store Configuration:

Generic settings > Debug
loki_components/general/debug
When debugging is enabled, on various levels, detailed information comes available. For instance, in the browser Error Console, more debugging messages are displayed, allowing you to inspect issues on the JavaScript level. Whenever an exception occurs within the AJAX call, the exception message is appended to the AJAX output.
Generic settings > Only validate AJAX calls
loki_components/general/only_validate_ajax
Any Loki Component allows for changing a value on the Magento server-side and before changing this value validation occurs. If validation fails, the LokiComponent is able to display an error, mark the input field with a red border, etcetera. However, when this happens when the page is loading, it might disturb the UI. This setting allows you to only trigger validation, when an actual change happens. It depends on your own customizations, whether you like this or not.
Validators > Enable MX Validation for Email Values
loki_components/validators/enable_mx_validation_for_email
When a specific Loki Component is declared in a file `etc/loki_components.xml` with a validator `email`, then basic email validation is applied. With this setting enabled, the validation includes also a DNS MX lookup of the domain part of the email.
Global Messages > Timeout
loki_components/global_messages/timeout
Whenever global messages are popping up, they can be removed again after a slight delay. This is by default 5000ms (5 seconds).
Loki Components

The following LokiComponents are created or references in this module:

loki-components.modal loki-components.global-messages
Module Dependencies

The following dependencies are declared in the module its `etc/module.xml` file:

Magento_Config Magento_Customer Magento_Backend Magento_Store Loki_CssUtils Yireo_CspUtilities
Composer details
Magento module name
Loki_Components
Composer name
loki/magento2-components
Composer version
2.0.15
Default branch
main
Requirements
magento/framework: ^103.0
magento/module-backend: ^102.0
magento/module-config: ^101.0
magento/module-customer: ^103.0
magento/module-store: ^101.0
laminas/laminas-http: ^2.0
loki/magento2-css-utils: ^1.0
yireo/magento2-csp-utilities: ^1.0
psr/log: ^1.0 | ^2.0 | ^3.0
php: ^8.1
ext-json: *
ext-pcre: *
ext-simplexml: *
ext-dom: *
Releases
dev-main 29 August 2025
2.0.15 29 August 2025
2.0.14 27 August 2025
2.0.13 26 August 2025
2.0.12 21 August 2025
2.0.11 18 August 2025
2.0.10 15 August 2025
2.0.9 13 August 2025
2.0.8 10 August 2025
2.0.7 07 August 2025
2.0.6 06 August 2025
2.0.5 01 August 2025
2.0.4 30 July 2025
2.0.3 29 July 2025
2.0.2 28 July 2025
2.0.1 24 July 2025
2.0.0 21 July 2025
Changelog

[2.0.15] - 29 August 2025

Fixed

  • Add dep
  • Add recurring setup to check for modules to enable

[2.0.14] - 27 August 2025

Fixed

  • Make sure modal does not cause issue if there is no modal element
  • Convert all DOM classes and IDs to lowercase; Only validate components once
  • Add comment with global message

[2.0.13] - 26 August 2025

Fixed

  • Make sure to log exceptions although they are caught

[2.0.12] - 21 August 2025

Fixed

  • New ViewModel AppMode
  • Remove obsolete call to LokiComponentsFocusListener
  • Move scripts from top of body to bottom of body
  • Remove old focus-listener
  • Add dep with Loki_CssUtils
  • Import right CssClass util
  • Fix newlines after comments
  • Declare used PHP namespaces
  • Add escaping of template code
  • Add missing strict_types declaration
  • Move CssClass and CssStyle to separate package
  • Use xmark.svg to close global messages

[2.0.11] - 18 August 2025

Fixed

  • Allow for PHP 8.1 compatibility
  • Lower requirements to PHP 8.1
  • Option to limit cart items in sidebar but collapse to entire list
  • Rename tab in Store Config from "Yireo" to "Loki"

[2.0.10] - 15 August 2025

Fixed

  • Add new $style() variable in PHTML templates
  • Move config from Yireo tab to Loki tab

[2.0.9] - 13 August 2025

Fixed

  • Add data-valid attribute to fields
  • Add addLocalMessage helpers

[2.0.8] - 10 August 2025

Fixed

  • Move loading features into separate component and component partial
  • Lift up to PHPStan level 3
  • Add escaping to templates

[2.0.7] - 07 August 2025

Fixed

  • Lift up to PHPStan level 2
  • Prevent null HTML in transport from breaking AddHtmlAttributesToComponentBlock observer

[2.0.6] - 06 August 2025

Fixed

  • Move initMethods and destroyMethods into component partials
  • Rename LokiDataLoaderComponentPartial to LokiLoadDataComponentPartial
  • Implement aria-errormessage together with existing aria-invalid
  • Do not display container of local messages, if there are no local messages
  • Set message area default to local
  • Allow XML layout to set message area to make component messages global or local
  • Lower PHP requirement to PHP 8.2+

[2.0.5] - 01 August 2025

Fixed

  • Add CSS wrapper in various templates
  • Make sure child block counter is used by all renderers
  • Move modal close button into separate PHTML
  • Trim HTML before trying to detect HTML elements within

[2.0.4] - 30 July 2025

Fixed

  • Special characters should not be converted to HTML chars
  • Move logic to helper methods
  • Implement better abort handling for AJAX requests
  • Cancel existing AJAX calls on subsequent requests

[2.0.3] - 29 July 2025

Fixed

  • Remove ugly PHPUnit 10 work-around of getTestResultObject()

[2.0.2] - 28 July 2025

Fixed

  • Add router for increased performance

[2.0.1] - 24 July 2025

Fixed

  • Allow closing modal by clicking outside of modal

[2.0.0] - 21 July 2025

Fixed

  • Rename PHP namespace from Yireo_LokiComponents to Loki_Components
  • Rename composer from yireo/magento2-loki-components to loki/magento2-components

[1.0.9] - 16 July 2025

Fixed

  • Add helper methods for adding notices, warnings, errors and success messages

[1.0.8] - 07 July 2025

Fixed

  • Add addGlobalError helper method to base component
  • Do not convert special chars in field values (example 's Hertogenbosch)

[1.0.7] - 18 June 2025

Fixed

  • Add details/summary to popup message
  • WIP on maps integration
  • Remove echo from controller output, just make debug message more readable
  • Enhance workflow of errors during final stage
  • Reuse currentUri in AJAX request

[1.0.6] - 22 May 2025

Fixed

  • Fix z-index of messages
  • Add simple LokiForm component
  • Update admin settings with tooltip and regenerate new MODULE.json

[1.0.5] - 13 May 2025

Fixed

  • Fix possible warning
  • Fix possible warning
  • Add allFunctionsCalledOnLoad

[1.0.4] - 07 May 2025

Fixed

  • CSP issue with closing messages
  • Move data loading into separate component partial
  • Rewrite Alpine from initActions object to methods starting with init
  • Allow for plugins to be loaded right before main Alpine
  • Improve styling of messages in admin
  • Move Loki messages in admin to page.messages container
  • Add admin controller
  • Support security for complex values
  • Modules should NOT determine the page layout for reusable handles

[1.0.3] - 01 May 2025

Fixed

  • Allow everything to happen in backend as well
  • Allow PHP 8.4 in CI
  • Fix issue with LokiCheckoutMollie DI type overriding core validators

[1.0.2] - 28 April 2025

Fixed

  • Check for integration test containing string, not full match

[1.0.1] - 25 April 2025

Fixed

  • Add setValue() method
  • CSP fixes

[1.0.0] - 24 April 2025

  • Major version to promote stability, because it works!

Fixed

  • Intercept unwanted exceptions while rendering
  • Move from x-init-data to separate text/x-loki-init script to prevent possible escaping issues
  • Fix possible issue when LokiCheckout config is used outside of checkout
  • Allow for jsData to be set from block as well
  • Fix CSP issue with new x-json directive
  • Do not mark ComponentUtil as a whole as deprecated
  • Move all field behaviour to FieldComponentType
  • Move tabs into new component partial
  • Make loader icon in fields depend on Alpine and activate only after configurable timeout

[0.0.18] - 16 April 2025

Fixed

  • Chop up modal into regular component, Loki Component and component partial
  • Move scripts from "before.body.end" to new "loki-scripts" container
  • Complete modal functionality
  • Use js_component_name from block by default

[0.0.17] - 08 April 2025

Fixed

  • Simplify reloading of this component
  • Simplify loading state of target components
  • Remove select-icon when loading select-field

[0.0.16] - 04 April 2025

Fixed

  • Reset HTML attributes when reloading component

[0.0.15] - 04 April 2025

Fixed

  • Allow for specific exceptions to redirect back to checkout/cart
  • Refactor to ignore non-existing target rendering
  • Rename default CSS class from "inline" to "default"
  • Only show HTML hints for failing blocks in Developer Mode
  • Refactor way that loading is handled a bit
  • First batch of Playwright functional tests
  • Add new MODULE.json with meta-information
  • Fix test for components that are disallowed rendering
  • Add proper styling of messages under Luma

[0.0.14] - 11 March 2025

Fixed

  • Turn Phrases into strings automatically
  • Add validators date and past_date
  • Reorganize tests
  • Add module dependencies
  • Huge refactoring to move logic into new LokiFieldComponents module
  • Intercept non-existing target error
  • Apply document.getElementById after nextTick
  • Improve handling of AJAX errors
  • Make sure to remove loader when fatal errors occurs on server
  • Remove wrong scope in CSS
  • Add various integration tests
  • Add TargetRenderer test
  • Cleanup layout loader and add test
  • Fix integration test of translation strings
  • Abstract ViewModel methods for length behaviour
  • Move EmailValidatorTest
  • Add missing Dutch translations
  • Properly translate validation messages
  • Move email availability in separate validator email_available
  • Rename block loki-checkout.defaults.x to loki-components.defaults.x
  • Rename loki-checkout.css_classes to loki-components.css_classes
  • Config option for MX lookup was using wrong path
  • Rewrite Alpine.store() APIs

[0.0.13] - 25 February 2025

Fixed

  • Standardize JS event names
  • Rename yireo-loki-checkout.component-change to loki-components.component.update
  • Add generic LokiComponentsLogger
  • StepForwardButton not activated after component updates ($nextTick is now used)
  • Hide entire global messages div if empty

[0.0.12] - 24 February 2025

Fixed

  • Remove obsolete NoBlockFoundException

[0.0.11] - 24 February 2025

Fixed

  • Setting for disabling MX lookup for email validator
  • Destroy components before updating their HTML

[0.0.10] - 24 February 2025

Fixed

  • Allow multiple destroy actions

[0.0.9] - 24 February 2025

Fixed

  • Remove old hasChanges method
  • Do not display NoComponentFoundException on frontend
  • Improve autofill mechanism

[0.0.8] - 24 February 2025

Fixed

  • Default target definitions were dropped when cache was refreshed from non-frontend
  • Add little hint about microseconds
  • Listen to autofill changes
  • Add support default value

[0.0.7] - 24 February 2025

Fixed

  • Implement focus listener in a better way

[0.0.6] - 23 February 2025

Fixed

  • Allow stack trace to be shown as global message while debugging
  • Position global messages fixed in top
  • Add new setting for timeout of global messages
  • Only add trace to exceptions if debugging is enabled
  • Do not switch back to originalValue, preventing AJAX loop
  • Only validate AJAX calls by default

[0.0.5] - 22 February 2025

Fixed

  • Fix issue with HTML attributes for nested components
  • Prevent duplicate HTML attributes

[0.0.4] - 20 February 2025

Fixed

  • Re-add getFilters and getValidators differently
  • Only validate AJAX calls setting
  • Rewrite updating of HTML and component props
  • Remove duplicate newlines for easier debugging
  • Add failsafe checks

Added

  • Add debug config option

[0.0.3] - 18 February 2025

Fixed

  • Friendlier message for unknown email domain in validator

Refactor

  • Refactor LocalMessageRegistry methods
  • Remove obsolete ViewModel methods getFilters and getValidators

[0.0.2] - 13 February 2025

Fixed

  • Fix rendering of global messages
  • Fix issue in refreshing other targets
  • Fix autofocus after HTML updates
  • Redirect to cart when AJAX fails with empty quote
  • Fix preg_match issue
  • Allow for default core messages to be used as Loki GlobalMessages
  • Fix message location for Luma
  • Improve logic of AJAX handling
  • Pass original request through to layout

Added

  • Move CssClass to LokiComponents

Refactor

  • Remove dependency between validators and component object

[0.0.1] - 18 January 2025

  • Initial release
Jump to User Docs

Last modified: July 22, 2025