How to put widget's javascript code in head section

From TomatoCMS Documentation

Jump to: navigation, search

Contents

What's Problem

In TomatoCMS, the default layout looks like: 

<head>
   ...
   <?php echo $this->headScript(); ?>
   ...
</head>
<body>
   ...
   <?php echo $this->layoutLoader(); ?>
   ...
</body>

The $this->layoutLoader() call will renders all widgets and scripts associated with current route (page) and it comes after this->headScript() call.
Therefore, all javascript files/scripts in widgets will be rendered in the body section, and in order to improve the page load time, TomatoCMS puts all scripts at the bottom of page.

In special case, user want to put the widget script into head section.
So, the question is how to implement it.

How to implement

Step 1: Use placeholder view helper to capture script

In the show.phtml file of widget directory, we recommend you to use the following snippet to render the javascript code: 

<?php $this->headScript()->captureStart(); ?>
... Your Javascript code go here ...
<?php $this->headScript()->captureEnd(); ?>

In this case, the headScript view helper put all scripts in a container named Zend_View_Helper_HeadScript.
I will use placeholder view helper to capture our script and put the content in a container named My_Widget_Name: 

<?php $this->placeholder('My_Widget_Name')->captureStart(); ?>
<script type="text/javascript">
... script go here ...
</script>
<?php $this->placeholder('My_Widget_Name')->captureEnd(); ?>

Step 2: Create a plugin to insert the placeholder content into head section

  • First, create a plugin directory: /application/plugins/placeholder
  • Next, create a plugin file named Plugin.php 
class Plugins_PlaceHolder_Plugin extends Tomato_Controller_Plugin
{
   public function dispatchLoopShutdown()
   {
      ... Our code go here ...
   }   
}

In dispatchLoopShutdown method, put the following code: 

if ($this->getRequest()->isXmlHttpRequest()) {
   return;
}
 
// Get the view instance
$viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');
$view = $viewRenderer->view;
 
// Get content captured by My_Widget_Name place holder
$script = $view->placeholder('My_Widget_Name');
 
// Put the content into head section
$response = $this->getResponse();
$response->setBody(preg_replace('/(.*<\/head>)/i', $script.'$1', $response->getBody()));

Step 3: Install plugin

  • You can create about.xml file inside our plugin directory 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plugin SYSTEM "http://schemas.tomatocms.com/dtd/plugin_about.dtd">
<plugin>
   <name>PlaceHolder</name>
   <module></module>
   <description>Put my widget scripts into head section</description>
   <thumbnail></thumbnail>
   <author>TomatoCMS Core Team</author>
   <email>core@tomatocms.com</email>
   <version>2.0.7</version>
   <license>free</license>
</plugin>
  • In the back-end section, goto System > Extend > Plugin menu, look for our plugin and click Install button.

Back to the page on front-end that uses our widget, view the page source, and you will see our scripts has been inserted in the head section.

Retrieved from "http://docs.tomatocms.com/index.php/How_to_put_widget%27s_javascript_code_in_head_section"
Personal tools