loki-theme / magento2-luma-components
Module to allow for Loki Themes to work
Package info
github.com/LokiExtensions/LokiTheme_LumaComponents
Language:HTML
Type:magento2-module
pkg:composer/loki-theme/magento2-luma-components
Requires
- ext-pcre: *
- loki/magento2-base: ^1.0
- magento/framework: ^103.0
- magento/module-backend: ^102.0
- magento/module-csp: ^100.0
- magento/module-store: ^101.1
Requires (Dev)
None
Suggests
- mage-os/module-alpine-loader: Load Alpine.js in the Luma frontend
- mage-os/module-alpine-local-storage: Sync LocalStorage via an Alpine.js store
- mage-os/module-alpine-messages: Replace Luma messages with an Alpine.js component
- mage-os/module-alpine-minicart: Replace Luma minicart with an Alpine.js component
Provides
None
Conflicts
None
Replaces
None
README
Replace Magento Luma's legacy JavaScript stack with lightweight, CSP-friendly JavaScript and Alpine.js components.
Links
Installation
composer require loki-theme/magento2-luma-components bin/magento module:enable LokiTheme_LumaComponents
What this is
This module removes legacy Luma JavaScript (RequireJS, Knockout.js, jQuery, jQuery UI) and replaces it with custom JavaScript where needed. The following variations for this rewrite exist - taking in mind that this module tries to make as little template override as possible:
- No JavaScript, just plain HTML and CSS;
- Simple JavaScript functions;
- Alpine.js components (with or without custom template);
Included components
| Component | Replacement |
|---|---|
| Messages | ✅ Vanilla JS |
| Cookie Notice | ✅ Alpine.js |
| Desktop Navigation | ✅ Alpine.js |
| Mobile Navigation | ✅ Alpine.js |
| Customer Top Links | ✅ Alpine.js |
| Mini Cart | ✅ Alpine.js |
| Newsletter Subscribe | ✅ Vanilla JS |
| Add to Cart (PDP) | ✅ Vanilla JS |
| Add to Cart (PLP) | ✅ Vanilla JS |
| Wishlist / Compare | ✅ Vanilla JS |
| Product Tabs | ✅ Alpine.js |
| Currency Switcher | ✅ Alpine.js |
The goal is to replace legacy JavaScript with the smallest possible number of template overrides.
Current status