如何将CSS文件添加到Magento中的CUSTOM WIDGET？

问题描述：

所以，我有自定义部件为Magento的（如幻灯片产品）。如何将CSS文件添加到Magento中的CUSTOM WIDGET？

而且要添加自定义CSS /JavaScript的我的小部件。

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

我想加载JS/CSS只有当PAGE包括自定义的Widget。

感谢。

如果存在包含小部件的特定种类的页面类型，则只能在相关布局中添加js。你会在哪里显示你的部件？ – dagfr 2013-02-15 09:29:06

我想在任何页面类型上插入小部件。并希望仅在页面上包含小部件时才添加自定义JS/CSS。我不想为每种类型的页面编辑布局XML。因此，我仍然在为Magento小部件寻找JS/CSS解决方案。但是认为Magento对我的想法没有解决方案。 :( – Magefast 2013-03-03 21:04:12

答

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

如果你已经包括它作为一个小部件实例，您可以将您的资产，像这样：

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

..in您块实现Mage_Widget_Block_Interface。

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

AFAIK，这是不可能的，当你包括部件直列作为模板指令来增加资产。这很简单，因为HTML头已经输出它的HTML：模板指令（如{{widget}}或{{var}}）在块的_toHtml阶段被发现。调用已经渲染的块上的任何方法都不会产生任何影响。

也看到_toHtml方法$processor->filter呼叫Mage_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; 
}

答

我知道这个问题是相当老，但如果有任何人正在寻找一种方式来添加CSS或JavaScript只有当Magento的窗口小部件（无需要求它是一个“小部件实例”，如由尔法恩给出的答案）我会建议你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(); 
    }); 
});

如何将CSS文件添加到Magento中的CUSTOM WIDGET？

相关推荐