Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 504
wutzebaer Avatar asked May 28 '14 08:05

wutzebaer


People also ask

Is it possible to include custom JavaScript in Magento 2?

Magento 2 allows to connect custom scripts for the entire site, certain pages, or even for specified blocks and parts of a page. What options exist to include custom JavaScript on a page? What are the advantages and disadvantages of inline JavaScript? How can JavaScript be loaded asynchronously on a page?

What is the content of product detail page in Magento 2?

Content on the page is not comes from a single phtml files, Magento 2 uses xml and phtml files to represent the data on page. For product detail page you check the file catalog_product_view.xml in theme and modules.

What are the best tools for building a Magento 2 website?

They are a great way to stand out among your competitors and add individuality to your shop. JavaScript is considered the best tool for including such elements. Magento 2 allows to connect custom scripts for the entire site, certain pages, or even for specified blocks and parts of a page.

How to track the content of a file in Magento?

4) To track the content of file there is a feature provided by the Magento called as "Template Path Hints". By enableing this feature you can get the path to each template that is used on the page. Template path hints can be enabled for either the storefront or the Admin. Once enabled in developer mode where do I find this feature? In amin panel?


2 Answers

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>
like image 75
Gerard de Visser Avatar answered Sep 20 '22 18:09

Gerard de Visser


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>
like image 32
wutzebaer Avatar answered Sep 22 '22 18:09

wutzebaer