Vous avez certainement déjà vu des pages 404 affichées sur certains sites… c’est énervant vous êtes d’accord ? Souvent ça gave aussi le client alors il existe une méthode toute simple pour redonner le sourire à tout le monde.
La page introuvable qui fait mal
Quand vous recherchez quelque chose de précis sur une boutique en ligne et que vous êtes pressé, rien de pire que d’avoir une page d’erreur 404… . Si en plus le cas se répète plusieurs fois… votre client va certainement partir rapidement… il faut donc absolument capter son attention en cas d’erreur.
La page 404 en standard n’est pas optimisée, il y’a juste un simple texte qui nous dit que la page est introuvable (quel dommage). Ce que je propose c’est que l’on intègre un bon de réduction sur la page d’erreur pour « s’excuser » auprès de l’internaute et par la même occasion lui montrer des produits de la catégorie phare (ou catégorie de votre choix).
Vous allez me dire « Quoi ? Faire une réduction quand y’a une erreur du shop ! C’est n’importe quoi ! ». Voyez le plutôt comme une opportunité… si vous donnez 5% de réduction, le client « aura » l’impression de flairer une bonne affaire, mais si vos marges sont correctes vous restez gagnant dans le deal.
Et de plus vous savez quoi ? Lorsque vous aurez beaucoup de clients qui utilisent des bons de réduction « 404PROMO » vous allez penser : « Peut-être que faut que je vérifie l’état de mes liens morts dans ma console Google Webmaster » (voyez-le comme un rappel à l’ordre ahahah).
Comme toujours en e-commerce, il faut faire des optimisations « simples » et mettre en place des « micro-boost » de ce genre un peu partout dans le shop. Tous ces petits détails vont faire la différence au final et vous devenez petit à petit un e-commerçant innovant qui continue d’optimiser en permanence sa boutique Prestashop. Alors, motivé ? Go… passage à l’exécution !
Ressources
Pour ce tutoriel vous aurez à disposition :
- 1 x fichier PageNotFoundController.php (pour charger des produits)
- 1 x fichier not-found.tpl (pour afficher les produits + bannière)
- 1 x fichier 404.psd (exemple de bannière pour le bon de réduction)
- 1 x fichier custom.css (pour ajuster l’affichage)
Résumé de la vidéo : les liens morts en 404 sous Prestashop… c’est un argument marketing fort à exploiter
- Analyse de la page 404 classique et constatations.
- Contrôle sur la partie statistiques de Prestashop, cela ne semble pas remonter (en tout cas sur ma version en local / même avec optimisation du .htaccess).
- Mise en place du fichier override qui va permettre de charger des produits sur la page 404, intégration aussi d’un TPL optimisé + un CSS contenant des nouvelles règles. Sur mobile l’affichage des produits est masqué pour éviter l’encombrement.
- Bien vider les caches de Prestashop pour la surcharge de l’override, ainsi que le cache CSS du navigateur avec la console Google Chrome.
- Intégration sur la page 404 d’une bannière avec un code de bon de réduction (faites quelques choses de simple).
- Modification de la phrase d’accroche, soyez un peu plus convival que le message standard… une erreur 404 doit faire sourire l’internaute.
Bonjour Germain,
J’ai un souci , j’ai fait toutes les modifications de tes tuto qui touche le dossier override (la pop up newsletter, celle ci) . Cela marche au début puis je n’arrive plus à le refaire paraître la pop up même si j’efface les données dans F12 applications (j’ai réduit à 3 heures pour le cookie et 2 affichages). Les produits affichés sous la bannière de la page error 404 ne veulent plus revenir. La modification de la page produit avec un smiley comme indicateur d’acheteur n’a elle jamais marché.
Ce matin j’ai remis tous les dossiers pour le pop up et ça a marché et ce soir RIEN.
Je précise que j’ai la dernière mise à jour prestashop.
Aurais tu une idée? J’adore ces modifications et je suis frustrée…soupir.
Hello,
C’est difficile de répondre précisément à ce point, mais peut-être qu’il faudrait aussi tester la désactivation de tous les caches comme expliqué dans ce tutoriel : https://www.webbax.ch/2017/10/23/prestashop-1-7-problemes-dactualisation-ep-38/
Il serait aussi bien d’activer le mode « debug » de Prestashop pour vérifier qu’il n’y a pas d’erreur critiques masquées en arrière-plan.
A bientôt !
Merci! Après visionnage de ta vidéo sur l’actualisation , j’ai vu que je n’avais pas mis NON sur mode debug: « désactiver toutes les surcharges. »
Tout marche merci encore!
Bonsoir Germain,
Encore un merci pour tes tutos qui font gagner un temps précieux. Mais un souci avec celui-ci.
not-found.tpl est effectivement appelé pour le 404 mais pas seulement !
Exemple, si aucun produit actif n’existe dans une catégorie et qu’on la sélectionne dans le front-end, Smarty se fâche grave car forcément il ne trouve pas page.products.
Si l’on supprime la div products, cause du plantage, ça fonctionne, mais la page front-end de la catégorie vide affiche l’image, le texte etc…
De même, pas testé, mais si aucun résultat pour une recherche on doit être dans le même cas.
Concrètement, je ne devrais pas modifier d’ici lundi, https://coeur-huitres-oleron.com/10-huitres-fines-de-claire. Heureusement pas mis en place le principe du code promo…
Allez plus que 18 de tes tutos à étudier et mon premier Presta sera une réussite 🙂
Bien cordialement.
Bonjour,
C’est une bonne remarque je l’ai remarqué par la suite, en fait il est possible d’encapsuler le code ajouté par :
{if $page.page_name=='pagenotfound'} VOTRECODE {/if}De cette manière on est certain que le contenu va s’afficher uniquement sur la page 404 et pas ailleurs.
A bientôt !
Salut, déjà, merci pour tout c’est tuto 😉
N’étant pas très à l’aise avec le code, je souhaiterai avoir plus de précision pour l’ajout de cette ligne: « {if $page.page_name==’pagenotfound’} VOTRECODE {/if}
A savoir son emplacement exacte et à quoi correspont « VOTRE CODE »
N’empêche que l’idée de personnaliser l’erreur 404 me taraudait depuis un moment, de cette façon on peux vraiment faire un truc sympa. Pour exemple:https://cosmetique-bio-et-naturel.fr/erreur.html
Hello
Oups, je suis un boulet … tout est dans les fichiers à télécharger, il faut utiliser le V1.
Du coup je continu les tutos et passe à une autre optimisation 😉
Bonjour,
Vous pouvez regarder, ans l’archive j’ai mis un exemple « not-foundV2.tpl » qui contient la modification.
La mention votre code c’est le texte à afficher … ou code HTML que vous voulez faire afficher lorsqu’il s’agit de la page 404.
A bientôt !
Salut
Merci pour l’info, en retour en voici une, mais peut être la connais tu.
J’ai trouvé un logiciel gratos pour scanner tous les liens d’un site, (les outils en ligne sont considérés comme une attaque par mon hébergeur et bloque le site) en donnant des infos comme liens morts, descriptions, doublons etc … attention au paramétrage car on atteint vite des profondeurs de scan vertigineux, notamment si vous avez un menu à facette, il va vous faire toutes les combinaisons possibles pour tous les articles !!!
Mais il est facile de trouver des tuto sur son mode d’emploi 😉
Hello,
Assez souvent je vois revenir par exemple le freeware « Xenu » pour l’analyse des liens, mais il y’en a aussi d’autres intéressants.
A bientôt !
Super ! merci ca marche sur la 1.7
Bonjour,
Merci beaucoup pour ce tuto. Je cherche la même chose pour la version 1.6.1.24 de PS. J’ai réussi à installer vos codes mais les produits ne s’affichent pas. En regardant le chemin, je ne retrouve rien de connu sous 1.6. Pouvez-vous me dire ce qu’il faudrait changer svp? Je vous remercie.
Bonjour,
Désolé, mais ce tutoriel est compatible uniquement avec Prestashop 1.7… pour la version 1.6 je n’ai pas proposé d’alternative (il faut retoucher le fichier : \themes\default-bootstrap\404.tpl.
A bientôt !
Bonjour,
Le tuto ne fonctionne plus en avec 1.7.7.8
Cela affiche une page blanche…
Dommage,
Cordialement,
Thierry
Merci pour ce tuto qui m’a permis de modifier la page 404 d’un 1.7.6.4. Mais je souhaite corser la chose car c’est un multiboutique. Et donc je souhaite un texte différent selon la boutique. Ca ne marche pas avec les traductions de PS qui sont uniques pour toutes les boutiques. Donc je souhaite rajouter un {if isset($id_shop) && $id_shop == 1} (ou autre formule ??) mais cela ne fonctionne pas, le texte dans la condition n’est plus affiché.
Par ailleurs, la grille de produits affiche bien des produits de site 1, mais pas de site 2 depuis que j’ai désassocié ses produits de site 1. Une piste ? merci d’avance.
Hello,
Pour faire afficher un texte différent selon le shop éventuellement dans le TPL tu pourrais faire une condition avec {$urls.shop_domain_url} (en fonction du nom de domaine).
Pour avoir une liste des variables Smarty sous PrestaShop 1.7 voir cette page : https://www.team-ever.com/prestashop-1-7-liste-des-variables-smarty/
À bientôt !