Notification Bar for Magento 2

What you get

Key Features

Unlimited Bars with Stacking

• Create unlimited bars — each with its own content, position, style, and audience
• Automatic stacking — multiple bars stack vertically in priority order
• Max visible cap — global setting limits how many bars show at once per page
• Bar types — info, warning, success, promo, urgent, custom with preset theme colors

Positioning

• Top fixed — sticks to the top of the viewport as the user scrolls
• Top static — sits at the top of the page but scrolls away with content
• Bottom fixed — sticks to the bottom of the viewport
• Bottom floating — floating pill at the bottom for subtle announcements

Rich Content & Styling

• HTML content — full HTML / rich text per bar with mobile-specific override
• Solid color, gradient, or image background — every bar can be styled independently
• Text color, font size, height, padding — fine-tune every visual
• Icon support — drop in an icon name for an at-a-glance indicator
• Custom CSS — inject per-bar CSS for total design control
• Theme color presets — the module ships with 5 preset palettes (info, success, warning, promo, urgent)

CTA Buttons

• Optional CTA button per bar with label, URL, and background / text colors
• Open in new tab toggle
• Button styling inherits bar colors or can be fully overridden

Live Countdown Timers

• End-date countdown — renders a live days : hours : minutes : seconds counter
• Custom label — prefix the counter with any text (e.g. "Sale ends in")
• Expired text — a fallback message shown after the countdown hits zero
• Runs entirely client-side — no server polling, no extra requests

Targeting (Who Sees What)

