Astuces et tips techniques pour Prestashop 1.6 (CMS e-commerce)

Mathieu Chartier 16 janvier 2015 à 10:25 CMS (WordPress...) 18 commentaires

Prestashop est un CMS e-commerce français et gratuit qui rencontre un franc succès auprès des internautes et des développeurs depuis plusieurs années. Actuellement en version 1.6 (et des poussières), l’outil a connu moult évolutions pour arriver à se faire une place de choix dans la liste des systèmes de gestion de boutiques en ligne. Actuellement 7^e CMS mondial selon le classement W3Techs de janvier 2015 et 2^e CMS e-commerce derrière Magento, il faut bien avouer que la France n’a pas à avoir honte sur ce plan précis…

Logo Prestashop 1.5 et 1.6

Etant moi-même un fervent défenseur de Prestashop, je me dis qu’il pourrait être intéressant que je rédige enfin un petit article technique pour donner des astuces (ou « tips » pour les anglophones avertis ^^) et surtout contrer un des principaux inconvénients de ce CMS : sa documentation.

La bataille de l’e-commerce : Magento VS Prestashop

Ayant oscillé pendant plusieurs mois entre Magento et Prestashop, j’avoue qu’aucun des deux ne m’a comblé à 100%, mais ils ont vraiment leurs propres atouts et faiblesses, ce qui explique certainement cette bataille de parts de marché dans le monde.

Sans rentrer dans les détails théoriques, j’aimerais faire un petit topo sur les aspects techniques de ces CMS. D’un côté, nous avons Magento qui est un peu la « rolls » sur le plan du code, avec des fichiers bien pensés et bien conçus, mais qui ne sont pas à la portée du premier venu lorsqu’il faut aller dans les méandres de l’outil (il a l’inconvénient d’être très lourd et complexe à maîtriser pour les débutants…). De l’autre côté, nous avons Prestashop avec sa programmation orientée objet en MVC plutôt bien foutue et son système de « templates » fait de fichiers .tpl basés sur le framework PHP Smarty.

Logo Smarty - Framework PHP utilisé dans Prestashop

En soi, les deux solutions d’e-commerce offrent de bonnes dispositions pour travailler, et pour les développeurs aguerris, il suffit de bien observer les méthodes de conception pour trouver des repères et avancer. Cela étant dit, je ne vous cache pas que les phases d’intégration ou de développement imposent parfois des arrachages de cheveux tant la clarté et l’évidence de certains points ne sautent pas aux yeux au premier abord.

Prestashop et sa documentation famélique…

Ceux qui savent comment je travaille savent à quel point je peux être tatillon voire « chiant » lorsqu’il s’agit de programmation web (j’ai le don pour me mettre en valeur, non ? ^^). J’aime que les choses soient claires et bien expliquées car c’est la base de la réussite et de la durée de vie d’un programme… C’est malheureusement une des limites de ces outils car leurs documentations sont très incomplètes.

Quand on utilise un CMS comme WordPress, le Codex (ensemble des morceaux de codes de la solution) est complet, fourni et précis, avec de nombreux exemples et des liaisons avec toutes les fonctions intéressantes.

Le premier souci de Prestashop est dû à l’utilisation de Smarty, qui certes a des aspects intéressants, mais qui oblige tout développeur à « réapprendre » PHP pour que les morceaux de code fonctionnent avec Prestashop.

Qui plus est, il faut déjà savoir que chaque version du CMS impose des méthodes de programmation différentes (bien que ce soit moins le cas entre les versions 1.5 et 1.6 notamment), il faut donc se référer à la documentation correspondante, en espérant que les réponses techniques soient présentes. Autant le dire tout de suite, ce n’est pas le cas, et les quelques livres que j’ai pu consulter sur le sujet sont du même acabit.

Logo documentation Prestashop 1.6

En d’autres termes, la documentation répond très bien sur les aspects théoriques (pour savoir comment gérer les produits, les clients, les commandes, les déclinaisons…) mais sur le plan technique, les informations sont très peu nombreuses et incomplètes, il faut donc chercher, encore et toujours, pour trouver (si possible) des réponses. Autre souci, il manque cruellement de données sur la hiérarchie des fichiers manquent pour savoir s’il est possible de faire telle ou telle chose dans une page précise, etc.

