Loki_Components
Jump to User Docs
Components
PHP
8.1 - 8.4
Magento
2.4.7 | 2.4.8
CSP
Yes
Unit Tests
18
Integration Tests
15
Latest Release
2.2.15
This is the main Magento 2 module for Loki Components, as is being used by the Loki Checkout suite. Loki Components are a combination of Alpine.js (JavaScript) and PHP (Magento): The package offers enhanced Alpine.js components that automate AJAX calls to be handled in the backend, complete with filtering, validation, updating multiple HTML elements at once, and much more.
Installation
Install this package via composer:
composer require loki/magento2-components
Next, enable this module:
bin/magento module:enable Loki_Components
Usage
See loki-extensions.com/docs/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.
Loki Components
The following LokiComponents are created or references in this module:
loki-components.modal
Module Dependencies
The following dependencies are declared in the module its `etc/module.xml` file:
Loki_Base
Loki_CssUtils
Magento_Backend
Magento_Config
Magento_Csp
Magento_Customer
Magento_Directory
Magento_Eav
Magento_Store
Magento_Theme
Yireo_CspUtilities
Composer details
Magento module name
Loki_Components
Composer name
loki/magento2-components
Composer version
2.2.15
Default branch
main
Requirements
ext-dom: *
ext-json: *
ext-pcre: *
ext-simplexml: *
laminas/laminas-http: ^2.0
loki/magento2-base: ^1.0
loki/magento2-css-utils: ^1.0
magento/framework: ^103.0
magento/module-backend: ^102.0
magento/module-config: ^101.0
magento/module-customer: ^103.0
magento/module-store: ^101.0
php: ^8.1
psr/log: ^1.0 | ^2.0 | ^3.0
yireo/magento2-csp-utilities: ^1.0
Releases
dev-main#f6830082c64c25d2e67dddbfde190c140d158e0d |
20 October 2025 |
2.2.15 |
20 October 2025 |
2.2.14 |
20 October 2025 |
2.2.13 |
20 October 2025 |
2.2.12 |
20 October 2025 |
2.2.11 |
20 October 2025 |
2.2.10 |
20 October 2025 |
2.2.9 |
20 October 2025 |
2.2.8 |
20 October 2025 |
2.2.7 |
20 October 2025 |
2.2.6 |
20 October 2025 |
2.2.5 |
20 October 2025 |
2.2.4 |
20 October 2025 |
2.2.3 |
20 October 2025 |
2.2.2 |
20 October 2025 |
2.2.1 |
20 October 2025 |
2.2.0 |
20 October 2025 |
2.1.4 |
20 October 2025 |
2.1.3 |
20 October 2025 |
2.1.2 |
20 October 2025 |
2.1.1 |
20 October 2025 |
2.1.0 |
20 October 2025 |
2.0.15 |
20 October 2025 |
2.0.14 |
20 October 2025 |
2.0.13 |
20 October 2025 |
2.0.12 |
20 October 2025 |
2.0.11 |
20 October 2025 |
2.0.10 |
20 October 2025 |
2.0.9 |
20 October 2025 |
2.0.8 |
20 October 2025 |
2.0.7 |
20 October 2025 |
Changelog
[2.2.15] - 15 October 2025
Fixed
- Automatically assign template vars to any template starting with Loki module-prefix
- Allow any Loki-driven block to use Loki template variables
[2.2.14] - 10 October 2025
Fixed
- Apply proper ARIA attributes to tab components
[2.2.13] - 08 October 2025
Fixed
- Add dev-mode warning when rendering of sorted childeren fails
[2.2.12] - 08 October 2025
Fixed
- Allow sorting of children via block argument "sort_order"
[2.2.11] - 08 October 2025
Fixed
- Allow any component to have a :cssClass
[2.2.10] - 07 October 2025
Fixed
- Support icons passed as asset ID
[2.2.9] - 07 October 2025
Fixed
- Register activeTabId when switching
- Make sure required values that are empty are validated
- Remove option "validate_on_ajax" and simply allow empty required values on-load
[2.2.8] - 06 October 2025
Fixed
- Wrap CSS classes in
$css()
- Add disabled state for active tab
[2.2.7] - 01 October 2025
Fixed
[2.2.6] - 30 September 2025
Fixed
- Restructure of methods of imageRenderer to make more sense
- Add
x-ignore
to SVG output
[2.2.5] - 29 September 2025
Fixed
[2.2.4] - 29 September 2025
Fixed
[2.2.3] - 29 September 2025
Fixed
[2.2.2] - 29 September 2025
Fixed
[2.2.1] - 29 September 2025
Fixed
- Optimize image rendering
- Prevent child renderer exception when child is empty
- Fix PHPStan issue with setTemplate() being called
[2.2.0] - 23 September 2025
Added
- Add Loki Component exception as complex message
- Output SVG with given XML attributes properly
- New ImageRenderer::icon() method
- Add new block variable "imageRenderer"
- Move new login component to
LokiCheckout_Core
and beautify
Fixed
- Enhance modals under Luma a bit
- Remove redundant CSS classes from icon containers
- Fix block rendering of static blocks
- Move messages timeout configuration from
Loki_Components
to Loki_Base
- Fuse observers to avoid ordering conflict
- Implement new blockRenderer and childRenderer arguments
- Remove block argument from templateRenderer
- Configure block prefixes via DI type
- Only allow Loki block variables on block starting with "loki"
- Rename loki.script from container to block to allow caching
- Change containers into blocks to allow for caching
- Rename Alpine stores
- Add
.prevent
modifier to @click
event handler
- Rename Alpine store checkout to LokiCheckout, components to LokiComponents
- Rewrite transfer of global messages from components to be a lot simpler
- Allow steps to have no block yet (outside of checkout)
[2.1.4] - 17 September 2025
Fixed
- Fix new JSON strucure of component updates in admin controller
[2.1.3] - 16 September 2025
Fixed
- Make showLoaderTimeout in components configurable
- Make AJAX queue interval configurable via XML layout
- Remove duplicate targets in AJAX queue
- Simplify messaging in LokiCheckout components
- Add todo
- Refresh stored messages when global components are refreshed
- Move LokiComponents global messages to regular messages template
- Add new Loki_Base as dependency and move over common logic
- Move AJAX behaviour into separate LokiAjaxQueue
- Rename loki-components.alpinejs to loki.alpinejs
- Add x-title only in Developer Mode
- Simplify active tab selection
- Create generic PHTML template for tab-buttons
- Fix strlen issue
- Allow a component to send validation messages globally via dispatch_local_messages=false
- Simplify security filter because the loop is taken care off by the Filter class
- Fix merge conflict
- Cleanup event listener
- Remove LengthBehaviourInterface
[2.1.2] - 04 September 2025
Fixed
- Fix unit test
- Add MagentoVersion util for later usage
[2.1.1] - 03 September 2025
Fixed
- Move LokiFieldViewModelImageOutput to LokiComponentsUtilImageOutput to remove circular dependency
- Copy generic CI/CD files
[2.1.0] - 02 September 2025
Added
- Refactor hard-coded field attributes to FieldViewModel::getFieldAttributes()
Fixed
- Remove LengthBehaviourInterface entirely
- Add usage instructions to README
[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
[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
Jump to User Docs
Last modified: September 1, 2025