So, I have custom widget for Magento (like slideshow for products).
And want add custom CSS / Javascript to my widget.
I do not want show(load) CSS / JS file every time.
I want load JS/CSS ONLY when PAGE include The Custom Widget.
Thanks.
So, I have custom widget for Magento (like slideshow for products).
And want add custom CSS / Javascript to my widget.
I do not want show(load) CSS / JS file every time.
I want load JS/CSS ONLY when PAGE include The Custom Widget.
Thanks.
Share Improve this question asked Feb 15, 2013 at 9:13 AlexAlex 7771 gold badge11 silver badges18 bronze badges 2- 1 If there is a particular kind of page type where the widget is included you can add the js only in the concerned layout. Where would you show your widget ? – dagfr Commented Feb 15, 2013 at 9:29
- I want insert the widget on any page type. And want add custom JS/CSS only if widget is included on page. I not want edit layout XML for every type of page. So, I still in finding solutions for JS/CSS for Magento widget. But think that Magento, have not solutions for my ideas. :( – Alex Commented Mar 3, 2013 at 21:04
2 Answers
Reset to default 4This depends if you have added your widget as a widget instance (CMS -> Widgets) or have included it in the content area of a page, static block or email like so: {{widget type="blabla/carousel"}}
.
If you have included it as a widget instance, you can add your assets like so:
protected function _prepareLayout() {
if ($head = $this->getLayout()->getBlock('head')) {
$head->addCss('myfile.css');
}
return parent::_prepareLayout();
}
..in your block that implements Mage_Widget_Block_Interface
.
(see http://www.magentomerce./boards/viewthread/212110/)
AFAIK, it's impossible to add assets when you include the widget inline as a template directive. This is simply because the HTML head has already outputted it's HTML: The template directives (such as {{widget}}
or {{var}}
) are being noticed in the _toHtml stage of the block. Calling any method on a block that has already been rendered won't have any effect.
Also see the $processor->filter
call in the _toHtml
method in 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;
}
I know this question is fairly old, but in case there is anyone that is looking for a way to add CSS or javascript only when the magento widget is included(without requiring that it be a "widget instance" as in the answer given by Erfan) I would remend using a small ajax script in your phtml template file. If your design package does not use jQuery then your code may be different.
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();
});
});