How to include jQuery in your Magento theme

Magento uses Prototype as its JavaScript library of choice, however many developers choose to use jQuery and are not familiar with Prototype. jQuery is one of the most popular JavaScript libraries and in the tutorial we cover how to include the jQuery library in your Magento theme properly.

Download jQuery

The first step is to download the jQuery library and upload it to your js directory (i.e. /js/jquery/jquery.min.js).

Modify your layout

If your theme already has a local.xml layout file (/app/design/frontend/yourpackage/yourtheme/layout/local.xml) then open it up in your favourite IDE and skip the next few paragraphs.

If your theme doesn’t have a local.xml create one in the /app/design/frontend/yourpackage/yourtheme/layout/ directory and insert the following lines of code:

[code lang="xml"]
< ?xml version="1.0"?>
<layout version="0.1.0">
</layout>
[/code]

Once you have your local.xml file open we need to add the jQuery library. To do this add the following lines of code between the layout tags.

[code lang="xml"]
<default>
<block name="head">
<action method="addJs"><script>jquery/jquery.min.js</script></action>
</block>
</default>
[/code]

Write your first jQuery script

Modify your local.xml file again to include a reference to your themes JavaScript file(s). Add the following lines of code below the reference to the jQuery library to add a JavaScript file named scripts.js, located in /skin/package/theme/js/:

[code lang="xml"]
<action method="addItem"><type>skinJs</type><script>scripts.js</script></action>
[/code]

Create the scripts.js file in your themes js directory and add your code.

In order to prevent the jQuery library from conflicting with other JavaScript libraries (e.g. Prototype) set noConflict and assign it to a variable e.g.

[code lang="js"]
$j = jQuery.noConflict( );
$j(document).ready( function( ) {
alert( 'jQuery is running in Magento!' );
} );
[/code]

How to change your Magento theme

This tutorial covers how to change your Magento theme through the administration area.

Whether you’re using Magento Community or Magento Enterprise edition, you can change your Magento theme by following these instructions:

  1. Navigate to System -> Configuration using the primary navigation menu
  2. Select the Design tab from the left-hand General navigation menu
  3. Change the Current Package to the name of the package your theme resides within i.e. the name of the directory your theme is in, typically /app/design/frontend/packagename/themename/
  4. Change the Templates and Skin (Images/CSS) fields to the name of your theme i.e. /app/design/frontend/packagename/themename/
  5. Press the Save Config button to save your settings

Note: If you have caching enabled you may need to clear your cache.

Multiple Storefronts

If you’re running multiple storefronts then you will need to change the Configuration Scope to the store view you’re wishing to modify, to do this:

  1. Navigate to System -> Configuration using the primary navigation menu
  2. Change the Current Configuration Scope dropdown menu to the store view you wish to modify the theme for
  3. Continue from step 2 in the instructions above

How to clear your Magento cache

This tutorial covers how to clear the Magento cache both manually and programmatically.

Clearing the Magento cache manually

  1. Navigate to System -> Cache Management using the primary navigation menu
  2. Flush each of the Magento cache’s and additional cache’s using the Flush Magento Cache, Flush Cache Storage, Flush Catalog Images Cache and Flush JavaScript CSS/Cache
  3. Refresh each of the Cache Types by selecting the Select All option at the top of the table, changing the Action dropdown option to Refresh and select the Submit button

Clearing the Magento cache programmatically

To clear the cache programmatically, simply add the following line of code to your script:

[php]
<?php
Mage :: app() -> cleanCache();
?>
[/php]

How to get the current category in Magento

To get the current category in Magento, simply use the registry method to return the current category object:

[php]
<?php
$_category = Mage::registry(‘current_category’);
?>
[/php]

Once you have the category object you will be able to get the category name, description, url, etc.. e.g.

[php]
<?php
$_category = Mage::registry(‘current_category’);
echo $_category->getName()."<br />n";
echo $_category->getDescription()."<br />n";
echo $_category->getUrl()."<br />n";
?>
[/php]

Don’t forget your XML sitemap!

As a technical SEO I get to audit a lot of websites, some good, some bad. By far one of the most common mistakes made by developers is not providing an XML sitemap for Google (and other search engines) to utilise.
[Read more...]