CODEWITHSUNDEEP
phpmagento
grisevg
grisevg

Reputation: 250

Include JS and CSS to selected pages in magento layout

I need help with optimizing my layout xml and getting rid of repetitions . In some pages of my module I include js files, and I include css in all of them. Here is the content of my modules layout xml:

<layout version="0.1.0">
<catalog_product_view>
    <reference name="head">
        <!-- jQuery(compatibility mode) and jQuery UI -->
        <action method="addJs"><script>jquery/jquery-1.6.1.js</script></action>
        <action method="addJs"><script>jquery/jquery-ui-1.8.13.js</script></action>
        <action method="addCss"><script>css/ui_themes.1.8.13/smoothness/jquery-ui.css</script></action>
        <!-- Other Libraries -->
        <action method="addJs"><script>myreviews/quickpager.jquery.js</script></action>
        <!-- Custom Libraries -->
        <action method="addJs"><script>myreviews/functions.js</script></action>
        <action method="addJs"><script>myreviews/popup.js</script></action>
        <action method="addCss"><script>css/myreviews.css</script></action>
    </reference>
    <reference name="content">
        <block type="myreviews/view" name="myreviews.view" template="myreviews/view.phtml" />
    </reference>
</catalog_product_view>
<myreviews_form_additional>
    <reference name="head">
        <!-- jQuery(compatibility mode) and jQuery UI -->
        <action method="addJs"><script>jquery/jquery-1.6.1.js</script></action>
        <action method="addJs"><script>jquery/jquery-ui-1.8.13.js</script></action>
        <!-- Custom Libraries -->
        <action method="addCss"><script>css/myreviews.css</script></action>
    </reference>
    <reference name="content">
        <block type="myreviews/form" name="myreviews.form_additional" template="myreviews/form_additional.phtml" />
    </reference>
</myreviews_form_additional>
<myreviews_form_confirm>
    <reference name="head">
        <action method="addCss"><script>css/myreviews.css</script></action>
    </reference>
    <reference name="content">
        <block type="myreviews/form" name="myreviews.form_confirm" template="myreviews/form_confirm.phtml" />
    </reference>
</myreviews_form_confirm>

It's all working but is there a way to not repeat the same peaces of head reference? Maybe there is a way to write all js and css inclusion is separate handle and make it execute on my pages?

Thanks.

Upvotes: 3

Views: 3869

Answers (1)

demonkoryu
demonkoryu

Reputation: 1257

Yup, handles are the way to go. An example:

Define this somewhere in a layout file:

...
<myreviews_form_base translate="label">
    <label>Base layout handle for MyReviews</label>
    <reference name="head">
       <action method="addJs"><script>jquery/jquery-1.6.1.js</script></action>
       <action method="addJs"><script>jquery/jquery-ui-1.8.13.js</script></action>
       <action method="addCss"><script>css/myreviews.css</script></action>
   </reference>
</myreviews_form_base>

Then you can use this handle in appropriate places:

...
<catalog_product_view>
    <update handle="myreviews_form_base"/>
    ...other stuff...
</catalog_product_view>

This will apply all the actions contained in the myreviews_form_base handle to the catalog_product_view handle.

Upvotes: 6

Related Questions