Agencement d'une page d'accueil avec catégories et utilisation de JQuery

Création d'une page d'accueil pour Magento

Commençons par comprendre son fonctionnement.

La page d'accueil de Magento est une page de type CMS qui se gère dans l'administration de votre boutique, sous l'onglet CMS.

CMS -> Pages -> Home Page

Elle contient plusieurs sections : Les informations de la page, son contenu, son habillage (ou agencement) et ses données meta pour le référencement. Dans cet article, seul son contenu et son habillage nous intéresse.

• Le contenu nous permet d'écrire du texte et de le mettre en forme, d'écrire du code HTML, d'ajouter des images, d'appeler des blocs statiques... Inconvénient : il ne permet pas d'écrire du code PHP. Il corrige automatiquement le code HTML et supprime quelques fois des balises utiles à votre développement. Son utilisation est assez limitée !
• L'habillage nous permet de choisir un agencement à une ou plusieurs colonnes, d'ajouter et de retirer des éléments "reference" ou "block"...

Agencement d'une page d'accueil avec présentation et catégories

Partons du principe que nous voulons une page d'accueil ressemblant à celle-ci :

Analyse : Cette page se divise en plusieurs parties :

• Une première partie comportant deux encarts de présentation, un titre et un paragraphe.
• Une deuxième partie qui affiche les catégories sous forme d'images.

La première partie est simplement du HTML. Son contenu sera écrit dans la page CMS "Home Page".
La deuxième partie est à créer dans un fichier .phtml (Pour utiliser le langage PHP).

Il est tout à fait possible d'écrire la première et la deuxième partie dans le même fichier phtml.

Passons à la pratique : Commençons par créer le fichier home_categories.phtml dans le répertoire :
app/design/frontend/default/VOTRE TEMPLATE/template/catalog/navigation/

Copiez y le code suivant :

<?php
 foreach ($this->getStoreCategories() as $_category):
 if($_category->getIsActive()):
 $_category = Mage::getModel('catalog/category')->load($_category->getId());
 $layer = Mage::getSingleton('catalog/layer')->setCurrentCategory($_category);
 ?>
 <div class="category-home">
 <a href="/<?php echo $this->getCategoryUrl($_category)?>" title="<?php echo $_category->getName()?>">
 <img src="/<?php echo $this->getCurrentCategory()->getImageUrl(); ?>" alt="<?php echo $_category->getName() ?>" />
 </a>
 <h3><a href="/<?php echo $this->getCategoryUrl($_category)?>" class="category-titre" title="<?php echo $_category->getName()?>"><?php echo $_category->getName()?></a></h3>
 </div>
 <?php
 endif;
 endforeach;
 ?>

Si vous ne souhaitez pas afficher le titre des catégories, il vous suffit de commenter la ligne 11.

déclarons maintenant ce fichier phtml dans notre page CMS "Home Page". A partir de l'administration de la boutique, ajoutez une référence dans l'onglet habillage, section XML de mise à jour d'agencement :

<reference name="content">
 <block type="catalog/navigation" name="home.catalog.categories" alias="home_categories" template="catalog/navigation/home_categories.phtml" after="cms_page" />
 </reference>

Cette référence a pour effet de charger le fichier home_categories.phtml et de l'afficher après le contenu de la page CMS. Nous aurions pu l'afficher avant en modifiant la valeur after="cms_page" en before="cms_page". De même qu'il est possible d'afficher d'autres blocs tel que les dernières nouveautés après le bloc des catégories :

<reference name="content">
 <block type="catalog/navigation" name="home.catalog.categories" alias="home_categories" template="catalog/navigation/home_categories.phtml" after="cms_page" />
 <block type="catalog/product_new" name="home.catalog.product.new" alias="product_new" template="catalog/product/new.phtml" after="home_categories" />
 </reference>

Pour finir, il nous reste à écrire, en HTML, notre première partie dans le champ contenu de la page CMS "Home Page", de choisir un agencement une colonne dans notre habillage et d'adapter notre fichier CSS pour la mise en forme de cette page.

Agencement d'une page d'accueil avec JQuery

Dans l'exemple suivant, nous utiliserons du JQuery pour réaliser une page d'accueil animée tel que celle-ci : Line Sane Séduction (site actuellement en développement.)

Cette page n'est rien d'autre qu'un assemblage de balises div et img qui sera codé dans un fichier extérieur ou dans le contenu de votre page CMS. L'image centrale ainsi que les deux menus à sa droite utilisent du JQuery.

Analyse : Nous avons un slideshow avec une semi transparence (Script JQuery) et un effet de fondu sur une action Mouseover (Script JQuery).

Pour que tout fonctionne correctement, nous devons installer et déclarer le script JQuery sur Magento :

Commençons par télécharger la librairie JQuery. Rendez vous à cette adresse : http://docs.jquery.com/Downloading_jQuery

Sur cette page, téléchargez (clic droit -> enregistrer le lien sous...) le minifield de la version courante (Current release), puis copiez le fichier dans le répertoire /js/jquery/jquery-1.4.3.min.js.

Pour que la librairie soit chargée, il nous faut modifier le fichier app/design/frontend/default/VOTRE TEMPLATE/layout/page.xml

Cherchez le code suivant, ajoutez-y une action :

<block type="page/html_head" name="head" as="head">
 <action method="addJs"><script>prototype/prototype.js</script></action>
 <action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
 <action method="addJs"><script>lib/ccard.js</script></action>
 ...
 <action method="addJs"><script>jquery/jquery-1.4.3.min.js</script></action>
 </block>

Avant d'aller plus loin ! Magento utilise déjà une librairie Javascript nommée "Prototype". Dans votre script, lorsque vous appellerez l'instruction $, Magento ne sera pas capable de différencier le $ de JQuery du $ de Prototype. Pour éviter ce conflit, nous allons ajouter la ligne suivante à la fin du fichier jquery-1.4.3.min.js.

var &j = jQuery.noConflict();

Ce code aura pour effet de dire à Magento que l'instruction $j remplace l'instruction $. Vous devrez donc modifier le code javascript sur vos pages. Par exemple, au lieu d'utiliser le code :

&(this).hover(function()
Vous utiliserez :
&j(this).hover(function()