1. Introduction
Pour plusieurs raisons, vous pourriez avoir besoin d’ajouter un nouveau champ aux produits de votre boutique Prestashop. Dans ce tutoriel, nous allons décrire comment le faire pour les versions 1.5.x et 1.6.x de Prestashop qui sont sensiblement identique au niveau de l’architecture.
Il s’agira alors pour nous de décrire comment ajouter un nouveau champ aux produits d’une boutique Prestashop en respectant les consignes de Prestashop. Le résultat attendu est d’avoir le nouveau champ disponible en FO dans le listing des produits et/ou sur la page produit et en BO dans le formulaire d’édition d’un produit.
2. Description de l’approche
Nous allons commencer par décrire le résultat attendu. Nous allons ajouter un champ composition (dans le cas d’une boisson, il s’agit de sa composition chimique). Le champ sera présent en FO sur la fiche produit à travers un onglet composition. En BO, le champ sera disponible dans le formulaire d’édition du produit, il sera traduisible et utilisera un WYSWYG car il s’agit d’un texte qui peut être mis en forme.
La solution consistera à :
– Modifier la table product_lang en y ajoutant le nouveau champ
– Surcharger la classe Product afin d’ajouter le nouveau champ à l’objet Product pour sa gestion native par Prestashop
– Surcharger le tpl information.tpl en BO en ajoutant un nouveau bloc
– Modifier le tpl product.tpl du thème afin d’ajouter le nouvel onglet
3. Les différentes étapes
3.1. Mise à jour de la base de données
Nous allons commencer par modifier la base de données de Prestashop, pour lui permettre d’accueillir un nouveau champ. Nous allons ajouter un champ composition, de type texte, avec un script SQL comme celui-ci-dessous.
ALTER TABLE `product_lang` ADD `composition` TEXT NOT NULL
3.2. Surcharge de la classe Product
Nous n’allons pas parler en détail de la surcharge d’un classe Prestashop. Si besoin, vous trouverez sur notre site, un tutoriel spécialement dédié à cette tâche.
La surcharge de la classe Product, nous conduit à la création du fichier /override/classes/Product.php. Il contiendra la classe Product qui hérite de la classe ProductCore.
Nous allons définir une propriété publique composition et nous allons ajouter une nouvelle entrée dans la sous table fields de la table statique $definition, tel que indiqué ci-dessous :
<?php
class Product extends ProductCore
{
public $composition;
public static $definition = array(
// ...
'fields' => array(
// ...
'composition' => array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml'),
// ...
),
// ...
);
}
NB: Nous rappelons que pour la surcharge d’une classe ou d’un contrôleur sous Prestashop, il faut absolument mettre le fichier cache/class_index.phpà jour pour prendre en compte les nouveaux fichiers surchargés.
3.3. Surcharge du fichier informations.tpl
Afin de gérer le nouveau champ en BO, il faudra surcharger le fichier /admin/themes/default/template/controllers/products/informations.tpl qui est celui l’affichage de l’onglet information dans le formulaire d’édition d’un produit en BO. Rappelons que vous devriez remplacer admin par le nom du répertoire admin de votre boutique.
La surcharge de ce fichier nous conduira à la création du fichier /override/controllers/admin/templates/products/informations.tpl. Ce fichier aura comme contenu initiale celui du fichier original avec en plus les lignes ci-dessous :
<tr>
<td class="col-left">
{include file="controllers/products/multishop/checkbox.tpl" field="composition" type="tinymce" multilang="true"}
<label>{l s='Composition:'}<br /></label>
</td>
<td style="padding-bottom:5px;">
{include file="controllers/products/textarea_lang.tpl" languages=$languages
input_name='composition'
input_value=$product->composition
}
<p class="clear"></p>
</td>
</tr>
3.4. Affichage en front-office
Il ne nous reste plus qu’à afficher ce champ en front-office. Nous avons choisi de le faire à travers un onglet. Pour ce faire, nous allons modifier le fichier /themes/votre_theme/product.tpl.
<div id="more_info_block" class="clear">
<ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
<!-- ... -->
{if $product->composition }
<li>
<a id="more_info_tab_information" href="#idTab13">
{l s='Information'}
</a>
</li>
{/if}
<!-- ... -->
</ul>
<div id="more_info_sheets" class="sheets align_justify">
<!-- ... -->
{if isset($product) && $product->composition }
<div id="idTab13" class="rte">{$product->composition }</div>
{/if}
<!-- ... -->
</div>
Cette étape conclus l’ajout du nouveau champ à la fiche produit de votre boutique.
4. Conclusion
Le besoin de faire des développements sur mesure sous Prestashop n’est plus à démontrer. Et faire des changements sur la fiche produit en fonction des particularités des produits selon le domaine est très courant.
Cependant, il est important de noter que ces modifications doivent être faites selon les recommandations de Prestashop. La principale raison c’est de garantir qu’une mise à jour de version n’écrase pas les modifications.
Nous avons décrit dans ce tutoriel, comment faire ajouter un nouveau champ à la fiche produit en respectant les consignes de prestashop. Cette méthode peut être aussi appliquée pour d’autres classes (Catégorie, CMS, etc.)
