簡體   English   中英

Magento-動態加載CSS和JS

[英]Magento - Load dynamically CSS and JS

我們想要為magento系統中的頁面動態加載CSS和javascript文件。 由於js和css文件的增加,我們希望將它們拆分為單獨的文件,並為當前頁面加載它們。 我們使用CMS Advanced內容管理器來管理頁面內容。 因為我們在CMS中有類似contenttype的內容,所以我們想找出當前頁面具有哪種contenttype。 引用該類型時,我們認為是通過該類型的名稱來加載css和js文件的(因為typename是別名,在系統中是唯一的)。 因為我對magento編碼不了解,所以我不知道應該從哪里開始。

但是也許有另一種解決方案或已知的解決方案可以實現我們想要的目標。

您是否嘗試過使用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>

您可以創建一個擴展來觀察“布局加載之前”事件。 使用一些請求參數,您可以標識要包含某些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');
        }

    }
}

只需查看模塊文檔,即可實現動態布局。 因此,您可以為特定的內容類型添加特定的布局:

magento 1.x的ACM:(頁面末尾) https://www.advancedcontentmanager.com/documentation/content/php-helper-methods-render-methods

適用於magento 2.x的ACM: https ://www.advancedcontentmanager.com/documentation/m2/developers/dynamic-layout-handle

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM