I'm trying to add the Google Maps Javascript API to my Magento module.
The problem I'm having is that the core/text block that I am including, that contains the external Javascript inclusion tag, only ever appears after all of the addJs actions.
This means the script I have in pvtl_stores.js that targets the google object doesn't work as the google object hasn't been initialized yet.
Here is my local.xml file:
<layout>
<default>
<reference name="head">
<block type="core/text" name="google.maps" before="root">
<action method="setText">
<text><![CDATA[<script src="//maps.googleapis.com/maps/api/js"></script>]]></text>
</action>
</block>
<action method="addItem">
<type>skin_js</type>
<name>js/pvtl_stores.js</name>
</action>
</reference>
</default>
</layout>
Is there a way to have the core/text block load before the addJs actions?
By the way, if it isn't obvious by the question, I'm new to Magento programming!
1 Answer 1
I had the same problem. My solution (I inspired here - how to rewrite head.phtml in magento
rewrite <head> in config.xml
<config>
<global>
<blocks>
<page>
<rewrite>
<html_head>Namespace_Modulename_Block_Html_Head</html_head>
</rewrite>
</page>
</blocks>
</global>
</config>
create file Head.php in your Namespace\Modulename\Blocks\Html directory
with similiar content
class NameSpace_Modulename_Block_Html_Head extends Mage_Page_Block_Html_Head
{
protected function _construct()
{
$this->setTemplate('modulename/html/head.phtml');
}
public function getCssJsHtmlBefore() {
return '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>';
}
}
and create file head.phtml in app/design/frontend/default/template/modulename/html/ directory
<meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<title><?php echo $this->getTitle() ?></title>
<meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<link rel="icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>
<![endif]-->
<!-- --------------calls function getCssJsHtmlBefore that completes external scripts before local scripts-->
<?php echo $this->getCssJsHtmlBefore() ?>
<!-- --------------the rest is the same as app/design/frontend/base/default/template/page/html/head.phtml-->
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>
(replace Namespace and Modulename/modulename with your values)