Magento: Remove JS Files Added by Extension Programmatically

headjavascripttheme

I have a 3rd party extension adding JS in via an observer:

<?php
class Anowave_Owl_Model_Observer extends Mage_Core_Model_Abstract
{
    public function dispatch(Varien_Event_Observer $observer)
    {
        if (Mage::app()->getLayout()->getBlock('owl') && Mage::app()->getLayout()->getBlock('owl')->getSlider())
        {
            $format = Mage::app()->getLayout()->getBlock('owl')->getFormat();

            if ($format instanceof Anowave_Owl_Block_Format)
            {
                $format->addCss()->addJs();
            }
        }

        return $this;
    }
}

Where addJs is defined in a block class as:

public function addJs()
{
    $script = 'js/jquery-1.11.0.min.js';
    Mage::app()->getLayout()->getBlock('head')->addItem('skin_js', $script);
 }

Rather than hack the module, I'm trying to remove the loaded jquery via removeItem i.e.

   <default>
     <reference name="head">
        <action method="removeItem">
            <type>skin_js</type>
            <name>js/jquery-1.11.0.min.js</name>
        </action>
    </reference>
   </default>

In local.xml. But it does not work.
I know that my syntax and pathing are correct because I can unload/remove other JS files this way in the same folder (ones which are specified by their extension's layout XML instead).
I thought local.xml was processed after all other layout registration steps, but I guess not (?)
So I don't think removeItem in layout is an option.
I'd be willing to use

        Mage::app()->getLayout()->getBlock('head')->removeItem('skin_js', $script);

In a custom module, but how would i know that all the previous addJS() processing has finished executing?

Any ideas or solutions appreciated!

Best Answer

I don't know what event is observed in the original extension by Anowave_Owl_Model_Observer::dispatch but I assume is some event dispatched after the layout is loaded and before it is rendered.
That's why you cannot remove via layout files the file added via observer.
But that's not important.
You can use the same event in one of your modules, you just have to make sure your observer is executed after the one in the extension.
This can be achieved simply by making your extension depend on the original one.

So you need something like this:

app/etc/modules/[Namespace]_[Module].xml - the declaration file

<?xml version="1.0"?>
<config>
    <modules>
        <[Namespace]_[Module]>
            <active>true</active>
            <codePool>local</codePool>
            <depends>
                <Anowave_Owl />
            </depends>
        </[Namespace]_[Module]>
    </modules>
</config>

app/code/local/[Namespace]/[Module]/etc/config.xml - the configuration file

<?xml version="1.0"?>
<config>
    ....
    <frontend><!-- or global depending on observed from the original extension -->
        <events>
            <event_name_goes_here>
                <observers>
                     <[namespace]_[module]>
                          <class>[module]/observer</class>
                          <method>removeScripts</method>
                     </[namespace]_[module]>
                </observers>
            </event_name_goes_here>
        </events>
    </frontend><!-- or global -->
</config>

app/code/local/[Namespace]/[Module]/Model/Observer.php - the observer

<?php
class [Namespace]_[Module]_Model_Observer
{
    public function removeScripts()
    {
        ....
        Mage::app()->getLayout()->getBlock('head')->removeItem('skin_js', $script);
    }
}

Related Solutions

Head – How to Add Custom CSS and JS Files After Certain Default Ones

By researching, I've found some answers and tutorials that suggest me to hack to Core code. Eg: add some additional functions like addItemAfter($after, ...), addItemFirst(...)

But I think it's not ideal solution.

By looking into Mage_Page_Block_Html_Head class, function getCssJsHtml, I found this line:

$lines[$if][$item['type']][$params][$item['name']] = $item['name'];

It means, css/js files are grouped by its condition. Files with same condition are added into the same group.

So, I think, you can use file's condition like a hook.

According to MSDN document, you can use some conditional comments like this:

Or if you want it to always return true, just use 

Let's go.

First, declare the hooks.

Create a blank js file (or css file). Eg: skin/frontend/your_package/your_theme/js/blank.js. Leave it empty content.
Open app/design/frontend/your_package/your_theme/layout/page.xml
In default handle (<default translate="label" module="page">), block head, seek to last current js files (or css files if you want), add:

<action method="addItem"> <type>skin_js</type> <name>js/blank.js</name> <params/> <if><![CDATA[]]></if> </action>

You must to specify a file name, because it's just a hook, use a blank file, so it doesn't affect to performance, especially when you turn on Merge mode.

Second, and last, use the hooks.

In your specific handle, eg. catalog_category_default (Category page), add js/css file with the same condition you just declared.

<reference name="head"> <action method="addItem"> <type>skin_js</type> <name>js/your.custom.js.file.js</name> <params/> <if><![CDATA[]]></if> </action> </reference>

Now, load a category page and view it's source. You see:

<!--[if true]><!-->
<script type="text/javascript" src="http://example.com/skin/frontend/your_package/your_theme/js/blank.js"></script>
<script type="text/javascript" src="http://example.com/skin/frontend/your_package/your_theme/js/your.custom.js.file.js"></script>
<!--<![endif]-->

Your custom file is loaded in the same condition with the hook. Because the hook is at bottom of default files, so your custom file is at bottom as well.

It's done.

P/s: I don't know if it's valid, but actually, you can use any condition, like this , 

So, whenever you want to add js/css files into a desire place, just go to the root page (or parent page), declare a hook, then use it in custom handle. It's simple.

Magento 1.9 – How to Change Theme Programmatically for Specific Controller

If you want to set specific theme for all action of controller you can add in controller

protected function _construct(){
   parent::_construct();
   Mage::getDesign()->setArea('frontend') //Area (frontend|adminhtml)
    ->setPackageName('packagename') //Name of Package
    ->setTheme('default');// Name of theme
}

If you want to set for specific action then add below code at startup of action

 Mage::getDesign()->setArea('frontend') //Area (frontend|adminhtml)
        ->setPackageName('packagename') //Name of Package
        ->setTheme('default');// Name of theme

Check following example:

public function loginAction()
{
   if ($this->_getSession()->isLoggedIn()) {
        $this->_redirect('*/*/');
        return;
    }

   Mage::getDesign()->setArea('frontend') //Area (frontend|adminhtml)
    ->setPackageName('packagename') //Name of Package
    ->setTheme('default');// Name of theme

   $this->getResponse()->setHeader('Login-Required', 'true');
    $this->loadLayout();
    $this->_initLayoutMessages('customer/session');
    $this->_initLayoutMessages('catalog/session');
    $this->renderLayout();
}

Best Answer

Related Solutions

Head – How to Add Custom CSS and JS Files After Certain Default Ones

Magento 1.9 – How to Change Theme Programmatically for Specific Controller

Related Topic