De nombreuses boutiques en ligne sont basées sur la solution Prestashop. La page de contact, trop souvent négligée, est pourtant un élément essentiel de la boutique. Il s’agit du lien entre le client et vous. En fonction de l’apparence de la page, des éléments proposés dans le formulaire de contact, l’impression du client pourra être bonne ou mauvaise. Il est donc important de personnaliser le formulaire de contact Prestashop afin qu’il renvoie l’image que vous souhaitez avoir auprès de vos clients. Pour y parvenir, plusieurs méthodes s’offrent à vous suivant si vous souhaitez vous plonger dans le code ou plutôt utiliser un module clé en main.
Prestashop 1.7
Prestashop est une solution e-commerce complète. A l’image d’un CMS (Content Management System ou Système de gestion de contenu) comme WordPress, Joomla ou Drupal qui va vous permettre de rapidement créer un site web pour publier du contenu, Prestashop fournit tout ce qu’il faut pour mettre en place un site de e-commerce.
Prestashop 1.7 est construit à partir de composants éprouvés (le framework PHP Symfony notamment), est totalement sécurisé et conforme au RGPD. Il fournit tous les outils nécessaires à la gestion d’un catalogue de produits, des clients, des commandes mais également du SEO et de l’internationalisation. Une marketplace officielle permet d’ajouter de nombreux modules (ou add-ons), gratuits ou payants, afin d’étendre encore les fonctionnalités de la boutique.
Modifier le formulaire de contact par défaut
A la fin de l’installation de Prestashop 1.7, qui ne prend que quelques minutes, vous obtenez un site de e-commerce pleinement opérationnel. Naturellement, il reste du travail si vous souhaitez mettre l’interface du site aux couleurs de votre marque, ainsi que pour saisir l’intégralité de votre catalogue, définir les catégories…
Nous allons nous concentrer ici sur un élément très important de tout site de e-commerce : le formulaire de contact. Il s’agit du point d’accès privilégié de contact entre le client et vous. Prestashop fournit naturellement un formulaire de contact par défaut, avec les champs classiques « Sujet », « Adresse email », « Document joint » (si le client souhaite vous faire parvenir un document) et « Message ». En fonction de votre activité vous pouvez être amené à ajouter des champs complémentaires ou à modifier l’apparence du formulaire.
Gestion des contacts
A la création de la boutique, deux contacts sont créés par défaut. L’adresse « Webmaster » vers laquelle seront dirigées toutes les questions techniques et « Service client » pour les questions liées aux produits ou à la boutique en général. En fonction de l’option sélectionnée dans le « Sujet », le message saisi dans le formulaire par le client sera envoyé à la bonne adresse.
Vous pouvez ajouter autant de contacts que nécessaire en cliquant sur le bouton « Ajouter un contact » situé en haut de la page.
Renseignez le formulaire et cliquez sur « Enregistrer ». La nouvelle adresse de contact est alors créée et le formulaire de contact automatiquement mis à jour.
Ajout d’un champ dans le formulaire
Si vous souhaitez ajouter un champ ou modifier un champ existant du formulaire de contact, cela va vous demander un peu de connaissances en développement web, notamment en HTML (pour l’affichage) et en PHP (pour la prise en compte et le traitement du nouveau champ par Prestashop).
Modification du fichier « template »
Pour commencer, il faut savoir que l’affichage dans Prestashop est géré à l’aide de « templates » ou « modèles », regroupés dans un « thème ». Ce « template » est un gabarit vide donnant simplement la structure de la page qui sera ensuite remplie avec diverses informations. Notre formulaire de contact contient par exemple une liste déroulante qui va ensuite être remplie avec les contacts créés pour la boutique.
Il va donc falloir modifier ce « template » afin d’ajouter le nouveau champ. Supposons pour faire simple que le thème par défaut « classic » soit utilisé (la démarche sera identique quel que soit le thème utilisé). Nous allons commencer par créer ce que l’on appelle un « thème enfant ». Il s’agit d’un thème personnalisé, dérivé du thème principal. Il serait tout à fait possible de se passer du thème enfant et de faire les modifications directement dans le thème parent. L’inconvénient dans ce cas, c’est qu’à la première mise à jour du thème parent, toutes vos modifications seraient écrasées et perdues. Il faudrait donc tout recommencer. Lors de la mise à jour du thème parent, le thème enfant n’est pas modifié.
Pour créer le thème enfant, il suffit de créer un nouveau répertoire « themes/classic-enfant » (vous pouvez le nommer comme vous le souhaitez du moment que le nom est suffisamment explicite). Créez un répertoire « config » et placez-y un fichier « theme.yml » contenant le code suivant :
parent: classic name: classic-enfant display_name: Classic enfant version: 1.0.0 assets: use_parent_assets: true
Ce fichier permet à Prestashop d’identifier le thème enfant.
Le fichier « template » original du formulaire de contact est situé dans le répertoire « /themes/classic/modules/contactform/views/templates/widget/ » et se nomme « contactform.tpl ». Copiez ce fichier ainsi que l’arborescence d’origine dans le répertoire « classic-enfant ».
Nous pouvons maintenant éditer ce fichier pour ajouter un champ « Numéro de téléphone » par exemple.
Ajouter le code suivant dans le fichier « contactform.tpl » :
<div class="form-group row">
<label class="col-md-3 form-control-label">Téléphone</label>
<div class="col-md-6">
<input class="form-control" name="telephone" type="text" placeholder="Téléphone" value="{$contact.phone}">
</div>
</div>
Ce code indique qu’un nouveau champ de saisie de type texte appelé « telephone » va être ajouté au formulaire.
Prise en compte du nouveau champ dans le formulaire de contact
Il ne suffit pas de créer un nouveau champ dans le « template », il faut également qu’il soit pris en compte par Prestashop.
Le formulaire de contact est géré par le module « contactform ». Comme il faut créer un thème enfant pour qu’une mise à jour n’écrase pas les modifications effectuées, il faut « surcharger » (override) le module « contactform ».
Commençons par créer le fichier (et l’arborescence de répertoires) suivant : « /override/modules/contactform/contactform.php ».
Le code source de base va être le suivant :
<?php
if (!defined('_PS_VERSION_')) {
exit;
}
class ContactFormOverride extends Contactform {
// Code à compléter
}
La ligne « // Code à compléter » va maintenant être remplacée par notre propre code. Le peu de code présent dans le fichier indique que l’on va étendre le fonctionnement de base du formulaire de contact.
Ouvrez le fichier d’origine « /modules/contactform/contactform.php » et copiez les deux fonctions (ou méthodes puisqu’il s’agit d’une classe PHP) getWidgetVariables et sendMessage.
La première fonction va nous permettre de récupérer la valeur du champ « Téléphone », la seconde va nous permettre d’insérer cette valeur dans l’email envoyé.
Dans getWidgetVariables, ajoutez les lignes de code suivantes…
// Début ajout du champ "Téléphone"
$this->contact['phone'] = html_entity_decode(Tools::getValue('telephone'));
// Fin ajout du champ "Téléphone"
… juste avant la ligne :
$this->contact['contacts'] = $this->getTemplateVarContact();
Dans sendMessage, vous allez devoir insérer du code à trois endroits différents.
Ajoutez ces lignes de code…
// Début ajout champ "telephone"
$telephone = trim(Tools::getValue('telephone'));
// Fin ajout champ "telephone"
…juste après celles-ci :
$extension = ['.txt', '.rtf', '.doc', '.docx', '.pdf', '.zip', '.png', '.jpeg', '.gif', '.jpg'];
$file_attachment = Tools::fileAttachment('fileUpload');
$message = trim(Tools::getValue('message'));
Il s’agit de la récupération de la valeur saisie dans le champ du formulaire.
Ajoutez ces lignes de code…
// Début validation champ "telephone"
elseif (!Validate::isCleanHtml($telephone)) { // Contrôle du champ téléphone.
$this->context->controller->errors[] = $this->trans('Téléphone invalide', array(), 'Shop.Notifications.Error');
// Fin validation champ "telephone"
… juste après celles-ci :
} elseif (!Validate::isCleanHtml($message)) {
$this->context->controller->errors[] = $this->trans(
'Invalid message',
[],
'Shop.Notifications.Error'
);
}
Il s’agit de la vérification de la validité du contenu du champ.
Enfin, ajoutez cette ligne de code…
'{telephone}' => Tools::nl2br(stripslashes($telephone)), // Prise en compte du champ téléphone
… juste après celles-ci :
$var_list = [
'{order_name}' => '-',
'{attached_file}' => '-',
'{message}' => Tools::nl2br(Tools::stripslashes($message)),
'{email}' => $from,
'{product_name}' => '',
Il s’agit d’ajouter la valeur saisie dans le champ dans la liste des données envoyées dans l’email.
Modification des « templates » permettant de générer l’email transmis par le formulaire
Copiez les fichier « /mails/fr/contact.html » et « /mails/fr/contact.txt » dans le répertoire « /themes/classic-enfant/mails/fr/ ».
Ajoutez le code suivant dans le fichier « contact.html » :
<!-- DEBUT AJOUT DU CONTENU DU CHAMP TELEPHONE -->
<tr>
<td align="left" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 0px; padding: 10px 25px; word-break: break-word;">
<div style="font-family:Open sans, arial, sans-serif;font-size:16px;line-height:25px;text-align:left;color:#363A41;" align="left">
<span class="label" style="font-weight: 700;">Téléphone du client :</span> <span style="color:#25B9D7;font-weight:600; text-decoration: underline;">{telephone}</span>
</div>
</td>
</tr>
<!-- FIN AJOUT DU CONTENU DU CHAMP TELEPHONE -->
Ajoutez le code suivant dans le fichier « contact.txt » :
Téléphone du client : {telephone}
Activation du thème enfant
Si vous mettez à jour l’affichage du formulaire de contact, vous ne voyez toujours pas apparaître le nouveau champ « Téléphone ». C’est normal, Prestashop utilise encore le thème « Classic » par défaut.
Pour lui signifier qu’il doit utiliser le thème « Classic enfant », il faut se rendre dans le menu « PERSONNALISER » et sélectionner « Thème et logo ». Vous deviez voir apparaître le thème enfant et pouvoir l’activer en cliquant sur « Utiliser ce thème ».
Une fois le thème activé, rafraîchissez la page contenant le formulaire de contact. Vous devriez maintenant voir apparaître le champ « Téléphone ».
Insérer une page sur le formulaire de contact
Si vous souhaitez incorporer des informations à votre formulaire de contact, sans le modifier à chaque fois, vous pouvez utiliser une page CMS.
Commencez par créer une nouvelle page CMS dans laquelle vous allez enregistrer le contenu que vous souhaitez afficher dans le formulaire de contact. Une fois cette page créée et enregistrée, elle apparaît dans la liste des pages CMS. Repérez son identifiant « ID », il vous servira ensuite à la référencer.
Comme nous avons déjà utilisé une surcharge du module Contact pour le template du formulaire, nous allons maintenant créer une surcharge du contrôleur du module (la fonctionnalité qui « décide » ce qui sera affiché dans le template).
Créez le fichier « /override/controllers/front/ContactController.php ».
Insérez le code suivant :
<?php
class ContactController extends ContactControllerCore {
{
public function initContent() {
parent::initContent();
$cms = New CMS(1,$this->context->language->id);
$this->context->smarty->assign(array('cms_contact' => $cms));
}
}
Ce code va permettre de récupérer le contenu d’une page CMS. Ici « 1 » est l’identifiant « ID » de la page concernée. Il faut le remplacer par celui de la page créée précédemment. Le contenu de cette page sera ensuite connu dans le template sous le nom « cms_contact ».
Il faut ensuite modifier de nouveau le fichier template du formulaire de contact et insérer le code suivant à l’endroit où vous souhaitez ajouter le contenu :
{if $cms_contact->content}
<section id="intro_contact">
{$cms_contact->content}
</section>
{/if}
Enregistrez le fichier, nettoyez le cache Prestashop et rafraîchissez la page de contact. Vous devriez voir apparaître le contenu attendu.
Utiliser des add-ons
Comme nous avons pu le voir, modifier le formulaire de contact de base dans Prestashop n’est pas forcément de tout repos. Il est indispensable d’avoir au moins quelques notions de HTML, CSS et PHP. Si vous n’êtes pas à l’aise avec ces langages ou avec le développement en général, la solution est sans doute de se tourner vers les modules ou add-ons.
Un module Prestashop est un ensemble de code destiné à remplir une fonction particulière. Certains modules (comme le formulaire de contact basique) sont inclus par défaut dans Prestashop. D’autres peuvent être ajoutés. Certains sont gratuits, d’autres payants. Tout dépend de ce dont vous avez besoin.
Naturellement, les formulaires de contact ne font pas exception et il existe un certain nombre de modules remplissant cette fonction. Cependant, ces modules sont payants et coûtent de 50 à 100 euros environ en fonction des fonctionnalités qu’ils apportent.
Pour ne citer que quelques-uns des modules disponibles, nous retiendrons les suivants :
- Contact Form Ultimate – Générateur de formulaires : il s’agit d’un générateur de formulaires en glisser/déposer. Tous les types de champs sont disponibles, du texte au document en passant par le captcha. Très complet, il permet de générer tout type de formulaire, y compris des formulaires de contact donc, et surtout de les afficher où vous voulez.
- Formulaire de contact Ajax sur page produit : ce module permet de donner accès à un formulaire de contact directement depuis la page d’un produit. Le formulaire utilise Ajax, c’est-à-dire que lorsque le message est envoyé, la page n’est pas rechargée et le client peut continuer de consulter le produit.
- Form Builder : permet de créer des formulaires de contact, produit… Compatible avec Bootstrap.
- Contact Form 7 : module de gestion de formulaires de contact très puissant. Entièrement personnalisables, les formulaires peuvent être affichés n’importe où sur le site.
Pour conclure sur la personnalisation du formulaire de contact Prestashop 1.7
Il est tout à fait possible de personnaliser le formulaire de contact de Prestashop.
Si vous n’avez pas de connaissance particulière en développement web ou que vous ne souhaitez pas faire appel à quelqu’un d’extérieur, vous pouvez investir dans un module qui fera le gros du travail pour vous. Cela vous demandera un peu de configuration et de recherche, mais vous n’aurez pas à vous plonger dans le code source.
Si vous avez un besoin bien précis, vous pouvez vous lancer dans la surcharge du module de contact installé par défaut. Il vous faudra des connaissances en développement HTML, CSS et PHP, ou bien faire appel à un développeur spécialiste Prestashop.
