πŸ“Š State of Magento 2025 β†’
M
PackageMaven Submit

The Home for Magento 2 Excellence

Quality-tested Magento 2 modules. Explore. Evaluate. Elevate. #magento2

618 Modules
407 Ready
210 Need Help
πŸ† Leaderboard
Actively Maintained v1.1.0

Rollpix Discount Badge

rollpix/module-discount-badge

Adds a dynamic discount percentage badge to product prices. Displays the discount (e.g., 21% OFF) next to the original price on product and category pages.

Tax & Pricing
0
Downloads
0
GitHub Stars
Today
Last Release
0
Open Issues
Build Passing
Ready to install

Build Tests

Composer Install
DI Compile
Templates

Code Quality

CS Coding Standard
13 warnings
– PHPStan

Tested on Magento 2.4.8-p3

Recent Test History

Each release is tested against the latest Magento version at that time.

v1.1.0 on Magento 2.4.8-p3
Feb 26, 2026
GitHub Repository
Source code & docs
Packagist
Version history
Issues & Support
Get help or report bugs

Top Contributors

View Leaderboard
nmarquev
nmarquev
4 contributions

Share This Module's Status

Rollpix Discount Badge Magento compatibility status badge

README

Loaded from GitHub

Rollpix_DiscountBadge

VersiΓ³n en espaΓ±ol

SPONSOR: www.rollpix.com

Dynamic discount percentage badge for Magento 2 product prices. Displays a visual badge (e.g., 21% OFF) next to the strikethrough price wherever Magento renders prices with a discount.

Compatibility

| Requirement | Version | |---|---| | Magento | 2.4.7 ~ 2.4.8 | | PHP | 8.1 ~ 8.3 |

Installation

Via Composer (recommended)

composer config repositories.rollpix-discount-badge vcs https://github.com/ROLLPIX/M2-DiscountBadge.git
composer require rollpix/module-discount-badge:1.0.0
bin/magento module:enable Rollpix_DiscountBadge
bin/magento setup:upgrade
bin/magento cache:flush

Manual installation

  1. Create the directory app/code/Rollpix/DiscountBadge/
  2. Copy all repository files there
  3. Run:
bin/magento module:enable Rollpix_DiscountBadge
bin/magento setup:upgrade
bin/magento cache:flush

Admin Configuration

Navigate to Stores > Configuration > Rollpix > Discount Badge.

General Settings

| Field | Description | Default | |---|---|---| | Enabled | Enable/disable the badge globally | No | | Minimum Discount (%) | Threshold to show badge (1-99) | 5 | | Badge Text Template | Text template with {discount} placeholder | {discount}% OFF | | Badge Position | Where to place the badge (inline, over image, below price) | After old price | | Badge Style | Visual variant: filled, outline, pill, pill_outline, text_only | Filled |

PDP & Listing Styles

Independent style settings for Product Detail Page and Product Listing contexts:

  • Background Color
  • Text Color
  • Font Size (px)
  • Border Radius (px)
  • Padding
  • Font Weight

Custom CSS

Free-form CSS textarea injected in <head> for per-store overrides.

What It Does

  • Calculates discount percentage: round(((regular_price - final_price) / regular_price) * 100)
  • Displays a badge next to the strikethrough (old) price
  • Works in all contexts: category pages, product detail pages, widgets, search results, related/upsell/crosssell blocks
  • Updates dynamically when configurable product options change the price
  • Respects special prices, catalog price rules, tier prices β€” reads whatever Magento already calculated
  • Five visual styles: Filled, Outline, Pill, Pill Outline, Text Only
  • Seven position options including inline with price and over product image
  • Independent styling for PDP vs. listing contexts
  • Custom CSS field for per-store overrides
  • Fully translatable text template per Store View

Edge Cases

  • regular_price == final_price β†’ no badge
  • regular_price == 0 β†’ no badge
  • Discount ≀ 0% or β‰₯ 100% β†’ no badge
  • Discount < minimum threshold β†’ no badge

Behavior When Disabled

When the module is disabled in admin:

  • No JavaScript is loaded
  • No CSS is injected (beyond the static base CSS which has no visual impact)
  • No badge elements are rendered
  • Zero performance overhead β€” the priceBox mixin short-circuits immediately

Technical Architecture

File Structure

