A Magento 2 store owner frequently needs to customize product options, add-to-cart behavior, and mini-cart updates. Many of these frontend features are powered by native jQuery widgets.
Rather than rewriting these components from scratch, Magento 2 provides a robust way to extend existing jQuery widgets. This approach directly allows you to inject custom logic without overriding core files or breaking default features.
Let’s look at a practical use case in this blog: Adding a custom alert message when a product is added to the cart.
By default, Magento adds products to the cart silently. In this example, we will show you how to extend the existing widget to display a ‘Product added successfully!’ message. Instead of replacing the entire add-to-cart logic.
Steps to Extend an Existing jQuery Widget in Magento 2
Step 1: Create the Mixin File
First, create a JavaScript file in your theme. It is best practice to name it with a -mixin suffix so other developers know exactly what it does.
define(['jquery'], function ($) {
'use strict';
return function (targetWidget) {
// We use $.widget to redefine the existing widget logic
$.widget('mage.catalogAddToCart', targetWidget, {
/**
* Overriding the submitForm function
* @param {jQuery} form
*/
submitForm: function (form) {
// 1. Call the original core logic first
this._super(form);
// 2. Add your custom logic here
console.log('Custom logic executed after Add to Cart!');
alert('Product added successfully!');
}
});
return $.mage.catalogAddToCart;
};
});
Step 2: Register the Mixin via RequireJS
Magento doesn’t know about your new file yet. You must tell the RequireJS configuration to “inject” your mixin whenever the core catalog-add-to-cart file is loaded.
Path: app/design/frontend/[Vendor]/[theme]/requirejs-config.js
define([
'jquery',
'Magento_Catalog/js/catalog-add-to-cart'
], function ($) {
'use strict';
$.widget('custom.customAddToCart', $.mage.catalogAddToCart, {
submitForm: function (form) {
this._super(form);
// Custom logic after add to cart
alert('Product added successfully!');
}
});
return $.custom.customAddToCart;
});
Step 3: Apply and Test
Because Magento merges and minifies JavaScript, you need to clear the “processed” files for your changes to take effect. Run the following commands in your terminal:
- Clear the cache: php bin/magento cache:clean
- Clear static files: rm -rf pub/static/frontend/[Vendor]/[theme] (Optional but recommended for JS changes)
- Deploy content: php bin/magento setup:static-content:deploy -f
Now, when a user clicks Add to Cart, your custom alert will appear.
Besides this custom alert message, you can add a custom design as per your choice – you can refer to the sample design from the screenshot below:
Extending an existing jQuery widget in Magento 2 is a clean, upgrade-safe, and efficient way to customize frontend behavior.
Instead of rewriting Magento’s core logic, you can simply hook into existing widgets and enhance them. Whether it’s improving UX, adding alerts, or customizing checkout flows, this approach gives you full flexibility with minimal risk.
