9

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>
Improve this question

4 Answers 4

Reset to default
16

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>
Improve this answer
2
  • Thank you very much, this makes a lot of sense. I presume since my config.xml defines the name of the layout xml file I can call this anything I wanted?
    – Ash
    Commented Dec 13, 2013 at 10:27
  • @Takingsides. Yes. The name can be whatever you want.
    – Marius ♦
    Commented Dec 13, 2013 at 11:58
4

As this has not been pointed out clearly enough yet:

Directories

Layout XML files for a custom module should be theme independent and thus placed into

app/design/frontend/base/default/layout

You can override any of these XML files in your custom theme, but in most cases, it is better to have an additional theme specific layout file that adds changes. More info: What is the correct way/approach to modify a Magento template?

File names

Note that those files are sometimes referred to as "layout.xml files", but layout.xml is actually not a file name you would usually find in any Magento code. Your code works if you put your layout.xml file in the right location (see above), but convention is to use the lower case module name:

rating.xml

or better

vendor_rating.xml

Remember that the layout XML files from all modules are in one single directory, so the name must be unique!

Improve this answer
1

Your layout.xml should go inside

app/design/frontend/[YOUR CUSTOM PACKAGE]/[YOUR CUSTOM THEME]/layout/

Improve this answer
0

As stated above for your particular case you should not use it inside <default> tags but for example purposes you can add css files that reside in your root magento /js directory by this way in your app/design/frontend/vendor/theme/layout/local.xml for example:

<?xml version="1.0"?>

<layout version="0.1.0">
    <default>
        <reference name="head">
             <action method="addItem">
                <type>js_css</type>
                <stylesheet>css/styles.css</stylesheet>
                <params>media="all"</params>
            </action>
        </reference>
    </default>
</layout>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.