M2-DiscountBadge/                          ← repo root
β”œβ”€β”€ registration.php
β”œβ”€β”€ composer.json
β”œβ”€β”€ etc/
β”‚   β”œβ”€β”€ module.xml
β”‚   β”œβ”€β”€ config.xml                         # Default values
β”‚   β”œβ”€β”€ acl.xml                            # ACL resource
β”‚   └── adminhtml/
β”‚       └── system.xml                     # Admin configuration
β”œβ”€β”€ Model/
β”‚   β”œβ”€β”€ Config.php                         # System config reader
β”‚   └── Config/Source/
β”‚       β”œβ”€β”€ BadgePosition.php              # Position options
β”‚       β”œβ”€β”€ BadgeStyle.php                 # Style options
β”‚       └── FontWeight.php                 # Font weight options
β”œβ”€β”€ ViewModel/
β”‚   └── DiscountBadge.php                  # Passes config to templates
β”œβ”€β”€ view/frontend/
β”‚   β”œβ”€β”€ layout/
β”‚   β”‚   └── default.xml                    # Injects config + CSS
β”‚   β”œβ”€β”€ templates/
β”‚   β”‚   β”œβ”€β”€ badge-config.phtml             # x-magento-init JSON config
β”‚   β”‚   └── custom-css.phtml               # Custom CSS injection
β”‚   β”œβ”€β”€ web/
β”‚   β”‚   β”œβ”€β”€ js/
β”‚   β”‚   β”‚   β”œβ”€β”€ badge-renderer.js          # Shared badge logic
β”‚   β”‚   β”‚   β”œβ”€β”€ discount-badge.js          # Init module (scans priceBoxes)
β”‚   β”‚   β”‚   └── price-box-mixin.js         # PriceBox widget mixin
β”‚   β”‚   └── css/
β”‚   β”‚       └── discount-badge.css         # Base structural styles
β”‚   └── requirejs-config.js                # Mixin registration
β”œβ”€β”€ i18n/
β”‚   β”œβ”€β”€ en_US.csv
β”‚   └── es_AR.csv
β”œβ”€β”€ README.md
β”œβ”€β”€ README.es.md
└── LICENSE

How It Works

  1. PHP side: ViewModel/DiscountBadge.php reads admin config and outputs it as a x-magento-init JSON block
  2. JS init: discount-badge.js stores config and scans existing priceBox widgets
  3. Mixin: price-box-mixin.js hooks into reloadPrice() to update badges on price changes
  4. Renderer: badge-renderer.js handles calculation, DOM creation, and placement

Performance

  • 100% client-side β€” no additional server requests
  • Compatible with Full Page Cache (FPC) and Varnish
  • No impact on TTFB
  • All blocks are cacheable
  • Config does not vary per customer session

CSS Classes

| Class | Description | |---|---| | .rollpix-discount-badge | Base class | | .rollpix-discount-badge--pdp | Product detail page context | | .rollpix-discount-badge--listing | Listing context | | .rollpix-discount-badge--inline | Inline with price | | .rollpix-discount-badge--over-image | Over product image | | .rollpix-discount-badge--below | Below price block | | .rollpix-discount-badge--filled | Filled style | | .rollpix-discount-badge--outline | Outline style | | .rollpix-discount-badge--pill | Pill style | | .rollpix-discount-badge--pill-outline | Pill outline style | | .rollpix-discount-badge--text-only | Text only style |

Manual Testing Guide

  1. Enable the module in Stores > Configuration > Rollpix > Discount Badge
  2. Create or find a product with a special price or catalog price rule
  3. Verify the badge appears on:
    • Category listing page
    • Product detail page
    • Search results
    • Related/upsell/crosssell widgets
  4. For a configurable product, change options and verify the badge updates
  5. Set minimum discount to a value above the product's discount and verify the badge disappears
  6. Test each position and style option
  7. Test custom CSS injection
  8. Disable the module and verify no badges appear

Uninstall

Via Composer

bin/magento module:disable Rollpix_DiscountBadge
composer remove rollpix/module-discount-badge
bin/magento setup:upgrade
bin/magento cache:flush

Manual

bin/magento module:disable Rollpix_DiscountBadge
rm -rf app/code/Rollpix/DiscountBadge
bin/magento setup:upgrade
bin/magento cache:flush

License

MIT

This content is fetched directly from the module's GitHub repository. We are not the authors of this content and take no responsibility for its accuracy, completeness, or any consequences arising from its use.

Back to All Modules