CDATA in my .xml is creating orphan /> closing tag in <body>
-
08-10-2020 - |
Question
When I made my child theme, I wanted to extend the local.xml of the parent theme, so instead of creating my own local.xml (which would replace the parent one instead of extending it), I created a customlocal.xml and added it via my theme.xml. However, my new CSS file is loading first before all other css files, which is really dumb for a parent-child theming scheme. I found this postthat explained that xml with if statements are loaded afterward, so I put an empty if statement in my xml:
<action method="addCss">
<stylesheet>css/mycustomcss.css</stylesheet>
<if><![CDATA[<!--[]><!-->]]></if>
</action>
This did work and load my CSS after the parent themes, but now I'm getting an orphan html closing tag right after my :
<body class="catalog-product-view" cz-shortcut-listen="true">/>
The /> renders as /> on the page, before the header and all other content. Does anyone know how I correctly use an empty CDATA to get my css to load in the expected position?
PS also, in my css link in the head, <!--[]=""
is being added in at the end:
<link rel="stylesheet" type="text/css" href="http://localhost/mylift/store/skin/frontend/custom/default/css/mycustomcss.css" <!--[]="">
and <!---->
is also showing up right before the closing tag of the
Solution
This is because the addItem
and addCss
methods have different signatures. You would need to look at Mage_Page_Block_Html_Head
to see the differences and which parameters are required and which are optional. The XML nodes of the action follow the same rules as PHP: if you want to "skip" a parameter, you still need to include it but leave it empty.
The addCss
method takes two parameters: the style sheet path and parameters.
/**
* Add CSS file to HEAD entity
*
* @param string $name
* @param string $params
* @return Mage_Page_Block_Html_Head
*/
public function addCss($name, $params = "")
The addItem
takes quite a few parameters as it needs to support different elements like scripts, style sheets and meta elements.
/**
* Add HEAD Item
*
* Allowed types:
* - js
* - js_css
* - skin_js
* - skin_css
* - rss
*
* @param string $type
* @param string $name
* @param string $params
* @param string $if
* @param string $cond
* @return Mage_Page_Block_Html_Head
*/
public function addItem($type, $name, $params=null, $if=null, $cond=null)
So the only way to add a style sheet with an empty if statement is to use the addItem
method.
As an alternative I've implemented a customization of this class which adds the functionality to insert an element before/after another element. This requires a module and some knowledge of how Magento keeps the scripts array, but is fairly easy to implement.
OTHER TIPS
It turns out I was missing a
<params/>
in my xml, that I guess closes out the head tag. For some reason, I also needed to use the method "addItem" and specify the type as css, rather than addCss. The complete XML looks like this:
<reference name="head">
<action method="addItem">
<type>skin_css</type>
<name>css/mycustomcss.css</name>
<params/>
<if><![CDATA[<!--[]><!-->]]></if>
</action>
</reference>
This will not work:
<reference name="head">
<action method="addCss">
<stylesheet>css/mycustomcss.css</stylesheet>
<params/>
<if><![CDATA[<!--[]><!-->]]></if>
</action>
</reference>