2

I'm creating a custom widget of a form element which requires some CSS and Javascript. I plan on injecting the CSS and Javascript files into the <head> section of any pages which uses that widget.

So what I did was I used the addJs() method within the _prepareLayout() method in my Block class:

class TestSpace_MyWidget_Block_Widget_TestWidget extends Mage_Core_Block_Abstract implements Mage_Widget_Block_Interface
{
    public function _construct()
    {
        parent::_construct();
    }

    protected function _prepareLayout() {
        $this->getLayout()->getBlock('head')->addJs('mywidget/script.js');
        return parent::_prepareLayout();
    }

    public function _toHtml()
    {
        return "Testing widget";
    }
}

However, this doesn't seem to put that Javascript file into the <head> section.

I'm not putting my widget through the CMS or admin panel. My widget is placed in a few other templates (a phtml file) of the site like so:

$widget = $this->getLayout()->createBlock('mywidget/testwidget');
$widget->toHtml();

I'm not sure why this doesn't work since nothing should be rendered on the page yet at this point, right?

I'm aware that I can define my Javascript in a Layout file, but I'm avoiding doing so because that would mean I would either have to put that Javascript file in every single pages or hard code those pages that I want to include my JS file.

How can I include JS or CSS files in the <head> section only on pages which have my widget?

Improve this question
10
  • you can refer stackoverflow.com/questions/14891335/…
    – Ashish Madankar M2 Professiona
    Jun 15, 2016 at 14:03
  • @AshishMadankar I'm not putting my widget through the CMS or admin panel. I placed the widget in a phtml template file. So it's slightly different from the case in that link you had posted. I've updated my question to show how my widget was put into the template.
    – xenon
    Jun 15, 2016 at 23:16
  • If the head block is already rendered then it has no effect. You have to make sure the js is added to the head after loadLayout() has been called in the controller action and before you call renderLayout() in the same action. Refer to marius answer: magento.stackexchange.com/questions/4984/…
    – Adarsh Khatri
    Jun 15, 2016 at 23:28
  • @AdarshKhatri Is there a way to check if my widget was called between loadLayout() and renderLayout()?
    – xenon
    Jun 15, 2016 at 23:31
  • Can you add your full block code plez.
    – Adarsh Khatri
    Jun 15, 2016 at 23:32

1 Answer 1

Reset to default
0 
<link href="<?php echo $block->getAssetUrl('Webbazaar_CallCssDemo::css/style.css'); ?>" type="text/css" rel="stylesheet" />

namespace Webbazaar\CallCssDemo\Block;

namespace Webbazaar\CallCssDemo\Block;

Block Demo.php use Magento\Framework\App\Config\ScopeConfigInterface; class Demomanager extends \Magento\Framework\View\Element\Template { public function __construct( \Magento\Framework\View\Element\Template\Context $context, array $data = [] ) { parent::__construct($context, $data); }

//This function will be used to get the css/js file.
function getAssetUrl($asset) {
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $assetRepository = $objectManager->get('Magento\Framework\View\Asset\Repository');
    return $assetRepository->createAsset($asset)->getUrl();
}

}

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.