Magento 2 Floating Messages

A Magento 2 module that makes the default storefront messages float and auto-hide, improving UX without modifying core code. Messages can be positioned (e.g., top/bottom, left/right) and a hide delay can be configured from Admin.

Overview

• Adds CSS/JS to float the .page.messages container and apply optional positioning classes.
• RequireJS mixin augments Magento_Theme/js/view/messages to auto-hide success and notice messages after a configurable delay.
• Admin configuration under Stores > Configuration > Backendorf > Floating Messages.

Stack

• Language: PHP (Magento 2 module)
• Platform/Framework: Magento 2 (frontend: RequireJS, jQuery, Magento customer-data)
• Package manager: Composer (type: magento2-module)
• Autoloading: PSR-4 (Backendorf\FloatingMessages\) and registration.php

Requirements

• Magento 2.x
• PHP version compatible with your Magento 2 installation
• Composer

TODO:

• Document exact supported Magento and PHP versions (none declared in composer.json).

Installation

Run in your Magento project root:

• composer require backendorf/m2-floating-messages
• bin/magento module:enable Backendorf_FloatingMessages
• bin/magento setup:upgrade

If in production mode, also run:

• bin/magento setup:di:compile
• bin/magento setup:static-content:deploy -f

Finally:

• bin/magento cache:flush

Configuration

Admin path: Stores > Configuration > Backendorf > Floating Messages

Options (scope: Default/Website/Store):

• Enabled (Yes/No)
• Position (options provided by Backendorf\FloatingMessages\Model\Config\Source\Position)
• Time to hide (milliseconds)

Defaults (from etc/config.xml):

• Enabled: 1 (Yes)
• Position: bottom right
• Time to hide: 5000 ms

How it works

• Observer Backendorf\FloatingMessages\Observer\LayoutLoadBefore adds body classes based on configuration ( floating-messages, and top/bottom, left/right).
• Layout handle view/frontend/layout/default.xml injects a block Backendorf\FloatingMessages\Block\Config which renders a small JS snippet exposing window.floating_messages.timeToHide.
• RequireJS config adds a mixin for Magento_Theme/js/view/messages which subscribes to messages and auto-hides success/notice types after the configured delay.
• LESS styles in view/frontend/web/css/source/_module.less position the messages container based on body classes.

License

The repository contains an MIT License file.

Changelog

• Initial README expanded to include installation, configuration, internals, and commands.