Including JavaScript Conditionally on Magento Pages

Question

I have some JavaScript which I need to include only in the products page. How do I conditionally include such JavaScript and what file should I place the JavaScript code in for it to be conditionally included in the section of the html document?

Thanks.

You can do it server side, I think it's the other developers usually do. What, specifically, you want, conditional loading on the client side? And what is this condition (browser features, e.g.)? — Lucas Sampaio
– Lucas Sampaio, Commented Jun 18, 2013 at 19:30
No, I want conditional loading on the server side, so it is included on the products page but a different js and css is loaded on the home page. But I don't know what file contains the contents of <head> in app/design/frontend/foodesign/default/template . — Jason Posit
– Jason Posit, Commented Jun 18, 2013 at 19:33

Community · Accepted Answer · 2017-05-23 11:56:02Z

3

There are a dozen different ways you can do it (probably more). From what you are describing, you should probably be adding it via XML. There are specific tags in many of the XML layout files for specific pages.

The layout files are in app/design/frontend/foodesign/default/layout. In this directory, make a file called local.xml if it doesn't exist.

Now you need to find out the proper label for where you want your css/js to show.
Some examples below:

<catalog_category_default translate="label"> <!--Non-Anchor Category View-->

<catalog_category_layered translate="label"> <!--Anchor Category View-->

<catalog_product_view translate="label"> <!--Default Product View-->

<!--Product View for Specific Types-->
<PRODUCT_TYPE_simple translate="label" module="catalog">
<PRODUCT_TYPE_configurable translate="label" module="catalog">
<PRODUCT_TYPE_grouped translate="label" module="catalog">
<PRODUCT_TYPE_virtual translate="label" module="catalog">

To add to your HEAD via XML with predefined methods, it depends on where you are putting your js/css files in your directory.

If it is in your skin/frontend/foodesign/js folder:

<reference name="head">
    <action method="addItem">
        <type>skin_js</type><name>js/yourJsName.js</name><params/><if/>
    </action>
</reference>

If it is in the root/js folder:

<reference name="head">
    <action method="addJs"><script>yourJsName.js</script></action>
</reference>

...and lastly for css (put in your skin/frontend/foodesign/css folder):

<reference name="head">
    <action method="addCss"><stylesheet>css/yourCssName.css</stylesheet></action>
</reference>

So your local.xml could look like this:

<?xml version="1.0"?>

<layout version="0.1.0">

    <catalog_product_view translate="label">
        <reference name="head">
            <action method="addItem">
                <type>skin_js</type><name>js/yourJsName.js</name><params/><if/>
            </action>
            <action method="addCss"><stylesheet>css/yourCssName.css</stylesheet></action>
        </reference>
    </catalog_product_view>

</layout>

I believe this method really only works on the head section, if you're interested in adding js to other blocks, I'll refer you over to another question I answered:

How to add Javascript files in body part (not header) through layout xml files in magento

Let me know if that works for you.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Jun 18, 2013 at 23:45

Jason

1,9621 gold badge14 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Posit Over a year ago

Jason, Great Answer! You just left me wondering, where can I find a list of <type> values for the "addItem" method. What are some other types besides javascript and css and what are the values that correspond? Is there a full list somewhere?

Jason Over a year ago

The action methods refer to the associated class used for that block. Hence, the addItem() method is in app/code/core/mage/page/html/head.php. The available options are "js", "js_css", "skin_js", "skin_css" and "rss". The methods addJs() and addCss() are shortcut methods to addItem('js', 'name') and addItem('skin_css', 'name') respectively. Hope this helps you get an idea of how the layout system works.

Collectives™ on Stack Overflow

Including JavaScript Conditionally on Magento Pages

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related