How to Override Magento 2 jQuery Widget

No Comments

Follow this steps for override Magento 2 jQuery Widget

If we want to add custom logic in Magento 2 core JQuery widget then first create simple module with required modules files.

1.) Define the sequence in module.xml file which module widget you want to customize for example here we take Magento_Catalog module

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_ModuleName" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config> 

2.) Create requirejs-config.js file in view/frontend directory with code:

var config = {
    map: {
        '*': {
            gallery: 'Vendor_ModuleName/js/galllery'
        }
    }
};

3.) Finally add gallery.js file in view/frontend/web/js directory with:

define([
    'jquery',
    'jquery/ui',
    'Magento_Catalog/js/gallery'
], function($){
 
    $.widget('custom.gallery', $.mage.gallery, {
        // the code you want to override
    });
 
    return $.custom.gallery;
});

Now, open Command line in root folder of Magento and run the below commands.

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy en_US 
php bin/magento c:f
php bin/magento c:c

For More Information About Magento 2 jQuery Widget Contact to Magento Services

About us and this blog

We are a digital magento 2  development agency with a focus on helping our customers achieve great results across several key areas.

More from our blog

See all posts

Leave a Comment