Magento - 动态加载CSS和JS

时间:2016-02-15 15:30:23

标签: javascript css magento

我们想为我们的magento系统中的页面动态加载css和javascript文件。由于增长了js和css文件,我们希望将它们分成单独的文件并加载它们以用于当前页面。我们使用CMS Advanced content manager来管理我们的网页内容。因为我们在CMS中有类似contenttypes的东西,我们想要弄清楚当前页面有哪些内容类型。引用我们认为通过类型名称加载css和js文件的类型(因为typename是别名并且在系统中是唯一的)。因为我不是深入magento编码我不知道我应该从哪里开始。

但也许还有另一种解决方案或已知的解决方案来实现我们想要的目标。

3 个答案:

答案 0 :(得分:1)

您是否尝试过使用XML在特定内容页面上加载JS或CSS?

以下是加载CSS&的示例JS文件。

内容页面=>设计标签=>自定义布局更新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>

答案 1 :(得分:0)

您可以创建一个扩展程序,以便在&#39;之前观察布局负载。事件。 通过一些请求参数,您可以识别要包含某些css或js的页面。

例如:

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');
        }

    }
}

答案 2 :(得分:0)

只需查看模块文档,即可实现动态布局。因此,您可以为特定内容类型添加特定布局:

acgent for magento 1.x :(页尾)https://www.advancedcontentmanager.com/documentation/content/php-helper-methods-render-methods

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