déc 01

Ah la fraicheur des matins de ventes de fin d’année…

Quand les E-commerçants vivent leur grands moments, le gros des ventes, leur croissance…
Tout y est pour que la tension soit à son maximum ! En cas de bug, c’est le grand moment de solitude. Oh pas pour tous, loin de là mais parmi 1000 sites, il y en a toujours un ou deux qui vont connaitre des soucis.

Cette année, il a été sauvé in extremis par un de nos administrateurs, qui a trouvé un comportement assez improbable de Magento. Cela pouvant arriver à tout le monde, il est souhaitable de partager cette perle. Merci à Adrien pour le partage de cette information.

Comme vous pouvez le voir dans app/code/core/Mage/Core/Model/Config.php, l’ensemble des fichiers xml du répertoire etc sont chargés :

/**
 * Load base system configuration (config.xml and local.xml files)
 *
 * @return Mage_Core_Model_Config
 */
 public function loadBase()
 {
   $etcDir = $this->getOptions()->getEtcDir();
   $files = glob($etcDir.DS.'*.xml');
   $this->loadFile(current($files));
   while ($file = next($files))
   {
     $merge = clone $this->_prototype;
     $merge->loadFile($file);
     $this->extend($merge);
   }
   if (in_array($etcDir.DS.'/category/developpement_magento/local.xml', $files)) {
   $this->_isLocalConfigLoaded = true;
   }
   return $this;
 }

Donc si vous avez des comportements étranges, vérifiez bien que vous n’avez pas, par hasard, des vieux fichiers de paramétrage XML (ou sauvegarde des local.xml) qui trainent dans votre répertoire app/etc/ de Magento.

La présence dans ce répertoire d’anciennes configuration de fichiers .xml peuvent rendre un site inopérationnel. Par exemple si vous laissez des fichiers local2.xml ou local_save.xml etc., il est possible que vous ayez un conflit de version.

écrit par Philippe Humeau \\ tags: ,

nov 24

Introduction : HTML5 et E-commerce nʼest ce pas trop tôt ?

Non ! Même si le W3C est toujours en recherche sur ce nouveau langage, beaucoup de balises comme <header>, <nav> et <aside> sont pratiquement sûres d’être intégrées dans les nouvelles spécifications de HTML5. De plus, grâce à un petit script, le passage est transparent sur tous les navigateurs, même IE6 (oui, vous avez bien lu :) )

Il est donc temps de préparer nos boutiques web au futur. Petit retour en arrière, cela fait 10 ans que le HTML nʼa pas évolué et propose toujours la
même structure et les mêmes balises. Les développeurs web recherchent continuellement de nouvelles fonctionnalités par le biais de Javascripts pour parer aux limites de ce langage vieillissant et qui ne correspond plus aux besoins actuels.

HTML5 est donc lʼoccasion dʼouvrir nos sites à de nouvelles fonctionnalités, de nouveaux supports (mobiles notamment) et à les rendre plus sémantiques pour nos robots adorés de chez Google.

Pourquoi continuer à hésiter ?

Si vous êtes sur Magento et souhaitez passer en HTML5, je ne peux que vous conseiller de le faire. Oui, mais comment ? Cette article mettra en avant les différentes étapes clés pour passer votre boutique en HTML5.
Bonne lecture !

Travaux pratiques : Magento passe au niveau supérieur !


Tous les fichiers cités ci-dessous se trouve normalement dans votre thème «app/design/frontend/THEME/default/»

Préliminaire

Préparé la tête (<head>)

La toute première chose à faire est dʼouvrir le fichier «page/html/head.phtml», vous
trouverez ici le Doctype de votre site. Modifiez le comme ceci :

On remplace  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

par

<!DOCTYPE html>

Et oui, le Doctype dʼHTML5 est tout petit. Mais ce nʼest pas la taille qui compte me direz-vous :) En effet, grâce à ce bout de code vous allez pouvoir utiliser toutes les nouvelles balises HTML5.

IE encore et toujours.

Evidemment, les balises HTML5 ne sont pas reconnues sur les anciens navigateurs. Il nous suffit donc simplement dʼajouter 2 choses :

Dans «head.phtml», ce petit script : faire comprendre à IE quʼil existe de nouvelles balises dans le DOM.

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

En haut de votre feuille de style : faire comprendre à IE que les nouvelles balises sont de type Block.

/*------------------------------------*/
/*- HTML5 -*/
/*------------------------------------*/
header, nav, footer, figure, figcaption, section, article, aside, hgroup, time { display:block; }

Nous y voilà ! Votre Magento est prêt pour le HTML5. Il ne reste plus quʼà changer les balises et y ajouter de nouvelles fonctionnalités.

On continue ? C’ est parti !