Prenons un exemple simple. Si nous voulons afficher le titre d’une page statique dans WordPress, nous allons dans le Codex et il est écrit nettement « <?php the_title(); ?> ». Tout simple, mais terriblement efficace. L’équivalent Prestashop des pages statiques correspond aux pages « CMS », et si vous voulez un code équivalent, la documentation ne vous aidera pas beaucoup. En effet, il faudra vous rendre dans le thème par défaut, ouvrir le fichier cms.tpl et découvrir que « {$cms_category->name} » affiche cette information.

J’admets que je n’ai pas mis trois heures à trouver cette réponse mais il serait bien plus « vendeur » pour Prestashop d’avoir une documentation fournie. Celle de la version 1.5 est la plus complète et donne tout de même de nombreuses réponses classiques, mais si vous cherchez des techniques avancées, passez votre chemin…

Je terminerai ma phase critique par la conception des templates. Les thèmes graphiques constituent la base des boutiques en ligne mais le mélange Smarty, Bootstrap, et méconnaissance des « codes Prestashop » impose quasiment de partir du thème par défaut, ce qui explique pourquoi la grande majorité des interfaces graphiques sont approchantes dans les grandes lignes. Créer un thème complet « à nu » est presque impossible ou demande un temps fou tant il faudra parfois « deviner » les morceaux de codes à intégrer pour faire fonctionner certains outils.

Je tiens à préciser que je reste un fan de ce CMS de création de boutiques en ligne, ces quelques défauts sont largement comblés par ses nombreuses qualités, mais je me dois d’être juste et donc de mettre en avant les lacunes évidentes sur le plan technique.

Et alors, elles viennent ces astuces sur Prestashop ?

Je cause, je cause, mais j’en ai presque oublié que l’objectif de l’article est de vous donner des astuces techniques pour Prestashop. Excusez-moi, je m’étais emporté dans ma folie aimante autour du CMS e-commerce à la française. :D

Je rédigerai sûrement à l’avenir des articles pour expliquer comment concevoir un module pour Prestashop 1.5 ou 1.6 mais pour le moment, je tiens juste à répondre à certaines questions que je me suis posé lorsque je concevais des boutiques en ligne. Voici donc un récapitulatif des petites astuces à retenir si comme moi, vous cherchez désespérément certaines réponses…

Côté module (fichier en PHP objet naturel)

Récupérer la liste des catégories et sous-catégories d’une boutique Prestashop

// Placer cette méthode dans la class héritée de Module (dans n’importe quel ordre)
// Fonction personnalisée de récupération des catégories
public function recurseCategoryPerso(&$tab, $categories, $current, $id_category = 1) {
    $tab[] = array('id_category'=>$id_category, 'name'=>$current['infos']['name'], 'level_depth'=>$current['infos']['level_depth']);
    if (isset($categories[$id_category])) {
        foreach (array_keys($categories[$id_category]) as $key) {
            $this->recurseCategoryPerso($tab, $categories, $categories[$id_category][$key], $key);
        }
    }
    return $tab;
}

// Liste de toutes les catégories existantes (placé ce code dans un hook ou dans la fonction getContent par exemple)
$cats = Category::getCategories($cookie->id_lang, false);
$tableau = array();
$categories = $this->recurseCategoryPerso($tableau, $cats, $cats[0][1], 1);

Vous pouvez notamment récupérer les catégories dans une liste déroulante si besoin en faisant comme ceci (ou en adaptant ce code) :

// Liste des catégories et sous-catégories principales
foreach($categories as $categorie) {
    // Affichage des catégories dans les options
    if($categorie['name'] != 'Root') {
        $this->_html.= '<option value="'.$categorie['id_category'].'"><strong>'.str_repeat('&nbsp;', $categorie['level_depth']*2).''.$categorie['name'].'</strong></option>'."\n";
    }
}

Récupération de toutes les déclinaisons existantes dans Prestashop

$attributs = AttributeGroup::getAttributesGroups($this->context->language->id);
// Liste des groupes de déclinaisons dans une liste déroulante
foreach($attributs as $attribut) {
    $this->_html.= '<option value="'.$value2.'">'.$attribut['name'].'</option>'."\n";
}

Dans Prestashop, il faut savoir que les déclinaisons ont des identifiants uniques différents de ceux des produits. De nombreuses tables de la base de données tournent autour des produits et des déclinaisons à tel point qu’il est simple de se perdre. Il est important pouvoir trouver les groupes de déclinaisons pour chaque produit, etc.

Récupérer le nombre total de produits d’une catégorie dans Prestashop

// Récupération de la catégorie ciblée par un ID de catégorie (ici $categorieID)
$category = new Category($categorieID, $this->context->language->id);

// Récupération du nombre total de produits de la catégorie (si le dernier argument est 'true')
$nbProducts = $category->getProducts($this->context->language->id, 0, 0, null, null, true);

