2

I need to remove modal.js and it's related files all over the website. It is available in vendor directory and I need to remove it from DOM.

I found similar question, but no one answered it: How to remove modal.js from all pages in magento 2.2

I have also tried remove tag and add modal related js file names in it but it didn't work for me

1
+50

UI Modal is a global UI component and it is using on-demand (it means you cannot remove it with XML structs like <remove src="modal.js"/> or something similar).

It's not only using on the frontend, but it is also using widely in adminhtml as well. For e.g:

src/vendor/magento/module-catalog/view/adminhtml/templates/catalog/category/tree.phtml

src/vendor/magento/module-catalog/view/adminhtml/templates/catalog/category/tree.phtml

It is a part of Magento Minicart (Cart Sidebar)

src/vendor/magento/module-checkout/view/frontend/web/template/sidebar.html

src/vendor/magento/module-checkout/view/frontend/web/template/sidebar.html

However, if you don't want to use the authentication popup functionality (login popup in Checkout page). You can try to remove that block in XML by using this

<referenceBlock name="authentication-popup" remove="true"/>

Completely removing Magento_Ui/js/modal/modal is impossible in Magento 2! It will break a lot of functionalities for sure. Of course, in theory, you still can disable the whole functionality of modal UI with a JS mixin like this:

/**
 * StackOverflow No Modal :(
 *
 * @category  Mage
 *
 * @author    Toan Nguyen <https://github.com/nntoan>
 */
define([
    'jquery',
    'uiRegistry',
    'mage/utils/wrapper',
    'mage/validation'
], function ($, registry, wrapper) {
    'use strict';

    return function (modal) {

        modal.prototype._create = wrapper.wrap(modal.prototype._create, function (original) {
            return null;
        });

        return modal;
    };
});

If I was misunderstanding you, feel free to leave a comment :)

  • Wow! Your answer is very helpful for me to understand modal js in Magento. – Shoaib Munir Feb 11 at 4:29
  • 1
    @ShoaibMunir You're welcome, I suggest you take a look into the Magento DevDocs, it's really really helpful and it's improving by the time. For e.g: devdocs.magento.com/guides/v2.3/… – Toan Nguyen Feb 11 at 8:51
1

To remove the static resources, linked in a page , make a change similar to the following in a theme extending
app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
        <!-- Remove local resources -->
        <remove src="css/styles-m.css" />
        <remove src="my-js.js"/>
        <remove src="Magento_Catalog::js/compare.js" />

    <!-- Remove external resources -->
        <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
        <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
        <remove src="http://fonts.googleapis.com/css?family=Montserrat" /> 
   </head>
</page>

Reference: Remove static resources

  • I really appreciate you took time to answer my question. Thanks! – Shoaib Munir Feb 11 at 4:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.