Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>My preferred (and the most flexible way) to do this is through XML using <code>local.xml</code>, two separate Javascript files, and a new file we will create. The first Javascript file is jQuery itself--completely unmodified. The second file I call <code>no-conflict.js</code> and it contains only one line:</p> <pre><code>jQuery.noConflict(); </code></pre> <p>Now we add both of these files, along with a new block, to the head section of our <code>local.xml</code>:</p> <pre><code> &lt;reference name="head"&gt; &lt;block type="page/html_head" name="topScripts" template="page/html/top_scripts.phtml" before="head"&gt; &lt;action method="addItem"&gt; &lt;type&gt;skin_js&lt;/type&gt; &lt;name&gt;js/jquery-1.7.2.min.js&lt;/name&gt; &lt;/action&gt; &lt;action method="addItem"&gt; &lt;type&gt;skin_js&lt;/type&gt; &lt;name&gt;js/no-conflict.js&lt;/name&gt; &lt;/action&gt; &lt;/block&gt; &lt;/reference&gt; </code></pre> <p><code>no-conflict.js</code> is necessary to allow jQuery to work alongside Prototype, the Javascript framework included in Magento by default. Keeping jQuery and a <code>no-conflict</code> file separated allows you to upgrade or downgrade jQuery as needed without the need to edit the jQuery file itself to include the <code>noConflict()</code> method.</p> <p>In our XML we created a new block (<code>topScripts</code>) with the template file set to <code>top_scripts.phtml</code>.</p> <p>Navigate to <code>/app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/</code> and create this new file. It will contain one line:</p> <p><code>&lt;?php echo $this-&gt;getCssJsHtml(); ?&gt;</code></p> <p>Now edit <code>/app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml</code>.</p> <p>Find the line <code>&lt;?php echo $this-&gt;getCssJsHtml() ?&gt;</code> in your <code>head.phtml</code> and add this line directly above it:</p> <p><code>&lt;?php echo $this-&gt;getChildHtml('topScripts') ?&gt;</code></p> <p>You have now <em>correctly</em> added jQuery before any other Magento Javascript.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload