Magento-动态加载CSS和JS

Question

we want to load css and javascript files dynamically for the pages in our magento system. By reason of growing js and css file we want to split them in seperate files and load them for the current page. We use the CMS Advanced content manager for managing our page content. Cause we have something like contenttypes in the CMS, we thought to figure out which contenttype the current page has. Referring of the type we thought to load the css and js file by the name of the type (cause the typename is an alias and unique in the system). Cause i am not to deep in magento coding i have no clue where i should start.

But maybe there is another solution or a known solution to achieve what we want.

Answer 1

Have you tried using XML to load JS or CSS on particular content pages?

Here is an example of loading CSS & JS file.

Content Page => Design Tab => Custom Layout Update XML.

<reference name="head">
    <action method="addItem"><type>skin_css</type><name>css/your_css.css</name></action>
    <action method="addItem"><type>skin_js</type><name>js/your_js.js</name></action>
</reference>

Answer 2

You could create an extension that observes the 'layout load before' event. With some request params you could identify the pages where you want to include some css or js.

For Example:

app/code/local/Foo/Bar/etc/config.xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <Foo_Bar>
            <version>0.1.0</version>
        </Foo_Bar>
    </modules>
    <global>
        <models>
          <foo_bar>
            <class>Foo_Bar_Model</class>
          </foo_bar>
        </models>
    </global>
    <frontend>
        <events>
            <controller_action_layout_load_before>
                <observers>
                    <customer_is_logged_in_observer>
                        <class>foo_bar/observer</class>
                        <method>beforeLoadLayout</method>
                    </customer_is_logged_in_observer>
                </observers>
            </controller_action_layout_load_before>
        </events>
     </frontend>
</config>

app/code/local/Foo/Bar/Model/Observer.php

class Foo_Bar_Model_Observer
{
    public function beforeLoadLayout($observer)
    {   
        if(Mage::app()->getRequest()->getControllerName()=='page' && 
            Mage::app()->getRequest()->getRouteName()='cms')
        {
            $head=$observer->getEvent()->getLayout()->getBlock('head');
            $head->addItem('skin_js', 'js/foo.js');
            $head->addItem('skin_css', 'css/foo.css');
        }

    }
}

Answer 3

Just check out the module documentation, a dynamic layout is implemented. So you can add a specific layout for a certain content type:

acm for magento 1.x: (end of page) https://www.advancedcontentmanager.com/documentation/content/php-helper-methods-render-methods

acm for magento 2.x: https://www.advancedcontentmanager.com/documentation/m2/developers/dynamic-layout-handle