如何在 Magento 中将 CSS 文件添加到 CUSTOM WIDGET？答案

【问题标题】：How can add CSS file to CUSTOM WIDGET in Magento?如何在 Magento 中将 CSS 文件添加到 CUSTOM WIDGET？
【发布时间】：2013-02-15 09:13:20
【问题描述】：

所以，我有 Magento 的 自定义小部件（如产品幻灯片）。

并希望将自定义 CSS / Javascript 添加到我的小部件。

我不想每次都显示（加载）CSS / JS 文件。

我只想在 PAGE 包含自定义小部件时加载 JS/CSS。

谢谢。

【问题讨论】：

如果有特定类型的页面类型包含小部件，您可以仅在相关布局中添加 js。你会在哪里展示你的小部件？
我想在任何页面类型上插入小部件。并且仅当页面上包含小部件时才希望添加自定义 JS/CSS。我不想为每种类型的页面编辑布局 XML。所以，我仍在为 Magento 小部件寻找 JS/CSS 的解决方案。但是认为Magento，对我的想法没有解决方案。 :(

标签： javascript css magento widget

【解决方案1】：

这取决于您是否已将小部件添加为小部件实例（CMS -> 小部件）或已将其包含在页面、静态块或电子邮件的内容区域中，如下所示：{{widget type="blabla/carousel"}}。

如果您已将其作为小部件实例包含在内，您可以像这样添加您的资产：

protected function _prepareLayout() {
    if ($head = $this->getLayout()->getBlock('head')) { 
        $head->addCss('myfile.css');
    }
    return parent::_prepareLayout();
}

..在实现Mage_Widget_Block_Interface 的块中。

（见http://www.magentocommerce.com/boards/viewthread/212110/）

AFAIK，当您将小部件内联作为模板指令包含时，不可能添加资产。这仅仅是因为 HTML 头已经输出了它的 HTML：模板指令（例如 {{widget}} 或 {{var}}）在块的 _toHtml 阶段被注意到。在已经渲染的块上调用任何方法都不会产生任何效果。

另见Mage_Cms_Block_Page中_toHtml方法中的$processor->filter调用

protected function _toHtml()
{
    /* @var $helper Mage_Cms_Helper_Data */
    $helper = Mage::helper('cms');
    $processor = $helper->getPageTemplateProcessor();
    $html = $processor->filter($this->getPage()->getContent());
    $html = $this->getMessagesBlock()->toHtml() . $html;
    return $html;
}

【讨论】：

【解决方案2】：

我知道这个问题已经相当老了，但万一有人在寻找添加 CSS 或 javascript 的方法，仅在包含 magento 小部件时（不需要它是答案中的“小部件实例”） Erfan 给出）我建议在你的 phtml 模板文件中使用一个小的 ajax 脚本。如果您的设计包不使用 jQuery，那么您的代码可能会有所不同。

jQuery(document).ready(function(){
jQuery.when(
    jQuery.ajax({
        type: "GET",
        url: "<?php echo $this->getSkinUrl('css/myWidget.css');?>",
        success: function(data){
            jQuery("head").append("<style>" + data + "</style>");
        },
        dataType: "html",
        cache: false,
    }),
    jQuery.ajax({
        type: "GET",
        url: "<?php echo $this->getSkinUrl('js/myWidget.js');?>",
        dataType: "script",
        cache: false,
    })

).then(function(){
        myWidget.setupFunction();
    });   
});

【讨论】：