Add JavaScript Tag on severals pages via a Magento custom module + Back Office

Question

I'm trying for hours to create a Magento custom module which add a JavaScript Tag on only several pages of the website.

The Js script that I would add in my pages must allow to get back values from Input "Text" of specifics forms (Sign up, Login, ...)

First of all, I didn't found any "how to" or "guides" where it's explained how to specify the pages where we want add the Js Tag.

Then, I would like add an admin console to configure the module: - Select pages where the JS tag will be add - Specify the input's ID of the forms for the JS

At present, I've read the Magento's documentation (http://www.magentocommerce.com/knowledge-base/entry/magento-for-dev-part-1-introduction-to-magento) and tested their examples, so I know how to create a basic module, but I don't know how to create a module like it...

Everyone knows how can I do?

Thanks!

Answer 1

So to do this what you will need to do is create a module that does the following.

1. Has system configuration for storing your customizations to the js tag,
2. Has layout update that will allow you to add the js tag,

System Config

This really depends on what you need to store for this I will assume that a simple text field is enough.

You will need to add the following system.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <tabs>
        <stack translate="label" module="your_module">
            <label>Example For Stack Exchange</label>
            <sort_order>100</sort_order>
        </stack>
    </tabs>
    <sections>
        <stack translate="label" module="your_module">
            <label>Example Options</label>
            <tab>stack</tab>
            <sort_order>1000</sort_order>
            <show_in_default>1</show_in_default>
            <show_in_website>1</show_in_website>
            <show_in_store>1</show_in_store>

            <groups>
                <stack_group translate="label" module="your_module">
                    <label>Example Options</label>
                    <frontend_type>text</frontend_type>
                    <sort_order>1000</sort_order>
                    <show_in_default>1</show_in_default>
                    <show_in_website>1</show_in_website>
                    <show_in_store>1</show_in_store>

                    <fields>
                        <input translate="label">
                            <label>Your Input Field: </label>
                            <frontend_type>text</frontend_type>
                            <sort_order>20</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                        </input>
                    </fields>
                </stack_group>
            </groups>
        </stack>
    </sections>
</config>

You will also need an adminhtml.xml file

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <adminhtml>
        <acl>
            <resources>
                <all>
                    <title>Allow Everything</title>
                </all>
                <admin>
                    <children>
                        <system>
                            <children>
                                <config>
                                    <children>
                                        <stack>
                                            <title>Stack Example - All</title>
                                        </stack>
                                    </children>
                                </config>
                            </children>
                        </system>
                    </children>
                </admin>
            </resources>
        </acl>
    </adminhtml>
</config>

With these two file you will then get an option in the admin config for adding an input.

You can access this value with the following code: Mage::getStoreConfig('stack/stack_group/input');

Layout Update

When you want to add a layout to specif pages you will need a layout update file, this can be defined via the module's config.xml as follows.

<?xml version="1.0"?>
<config>
    <modules>
        <Stack_Example>
            <version>1.0.0</version>
        </Stack_Example>
    </modules>
    <frontend>
        <layout>
            <updates>
                <stack_example module="Stack_Example">
                    <file>stack_example.xml</file>
                </stack_example>
            </updates>
        </layout>
    </frontend>
</config>

Now in the file stack_example.xml under the layout you will be able to specify specific layout handles to add your template. For example to add this template to the bottom of the cms index page you would use the handle 'cms_index_index' and the reference 'before_body_end'

<?xml version="1.0"?>
<layout version="0.1.0">
    <cms_index_index>
        <reference name="before_body_end">
            <block type="core/template" name="your_stuff" template="path/to/your/template.phtml"/>
        </reference>
    </cms_index_index>
</layout>

Now that you have this you can simply create your template and in that template file have the js that you need plus using Mage::getStoreConfig('stack/stack_group/input'); you can get the information stored in the admin config.

Answer 2

Here follows a tutorial for you to do both in a specific place as everywhere

http://inchoo.net/ecommerce/magento/how-to-add-external-javascript-css-file-to-magento/