• Store views — scope bars to specific stores or all stores
• Customer groups — target logged-in groups, guests, or any subset
• Country targeting — geo-target by ISO country codes
• Page targeting — show on all pages, include specific URLs, or exclude specific URLs
• Page types — cms, category, product, cart, checkout, customer account, etc.
• URL patterns — wildcards supported (e.g. /sale/*, /brand/nike*)
• URL parameters — show only when ?utm_campaign=xyz or any key=value is present
• Device targeting — show/hide on mobile or desktop independently
• Separate mobile content — shorter copy for small screens when needed

Scheduling

• Active-from / active-to dates — bars automatically appear and expire
• Auto-close seconds — dismiss the bar automatically after N seconds
• Animation in — slide_down, fade_in, or none

Dismissal & Cookie Memory

• Dismissible toggle per bar
• Cookie duration — remember a dismissal for N days (0 = session)
• Dismissed bars stay hidden for the configured window even across pages

Hyva + Luma Dual Support

• Hyva template — Alpine.js only, zero jQuery, Tailwind-friendly classes
• Luma template — vanilla JS, no heavy libraries
• Automatic theme detection via Panth\Core\Helper\Theme
• Rendered in after.body.start so the bar is painted before the header flicker

Performance & Quality

• MEQP compliant — passes Adobe's Extension Quality Program
• Ifconfig-gated — the block is not built at all when the module is disabled
• Single database table with indexed is_active, position, date_from/to, bar_type, sort_order
• Composer-installable — clean dependency resolution via Panth Core
• Multi-store & multi-language ready

Creating Notification Bars

1. Add a Bar

1. Go to Panth Infotech → Notification Bar → Manage Bars
2. Click Add New Bar
3. Enter an admin Name (internal reference) and toggle Is Active
4. Pick Bar Type (preset palette) and Position
5. Write the Content (HTML allowed) — add a Mobile Content override if desired
6. Style the bar — background type (color / gradient / image), text color, font size, height, padding, icon, optional custom CSS
7. (Optional) Enable CTA Button and set its label, URL, new-tab flag, and colors
8. (Optional) Enable Countdown and set the end datetime, prefix label, and expired-text fallback
9. (Optional) Set Active From / Active To dates for automatic scheduling
10. Set Targeting — store views, customer groups, page targeting mode (all / specific / exclude), target URLs, page types, countries, URL params
11. Set Device visibility — show on mobile, show on desktop
12. Set Dismissal — dismissible, cookie duration
13. Set Animation, optional Auto Close Seconds, and Sort Order
14. Click Save Bar

2. Preview

• Flush cache: bin/magento cache:flush
• Load any storefront page — bars matching the current visitor's audience, schedule, device, URL, and country will render in after.body.start before the header paints.

Positions, Stacking & Priority

The four positions determine where a bar renders:

Stacking — when Stack Multiple Bars is enabled, all qualifying bars render together in Sort Order ascending (lowest first). The global Max Visible Bars caps the total rendered. When stacking is disabled, only the single highest-priority qualifying bar is shown.

Countdown Timers

Any bar can show a live countdown timer:

1. Enable Countdown
2. Set the Countdown End Date (datetime, store timezone)
3. Optionally set a Countdown Label (e.g. "Flash sale ends in")
4. Optionally set Countdown Expired Text to display once the timer hits zero (e.g. "Sale has ended.")

The counter runs 100% client-side in Alpine (Hyva) or vanilla JS (Luma) — no server polling, no ticker AJAX. When the countdown expires, either the expired text is shown or the bar auto-removes itself if Auto Close Seconds is configured.

Targeting & Scheduling

Schedule

• Active From / Active To — bars are server-filtered by date range, so they do not render at all outside the window (no layout shift, no JS flash).

Audience

Page Rules

• Page Targeting — all, specific, or exclude
• Target URL Patterns — comma-separated paths, wildcards with * (e.g. /sale/*, /brand/nike*)
• Target Page Types — cms, catalog_category, catalog_product, checkout_cart, checkout_onepage, customer_account, etc.
• Target URL Params — key=value pairs (e.g. utm_campaign=spring2026)

Device

• Show on Mobile — toggle
• Show on Desktop — toggle
• Mobile Content — optional separate content for small screens

Dismissal & Cookie Memory

When Is Dismissible is enabled, the bar shows a close (×) button. Once dismissed:

• Dismissal is written to a cookie
• Cookie Duration (days) controls how long the dismissal persists — 0 means session-only (cleared when the browser closes)
• Dismissed bars are not re-rendered on subsequent pages until the cookie expires or the bar's content changes

For transient bars (flash sale countdown), pair a short cookie duration (e.g. 1 day) with Auto Close Seconds so even undismissed bars hide after a moment.

CSS Theming

Preset theme colors for each bar_type live in etc/theme-config.json:

{
 "notification-bar-info-bg": "#1E40AF",
 "notification-bar-info-text": "#FFFFFF",
 "notification-bar-success-bg": "#065F46",
 "notification-bar-success-text": "#FFFFFF",
 "notification-bar-warning-bg": "#92400E",
 "notification-bar-warning-text": "#FFFFFF",
 "notification-bar-promo-bg": "#0D9488",
 "notification-bar-promo-text": "#FFFFFF",
 "notification-bar-urgent-bg": "#DC2626",
 "notification-bar-urgent-text": "#FFFFFF"
}

Override from your theme's CSS using the standard CSS custom properties:

:root {
 --notification-bar-z-index: 9999;
 --notification-bar-font-size: 14px;
 --notification-bar-padding: 10px 20px;
 --notification-bar-transition: 300ms ease-out;
 --notification-bar-cta-radius: 4px;
}

Per-bar Custom CSS (injected inline) is the quickest escape hatch for one-off designs without touching the theme.

Troubleshooting

Enable Debug Mode in Panth Core Settings to get verbose logs in var/log/panth_notification_bar.log.

Compatibility

Tested on:

• Magento 2.4.8-p4 with PHP 8.4 (Hyva 1.3.x)
• Magento 2.4.7 with PHP 8.3 (Luma)
• Magento 2.4.6 with PHP 8.2 (Hyva)

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-notification-bar
bin/magento module:enable Panth_Core Panth_NotificationBar
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

1. Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace
2. Extract the contents to app/code/Panth/NotificationBar/ in your Magento installation
3. Ensure Panth_Core is also installed (required dependency)
4. Run the same commands as above starting from bin/magento module:enable

Verify Installation

bin/magento module:status Panth_NotificationBar
# Expected output: Module is enabled

After installation, navigate to:

Admin → Panth Infotech → Notification Bar → Manage Bars

Configuration

Global settings live at Stores → Configuration → Panth Extensions → Notification Bar. Per-bar behavior is configured on each bar edit page.

Global Settings

Per-Bar Options (Summary)

• Content — HTML bar message (with optional separate mobile content)
• Position — top_fixed, top_static, bottom_fixed, bottom_floating
• Bar Type — info, warning, success, promo, urgent, custom
• Background — solid color, gradient CSS, or uploaded image
• Text color, font size, height, padding, icon, custom CSS
• CTA — enable/disable, label, URL, open-in-new-tab, button colors
• Countdown — enable, end datetime, label prefix, expired fallback text
• Schedule — active-from and active-to dates
• Targeting — stores, customer groups, page-targeting mode, target URLs / page types / countries / URL params
• Device — show on mobile, show on desktop, mobile-specific content
• Dismissal — dismissible toggle, cookie duration (days; 0 = session)
• Animation — slide_down, fade_in, or none, plus optional auto-close seconds
• Sort Order — priority for stacking / single-bar selection

License

Panth Notification Bar is distributed under a proprietary license — see LICENSE.txt. One license covers a single Magento installation (production + staging + dev). Contact us for multi-store licensing.