CODEWITHSUNDEEP
xmlmagentocontent-management-system
bassplayer7
bassplayer7

Reputation: 934

How can I add external jQuery to Magento <head /> via the CMS?

On a Magento installation, I'm trying to insert xml into the Layout Update XML of my home page. I already have some xml in there that is working, but I would like to add a jQuery script to run my slideshow. I had it in page.xml (and was planning to move it to my local.xml at some point), where it was working, but it broke the Add to cart on product pages. So, I thought I would consolidate onto just the main page, and put it into the Layout Update XML. For some reason it isn't coming through.

<reference name="head">
<action method="addJs"><script>jquery/jquery-1.7.1.noConflict.min.js</script></action>
<action method="addJs"><script>folder/slider.js</script></action>
</reference>

Any ideas why it would work in my page.xml and not in here?

Here is the nesting idea in page.xml

<default translate="label" module="page">
    <label>All Pages</label>
    <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
        <block type="page/html_head" name="head" as="head">
            <action method="addJs"><script>prototype/prototype.js</script></action>

Upvotes: 2

Views: 3165

Answers (1)

Oğuz &#199;elikdemir
Oğuz &#199;elikdemir

Reputation: 4980

You can do as follows :

add javascript into local.xml

<layout version="0.1.0">
<default>
   <reference name="head">
      <action method="addJs"><script>jquery/jquery-1.7.1.min.js</script></action>
      <action method="addJs"><script>jquery/carouFredSel.js</script></action>
   </reference>
</default>
</layout>

then make a custom home page template ( take reference from 1column.phtml ), select this template for homepage from CMS.

Put the following content in home page "XML Layout Update" section from Design tab. Here is mine setting which I remove whole prototype scripts from homepage is because didn't want.

<reference name="head">
<action method="removeItem"><type>js</type><script>prototype/prototype.js</script></action>
<action method="removeItem"><type>js</type><script>prototype/validation.js</script></action>
<action method="removeItem"><type>js</type><name>scriptaculous/builder.js</name><params/></action>
<action method="removeItem"><type>js</type><name>scriptaculous/effects.js</name><params/></action>
<action method="removeItem"><type>js</type><name>scriptaculous/dragdrop.js</name><params/></action>
<action method="removeItem"><type>js</type><name>scriptaculous/controls.js</name><params/></action>
<action method="removeItem"><type>js</type><name>scriptaculous/slider.js</name><params/></action>
<action method="removeItem"><type>js</type><name>lib/ccard.js</name><params/></action>
<action method="removeItem"><type>js</type><name>varien/menu.js</name><params/></action>
<action method="removeItem"><type>js</type><name>varien/js.js</name><params/></action>
<action method="removeItem"><type>js</type><name>mage/translate.js</name><params/></action>
<action method="removeItem"><type>js</type><name>varien/form.js</name><params/></action>
<action method="removeItem"><type>skin_js</type><script>js/prototype.formalize.min.js</script></action>
<action method="removeItem"><type>skin_css</type><name>css/formalize.css</name><params/></action>

Also, don't create a specific noConflict page, just put end of the jQuery script which is working well.

For instance, here is mine :

jQuery&&define("jquery",[],function(){return f})})(window);var $jQuery = jQuery.noConflict();

Also, yu should create jquery folder in root js directory, not in skin folder js directory.

Upvotes: 3

Related Questions