Tips PrestaShop #1 : Afficher un message personnalisé pour les utilisateurs connectés
Sommaire
Pourquoi personnaliser les messages pour les utilisateurs connectés ?
Les utilisateurs connectés sont souvent des clients fidèles ou récurrents. Afficher un message spécifique pour eux permet :
- De renforcer leur fidélité en leur montrant qu’ils sont reconnus.
- De les inciter à explorer davantage votre boutique ou profiter d’offres spécifiques.
Avec un peu de code Smarty et CSS, cette personnalisation est rapide et efficace.
Étape 1 : Ajouter le code HTML dans votre fichier .tpl
Le code suivant vérifie si l’utilisateur est connecté ($logged) et affiche un message adapté. Insérez ce code dans un fichier .tpl, comme header.tpl ou index.tpl.
{* Message spécial pour les utilisateurs connectés dans header.tpl *}
{if $logged}
<div class="welcome-back-message">
<p>Bonjour {$customer.firstname|escape:'html':'UTF-8'}, ravis de vous revoir ! Découvrez nos nouvelles offres !</p>
</div>
{else}
<div class="welcome-message">
<p>Bonjour ! Connectez-vous pour profiter de promotions exclusives.</p>
</div>
{/if}
Étape 2 : Ajouter le CSS à votre thème
Ajoutez les styles suivants dans le fichier global.css de votre thème ou dans un fichier CSS dédié.
.welcome-back-message, .welcome-message {
margin: 15px auto;
padding: 10px 20px;
background-color: #f0f9ff;
border: 1px solid #cce7ff;
border-radius: 5px;
color: #0073e6;
text-align: center;
font-size: 16px;
font-weight: bold;
}
.welcome-back-message {
background-color: #e6ffe6;
border-color: #b3ffb3;
color: #2e8b57;
}
Personnalisation des messages et styles
- Personnalisation du message : Modifiez le texte affiché dans les balises
<p>pour adapter le message à vos besoins. Utilisez la variable{$customer.firstname}pour inclure le prénom de l’utilisateur connecté. - Personnalisation des couleurs : Adaptez les couleurs du fond, de la bordure ou du texte pour qu’elles correspondent à votre charte graphique.
- Ajout de liens : Incitez vos utilisateurs à visiter des pages spécifiques (promotions, nouveautés) en ajoutant des liens dans le message, par exemple :
<p>Découvrez nos <a href="{$link->getCategoryLink(2, null, true)}">produits populaires</a> !</p>
Résultat attendu
Avec ce premier tips, les utilisateurs connectés verront un message de bienvenue personnalisé avec leur prénom, tandis que les visiteurs non connectés recevront un message général les invitant à se connecter. Ce petit détail améliore l’expérience utilisateur et montre une attention particulière à vos clients.
À suivre…
Restez à l’écoute pour découvrir Tips PrestaShop #2, où nous explorerons une autre astuce utile pour personnaliser et optimiser votre boutique en ligne. 😊
Laisser un commentaire