Magento 1 - add inline javascript to product page via layout update xml code

12,121

Solution 1

It's cleaner to load the javascript from file. You do not necessarily need all that blocks but can do it like:

<default translate="label" module="page">   
    <reference name="head">
        <action method="addJs"><script>path/to/script.js</script></action>
    </reference>
</default>

Path is relative path from js folder in magento root.

To add javascript to xml directly (which I do not recommend) you can use CDATA, like:

<reference name="head">
    <block type="core/text" name="your.block.name">
        <action method="setText">
            <text><![CDATA[<script type="text/javascript">alert('hello');</script>]]></text>
        </action>
    </block>
</reference>

Solution 2

my solution was to extend the head block:

<?php
class Company_Modulename_Block_Html_Head extends Mage_Page_Block_Html_Head {
    public function addInlineJs($name)
    {
        $this->addItem('inlinejs', $name);
        return $this;
    }

    public function getCssJsHtml()
    {
        $html = parent::getCssJsHtml();

        foreach ($this->_data['items'] as $item) {
            if($item['type']=='inlinejs') {
                $html .= sprintf('<script type="text/javascript">%s</script>' . "\n", $item['name']);
            }
        }

        return $html;
    }
}

now i can use it like that

<reference name="head">
       <action method="addInlineJs"><script>alert('cool');</script></action>
</reference>
Share:
12,121
wutzebaer
Author by

wutzebaer

Updated on June 24, 2022

Comments

  • wutzebaer
    wutzebaer almost 2 years

    Hi i want to use google analytics's AB-Testing engine. Therefore i have to add a javascript-snippet to single product pages.

    My intend was to add it in the description or short-description. It is working, but it is insufficient, because the script makes a redirect, which means the page loads half and then is redirected.

    Google says i should add the script in the head-tag. Is it possible to insert the script as "custom layout update" here: enter image description here

    i could imagine something like

    <default translate="label" module="page">
            <label>All Pages</label>
            <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
                <block type="page/html_head" name="head" as="head">
                    <action method="addJs"><script>alert('hello')</script></action>
                </block>
            </block>
    </default>