javascript - 如何在 Magento 中将 CSS 文件添加到 CUSTOM WIDGET？

Question

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

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

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

---

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

谢谢。

Answer 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：在块的 _toHtml 阶段会注意到模板指令（例如{{widget}}or ）。{{var}}在已经渲染的块上调用任何方法都不会产生任何效果。

另请参阅方法中的$processor->filter调用_toHtmlMage_Cms_Block_Page

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

Answer 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();
    });   
});