Magento 1.8 – Adding CSS and JS to Using Module Layout.xml

cssjavascriptlayoutmagento-1.8module

Synopsis

I would like to add a block to my grouped product view and my simple product view. This block will have some nice tooltips for hover states, i'm using a small library with one jquery plugin and one css stylesheet.

I wish to include these two resources in the of magento on only these pages.

Notes

  • I am running a custom theme;
  • Caching is disabled; and
  • My files are inside the /js directory;

Thus far…

Nevertheless I knew one way was to use layout.xml in my module, at first this didn't work so I thought maybe I needed additional configuration inside my config.xml to tell Magento about my layout requirements – this too didn't work.

By didn't work what I mean is, my assets weren't loaded.

Please find the attached source below.

app/code/local/Vendor/Rating/etc/layout.xml

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </default>
</layout>

app/code/local/Vendor/Rating/etc/config.xml

<?xml version="1.0"?>
<config>

    ...

    <frontend>
        <layout>
            <updates>
                <vendor_rating>
                    <file>layout.xml</file>
                </vendor_rating>
            </updates>
        </layout>
    </frontend>

    ...

</config>

Best Answer

First, your layout file should be placed in app/design/frontend/{interface}/{theme}/layout/.
Second. If you want to add the css and js files only in the grouped and simple product pages don't use the <default> layout handle.
Make your layout look like this:

<?xml version="1.0"?>
<layout>
    <my_handle><!-- declare a custom handle so you won't duplicate the code -->
        <reference name="head">
            <action method="addJs">
                <script>vendor/qtip/jquery.qtip.min.js</script>
            </action>
            <action method="addCss">
                <stylesheet>vendor/qtip/jquery.qtip.min.css</stylesheet>
            </action>
        </reference>
    </my_handle>
    <PRODUCT_TYPE_simple><!-- layout handle for simple products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_simple>
    <PRODUCT_TYPE_grouped><!-- layout handle for grouped products -->
        <update handle="my_handle" /> <!-- include the handle you declared above -->
    </PRODUCT_TYPE_grouped>
</layout>
Related Topic