Home page et bloc récurrent

Le header

Ouvrez le fichier «page/html/header.phtml» et modifiez le afin dʼobtenir quelque chose de ce type :

<section>
 <header>
  <?php if ($this->getIsHomePage()):?>
  <h1><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this>getUrl('') ? title="<?php echo $this->getLogoAlt() ?>"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
  <?php else:?>
  <a href="<?php echo $this->getUrl('') ?>" title="<? php echo $this->getLogoAlt() ?>" <strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>
  <?php endif?>
 <section>
  <?php echo $this->getChildHtml('topSearch') ?>
  <p><?php echo $this->getWelcome()?></p>
  <?php echo $this->getChildHtml('topLinks') ?>
  <?php echo $this->getChildHtml('store_language') ?>
 </section>
 <?php echo $this->getChildHtml('topContainer'); ?>
 </header>
</section>
<?php echo $this->getChildHtml('topMenu') ?>

Il ne faut pas confondre <section> et <div>. La section peut être représentée comme la mère des divisions. Ici la section «quick-access» est découpée en plusieurs parties (division) top search, welcome message et top link.

La balise header indique aux navigateurs que le bloc est important et représente la tête de votre document.

Astuce : vous pouvez utiliser la balises plusieurs fois dans un fichier cependant il faut quʼelle soit unique par section.

La navigation

Utilisation de la balise <nav> dans le fichier «catalog/navigation/top.phtml». On signifie au navigateur que cette liste représente une navigation (ensemble de liens qui relient vos pages). Comme pour le header, cette balise nʼest pas seulement destinée à la navigation principale, vous pouvez lʼutiliser à chaque fois que vous avez une navigation.

<?php $_menu = $this->renderCategoriesMenuHtml(0,'leveltop') ?>
<?php if($_menu): ?>
<nav>
<ul id="nav">
<?php echo $_menu ?>
</ul>
<nav>
<?php endif ?>

Le footer

Ajout de la balise footer dans «page/html/footer.html».

Petite subtilité tout de même, certains lʼauront remarqué : jʼai supprimé la balise <address> en natif et je lʼai remplacé par une balise <p>. Pourquoi ? Tout dʼabord, sachez que la balise <address> nʼest pas du HTML5 mais du HTML3 implémenté depuis 1993. Ensuite, Magento utilise à mauvais escient cette balise car c’est un «faux amis».

En effet, address signifie la personne concernée par le contenu comme par exemple un auteur pour un article et non un copyright ou lʼadresse postale de votre boutique.
Pour mieux comprendre le tag <address> : http://html5doctor.com/the-addresselement/

<section>
<footer>
<?php echo $this->getChildHtml() ?>
<p><?php echo $this->__('Help Us to Keep Magento Healthy') ?> - <a href="http://www.magentocommerce.com/bug-tracking" onclick="this.target='_blank'"><strong><?php echo $this->__('Report All Bugs') ?></strong></a> <?php echo $this->__('(ver. %s)', Mage::getVersion()) ?></p>
<p><?php echo $this->getCopyright() ?></p>
</footer>
</div>

Publicités ou offres promotionnelles en home page

Si vous avez des offres promotionnelles sur la page dʼaccueil sous forme dʼimage, voici
comment lʼécrire en HTML5.

<figure>
  <img src="/promotion_noel.jpg" alt="Réduction de Noèl">
  <figcaption>C’est déjà Noël, 30% de réduction sur tous nos produits</figcaption>
</figure>

Figure représente une image, un graphe, une illustration, etc… Figcaption quand à lui représente la légende de lʼimage. Un texte plus détaillé que lʼattribut «alt» de lʼimage. Peut contenir des liens ou des informations en gras.

Page catégories et produits

Catégorie et Sidebar

Voici une structure type pour vos pages catégories :

<section class=‘content’> 
  <hgroup> 
  <h1>Maroquinerie</h1> 
  <h2>Sac</h2> 
</hgroup> 
<section class=‘list-products’> 
  <div class=‘pager’>13 articles par page</div> 
  <div class=‘products’>...</div> 
</section>

<section>
<aside> 
 <nav>
  <strong>Autres Catégories</strong> 
  <ul> 
    <li><a href=‘ceinture.html’ title=’Ceinture’>Ceinture</a></li> 
    <li><a href=‘chaussure.html’ title=‘Chaussure’>Chaussure</a></li> 
  </ul> 
 </nav>
</aside>

Vous retrouvez ici deux nouvelles balises :

  • aside : Signifie une zone complémentaire au contenu. Utile pour une sidebar dans les pages catégories.
  • hgroup : Comme son nom lʼindique, cʼest un ensemble de titre. Ici, elle est utilisée pour la catégorie principale et secondaire.

