An open API service indexing awesome lists of open source software.

https://github.com/backendorf/m2-floating-messages

Magento 2 Luma floating messages
https://github.com/backendorf/m2-floating-messages

luma magento magento-extension magento2 magento2-extension magento2-module magento2-module-free

Last synced: 5 months ago
JSON representation

Magento 2 Luma floating messages

Awesome Lists containing this project

README

          

# 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.