Récupérer tous les produits d’une catégorie de boutique Prestashop

Pour compléter ce que nous avons vu précédemment, nous pouvons ajouter cette ligne de code pour récupérer la liste complète des produits d’une catégorie.

$products = $category->getProducts($this->context->language->id, 0, $nbProducts);

Récupération la liste des déclinaisons de produits dans Prestashop

Une fois encore, pour compléter ce qui a été dit antérieurement, nous pouvons récupérer les déclinaisons de chaque produit dans un tableau afin d’obtenir leur identifiant propre (id_product_attribute dans la base) ou autre information.

foreach($products as $product) {
    $produit = new Product($product['id_product'], false, $this->context->language->id);
    $declinaisons[] = $produit->getAttributeCombinations($this->context->language->id);
}

Voici la liste des astuces qui m’ont manqué lorsque je concevais un module Prestashop récemment, ce qui m’a valu quelques phases de recherche avancée. Si nous observons bien, nous pouvons noter que toutes les fonctions sont des « getters » en PHP objet, c’est-à-dire des méthodes précises qui ont des fonctionnalités précises sous la forme « get…() ».

Mon reproche vient du fait que cette liste de méthodes n’est pas disponible directement via Prestashop (ou sinon elle est très bien cachée…) et que certaines de ces méthodes ne donnent pas les résultats escomptés (d’où la création de la fonction recurseCategoryPerso ici). Il faut donc parfois aller chercher la fonction dans les « controllers » de Prestashop puis les réécrire à notre sauce, j’ai connu plus ergonomique et efficient pour cela… :-(

Côté template (fichier TPL)

Ajouter un second bouton « ajouter au panier » dans un page produit de Prestashop

Il existe plusieurs variantes pour faire cela, mais sachez que généralement, c’est la « class CSS » utilisée qui active en Javascript la fonction Ajax d’ajout au panier, il faut donc faire attention pour ne pas entrainer de confusions entre les différents boutons « Ajouter au panier ».

Je vous montre un exemple de bouton que j’ai créé pour un site web (dont le titre change dynamiquement en jQuery en fonction du produit sélectionné).

Bouton personnalisé d'ajout au panier (Prestashop)

Côté HTML

<button type="button" class="button boutonConfig" id="saveConfigurateurPS">
    <span class="titre"></span>
    <div class="icone"><i class="icon-shopping-cart"></i></div>
    <div class="clearfix"></div>
</button>

Côté CSS

.boutonConfig {
    margin-top:.5em;
    background-image: linear-gradient(#d96c20, #b2591a);
    border: 1px solid #b2591a;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border:1px solid rgba(0,0,0,0.4) ;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    cursor:pointer;
}
.boutonConfig:hover {
    background-image: linear-gradient(#b2591a, #d96c20);
}
.boutonConfig .titre {
    width:84%;
    padding:.5%;
    float:left;
    color:#fff;
    font-weight:bold;
    font-size:.9em;
    text-shadow:1px 1px rgba(0,0,0,0.2);
    border-right: 1px solid rgba(0,0,0,0.2);
}
.boutonConfig .icone {
    width:16%;
    padding:.7em .5%;
    float:right;
    text-align:center;
    color:#fff;
    font-weight:bold;
    font-size:1.2em;
    text-shadow:0 1px #015883;
    border-left:1px solid rgba(255,255,255,0.3);
}

Dans cet exemple, le bouton est créé à la main et utilise la fonction ajaxCart.add() en jQuery propre à l’ajout de produits au panier de Prestashop. Tout est récupéré avec l’ID du bouton.

Nous aurions pu ajouter un bouton pour ajouter deux produits en même temps par exemple en choisissant la bonne class ou le bon ID en CSS pour le bouton, comme ceci :

<p id="add_to_cart">
    <button type="submit" name="Submit2" class="exclusive">
        <span>Ajouter au panier n°2</span>
    </button>
</p>

Ici, c’est « add_to_cart » couplé au type « submit » qui permet l’ajout au panier en Ajax. Dans ce cas, si deux produits sont sélectionnés dans les règles de l’art, ils seront ajoutés en même temps au panier (ce qui peut être pratique dans certains cas).

J’espère que certaines astuces vous auront plu et j’espère en proposer d’autres à l’avenir car la faiblesse de la documentation de Prestashop doit être comblée par la communauté pour apporter vraiment à ce bon CMS ce qu’il mérite, et pourquoi pas grappiller quelques parts de marché… :D