Listing produit

La partie la plus complexe et la plus intéressante : la liste de produits. Voici un bout de code magique à garder en tête :)

<article>
<header>
  <h1>Pull Rouge</h1>
</header>
<figure>
  <img src="/pull.jpg" alt="Pull rouge">
  <figcaption>Pull en laine pour vos soirée d’hiver</figcaption>
</figure>
<footer>
  <p class=‘stock’>Disponible</p>
  <p class=‘price’>34,40€</p>
</footer>
</article>

La balise la plus mal comprise de toutes est la balise <article>. Le W3C la caractérise comme une pièce indépendante du contenu. Astuce : Une façon simple de savoir sʼil faut lʼutiliser ou pas : demandez vous si cette section serait utilisée dans un flux RSS ?

Si oui, comme un article de blog ou les produits dʼune boutique, alors utilisez-la. Vous pouvez voir ici une utilisation intelligente du <header> et du <footer>. Pour chaque bloc de produit, on signifie au navigateur un en-tête (header) contenant le nom et un pied (footer) comprenant la disponibilité et le prix.

Page produit

Concernant la partie information dʼun produit :

<details>
<summary>Description</summary>
<p>Sac en cuir drapé avec une poche zippée</p>
<summary>Livraison</summary>
<p>Sous 2 à 5 jours</p>
</details>

La balise <details> représente un détail, l’approfondissement d’un contenu dans une page. Idéal pour la description dʼun produit ou de tout autre attribut. La balise <summary> est l’en-tête du détail.

Sur certains navigateurs, ce code permettra de faire un effet en accordéon sans besoin de javascript… incroyable mais vrai !

Aller encore plus loin avec les micros Data

Vous allez peut-me dire que cela est tiré par les cheveux, mais peut-être quʼun jour nous développerons tous nos sites de cette manière. Lʼattribut itemscop transforme le paragraphe <p> en un objet MicroData. Ensuite tous les éléments quʼil contient peuvent devenir plus sémantiques. On utilise alors itemprop pour décrire un type dʼélément : color, size, etc…
<p itemprop= »description » itemscope>Cette jolie robe de taille <span itemprop= »size »>38</span> et de couleur <span itemprop= »color »>rouge</span> sera parfaite pour l’été.</p>
Imaginez maintenant les possibilités offertes par ces balises pour Google sur les mots clés : «dress color red size 36»

 » Sans oublier
Et oui, je nʼallais pas finir mon article sans citer les balises phares du HTML5 : <video> et <audio>.

<!-- VIDEO -->
<video poster="/category/developpement_magento/maroquinerie/image.jpg" width="352" height="264" controls preload>
 <source src="maroquinerie/sac.mp4"></source>
 <source src="maroquinerie/sac.ogv"></source>
</video>
<!-- AUDIO -->
<audio controls preload>
 <source src="sac/temoignage.mp3"></source>
 <source src="sac/temoignage.ogg"></source>
</audio>

Ces balises nous permettent dʼimplémenter des médias sans besoin de javascript ou de flash. Vous avez remarqué que jʼutilise plusieurs sources par balise, cela permet de rester compatible avec tous les supports. Et oui tout le monde ne met pas à jour ces codecs :)

Astuce : Voici un super script fournit par nos amis de html5media sous licence MIT [LIEN https://github.com/etianen/html5media/] : Vous serez compatible avec lʼensemble des navigateurs. Si la personne est sous IE7 et ne comprend pas la balise <video>, le script se chargera de la remplacer par un lecteur flash. On arrête pas le progrès !

Conclusion : Un meilleur référencement et lʼouverture dʼune porte sur de nouvelles fonctionnalités.

Passer sa boutique Magento en HTML5 nʼest pas forcément une chose aisée mais avec un peu de temps et des personnes compétentes connaissant bien ce langage, cela peut devenir un véritable jeux dʼenfant. En tout cas jʼespère quʼà travers ces petits exemples, je vous aurai donné envie de passer à la vitesse supérieure. En effet, comme vous avez pu le constater, les nouvelles possibilités offertes par ce langage sont incroyables : média,
mobile, sémantique, etc…

En conclusion, je me permets de mettre lʼaccent sur le référencement. On sait tous que les e-commerçants sont à la course au meilleur positionnement sur Google. Avec HTML5 vos pages deviennent plus sémantiques et donc compréhensibles par les robots de recherche.

Au final, si la construction des pages a bien été effectué en amont, vous gagnerez quoi quʼil arrive (à terme) en référencement naturel. Alors à quand votre passage HTML5 ?

Lien à ne pas manquer sur le HTML5 :

Par Aymeric Aitamer, lead developper de l’agence Dn’D

écrit par Aymeric \\ tags: , ,