Catalogue PDF PrestaShop — Guide complet

Présentation

DFPDFCatalog publie vos catalogues PDF directement sur votre boutique PrestaShop 8 ou 9. Le module fonctionne de deux façons complémentaires. Il crée d’abord ses propres pages en front-office : une page vitrine listant tous vos catalogues sous forme de bannières cliquables (/catalogues-pdf) et une page visionneuse par catalogue (/catalogue-pdf/{id}-{slug}). Il permet ensuite d’intégrer n’importe quel catalogue dans n’importe quelle page de votre boutique, via un shortcode, un widget Smarty ou une iframe.

Dans les deux cas, le PDF s’affiche dans un lecteur intégré de niveau professionnel : mode double page magazine, miniatures cliquables, plein écran, zoom, liens cliquables et texte sélectionnable.

Installation

1. Téléchargez le fichier ZIP du module depuis votre compte DataFirefly.
2. Dans votre back-office PrestaShop, allez dans Modules → Gestionnaire de modules → Installer un module.
3. Sélectionnez le fichier dfpdfcatalog.zip et validez.
4. Le module s’installe automatiquement : tables de base de données, onglet admin et routes front sont créés sans aucune configuration manuelle.

Après installation, un nouvel onglet Catalogues PDF apparaît dans le menu Catalogue du back-office.

La même archive s’installe sur PrestaShop 8.0 à 8.2 et sur PrestaShop 9.x. Aucune version distincte n’est à télécharger selon votre génération.

Mise à jour depuis une version antérieure

1. Uploadez la nouvelle version via Modules → Gestionnaire de modules → Installer un module (ou remplacez le dossier /modules/dfpdfcatalog/ par FTP).
2. Videz le cache PrestaShop : Paramètres avancés → Performances → Vider le cache.

La mise à jour préserve vos catalogues existants : les tables de base de données et les fichiers uploadés (bannières et PDF) ne sont pas touchés. En passant en 1.2.0, le module enregistre automatiquement les hooks nécessaires à l’intégration dans les pages.

Ajouter un catalogue

1. Allez dans Catalogue → Catalogues PDF puis cliquez sur Ajouter un catalogue.
2. Renseignez le titre (traduisible par langue) — il sert aussi à générer le slug de l’URL et le meta title de la page.
3. Renseignez la description (traduisible) — affichée sur la page visionneuse et utilisée comme meta description.
4. Uploadez l’image de bannière — elle apparaît dans la grille de la page vitrine et sert d’affiche d’ouverture lorsque le catalogue est intégré dans une page.
5. Uploadez le fichier PDF.
6. Définissez la position (ordre d’affichage dans la grille) et le statut actif/inactif.
7. En multiboutique, cochez les boutiques sur lesquelles le catalogue doit apparaître.
8. Sauvegardez : le catalogue est immédiatement visible sur /catalogues-pdf.

Une fois le catalogue enregistré, rouvrez-le : le formulaire affiche un bloc Codes d’intégration contenant les quatre codes prêts à copier pour l’afficher ailleurs sur votre boutique. Cliquez dans un champ pour le sélectionner.

Intégrer un catalogue dans une page

La page vitrine ne convient pas à tous les usages. Pour une landing page métier, une page marché public ou une catégorie qui doit présenter son propre catalogue, vous pouvez placer la visionneuse exactement où vous le souhaitez.

Méthode recommandée : le shortcode

Collez ce marqueur dans le contenu de votre page, à l’endroit exact où le catalogue doit apparaître :

[dfpdfcatalog id="3"]

Remplacez 3 par l’identifiant du catalogue, visible dans la colonne ID de la liste Catalogue → Catalogues PDF. Le shortcode fonctionne dans :

• le contenu des pages CMS ;
• les descriptions de catégorie ;
• les descriptions de produit.

Dans ces trois contextes, le module remplace le marqueur côté serveur, avant l’envoi de la page. Pour tous les autres contextes (blocs de thème, modules tiers, page builders), un repli JavaScript détecte le marqueur dans la page et monte la visionneuse au même endroit. Vous n’avez rien à configurer : le comportement est identique pour le visiteur.

Options du shortcode

• id — identifiant du catalogue. Obligatoire.
• mode — click (par défaut) affiche d’abord une affiche reprenant la bannière du catalogue, et ne charge la visionneuse qu’au clic. inline affiche directement la visionneuse, chargée à l’approche du viewport.
• height — hauteur de la visionneuse en pixels. Par défaut la visionneuse occupe 80 % de la hauteur de l’écran.
• title — libellé affiché sur l’affiche d’ouverture. Par défaut, le titre du catalogue.

[dfpdfcatalog id="3" mode="inline" height="800"]

Widget Smarty dans un template de thème

Pour intégrer un catalogue directement dans un fichier .tpl de votre thème :

{widget name='dfpdfcatalog' id_catalog=3 mode='inline'}

Cette syntaxe ne fonctionne que dans les templates. Le contenu des pages CMS n’étant pas interprété par Smarty, utilisez le shortcode dans ce cas.

Iframe, y compris hors PrestaShop

Le module expose une page d’intégration sans en-tête ni pied de page de la boutique, à placer dans une iframe :

<iframe src="/catalogue-pdf-embed/3" width="100%" height="800" style="border:0;" loading="lazy"></iframe>

C’est la méthode à retenir pour afficher un catalogue sur un site externe. Ces pages d’intégration sont en noindex et ne concurrencent donc jamais vos vraies pages dans les résultats de recherche. Notez que la hauteur d’une iframe est fixe : sur votre propre boutique, préférez le shortcode, qui s’adapte au contenu.

Plusieurs catalogues sur une même page

Vous pouvez placer autant de catalogues que nécessaire sur une même page. Chaque intégration crée une visionneuse indépendante, avec ses propres commandes de navigation, son zoom et son mode d’affichage. Les raccourcis clavier n’agissent que sur la visionneuse survolée, et non sur toutes en même temps.

Le chargement est optimisé pour ce cas de figure :

• en mode click, aucun PDF n’est téléchargé tant que le visiteur n’a pas ouvert un catalogue ;
• en mode inline, le chargement se déclenche à l’approche du viewport ;
• la bibliothèque de rendu et la feuille de style ne sont téléchargées qu’une seule fois pour toute la page, et uniquement si un catalogue y est réellement présent.

Une page présentant huit catalogues en mode click ne charge donc au départ que huit images de bannière.

Pages front-office

Page vitrine

La page /catalogues-pdf affiche tous les catalogues actifs de la boutique courante sous forme de grille de bannières, triées par position. Chaque bannière renvoie vers la visionneuse du catalogue. La page génère son propre meta title et sa meta description, et s’intègre au fil d’Ariane natif de PrestaShop.

Page visionneuse

Chaque catalogue dispose de sa propre page /catalogue-pdf/{id}-{slug}. Le PDF y est affiché dans la visionneuse intégrée, avec un bouton de retour vers la vitrine et un bouton de téléchargement direct. Le PDF est servi via un contrôleur PHP en affichage inline, ce qui force l’affichage dans le navigateur. Les requêtes HTTP Range sont supportées, ce qui permet aux gros catalogues de se charger progressivement plutôt qu’en une seule fois.

Utiliser la visionneuse

La visionneuse repose sur PDF.js (Mozilla) et offre les commandes suivantes dans sa barre d’outils :

• Miniatures — affiche ou masque la barre latérale des miniatures de pages. Les miniatures sont cliquables et se génèrent au fur et à mesure du défilement (rendu paresseux), même pour de très longs catalogues. La ou les pages actives sont surlignées.
• Double page — bascule entre affichage page par page et mode double page magazine : couverture seule, puis paires 2-3, 4-5, etc. Ce mode est activé par défaut sur les écrans d’au moins 1024 px de large.
• Navigation — boutons précédent/suivant, indicateur de page (par exemple « Page 4-5 / 24 » en mode double page). Les flèches gauche/droite du clavier fonctionnent aussi.
• Zoom — zoom avant/arrière par paliers de 25 % et bouton d’ajustement automatique à la largeur.
• Plein écran — bascule la visionneuse en plein écran via l’API native du navigateur. Sur iOS Safari, un mode plein écran simulé est utilisé automatiquement. La touche Échap permet de sortir.

Les hyperliens contenus dans le PDF restent cliquables : les liens externes s’ouvrent dans un nouvel onglet, et les liens internes (sommaire, renvois) naviguent directement dans la visionneuse. Si le PDF contient une couche texte, le texte est sélectionnable, copiable, et la recherche Ctrl+F du navigateur fonctionne sur le contenu.

Le rendu utilise la densité de pixels de l’écran (HiDPI) : les pages sont nettes sur écrans Retina et 4K.

SEO et URLs

Le module déclare ses routes via le hook moduleRoutes de PrestaShop :

• /catalogues-pdf — page vitrine, avec meta title et meta description dédiés.
• /catalogue-pdf/{id}-{slug} — une URL propre par catalogue, où le slug est généré automatiquement à partir du titre. Le meta title reprend le titre du catalogue et la meta description reprend sa description.
• /catalogue-pdf-embed/{id} — page d’intégration destinée aux iframes, en noindex.

Aucune page CMS n’est à créer : les routes sont enregistrées automatiquement à l’installation.

Multilingue et multiboutique

Les titres et descriptions se traduisent champ par champ dans le formulaire d’édition (sélecteur de langue standard PrestaShop). Chaque langue génère son propre slug et ses propres metas. En multiboutique, l’association catalogue/boutique se gère par cases à cocher : chaque boutique n’affiche que les catalogues qui lui sont assignés. Ce filtrage s’applique également à l’accès direct par URL et aux intégrations dans les pages : un catalogue non assigné à la boutique courante n’y est jamais servi.

Dépannage

Le shortcode s’affiche en texte brut sur la page

• Vérifiez que l’identifiant correspond bien à un catalogue existant, actif, et assigné à la boutique courante. Un identifiant introuvable laisse le marqueur intact plutôt que d’afficher une visionneuse vide.
• Vérifiez que le catalogue contient bien un fichier PDF.
• Videz le cache PrestaShop, puis rechargez la page en navigation privée.
• Si vous venez de mettre à jour le module, désinstallez puis réinstallez-le pour forcer l’enregistrement des hooks d’intégration.

Le PDF ne s’affiche pas

• Vérifiez que le fichier PDF a bien été uploadé (rééditez le catalogue dans le back-office).
• Videz le cache PrestaShop puis rechargez la page en navigation privée.
• Si un message d’erreur apparaît dans la visionneuse, un lien de téléchargement direct du PDF est proposé en secours.

Le texte n’est pas sélectionnable ou Ctrl+F ne trouve rien

La sélection de texte nécessite que le PDF contienne une couche texte. Les PDF scannés ou exportés en pur bitmap n’en contiennent pas : dans ce cas seul l’affichage graphique est possible. Passez le document par un outil d’OCR si vous avez besoin du texte.

Les liens du PDF ne sont pas cliquables

Les liens doivent être de véritables annotations de lien dans le PDF (créées par l’outil d’export : InDesign, Word, LibreOffice…). Un texte qui ressemble à une URL mais sans annotation ne sera pas cliquable.

Les pages apparaissent étirées ou floues

Ce problème des versions 1.0.0 est corrigé depuis la version 1.0.1 (rendu HiDPI et neutralisation des resets CSS des thèmes). Mettez le module à jour puis videz le cache PrestaShop.

Historique des versions

• 1.2.0 (2026-08-10) — Intégration d’un catalogue dans n’importe quelle page via shortcode, widget Smarty ou iframe ; remplacement côté serveur dans les pages CMS, catégories et fiches produit, avec repli JavaScript ; visionneuse réécrite en instances indépendantes (plusieurs catalogues par page) ; chargement paresseux ; codes d’intégration prêts à copier en back-office ; support des requêtes HTTP Range.
• 1.1.0 (2026-08-10) — Compatibilité PrestaShop 9 ; correction de l’association boutique dans le formulaire d’édition ; filtrage par boutique appliqué à l’accès direct par URL ; contrôle du contenu réel des fichiers envoyés.
• 1.0.4 (2026-05-11) — Mode plein écran (API native + fallback iOS Safari) ; correction du fit-width de la couverture en mode double page ; surlignage des boutons actifs.
• 1.0.3 (2026-05-11) — Mode double page magazine (couverture seule, puis 2-3, 4-5…) ; auto-activation sur écrans larges ; annulation propre des rendus lors de navigations rapides.
• 1.0.2 (2026-05-11) — Barre latérale de miniatures cliquables à rendu paresseux ; couche texte (sélection + Ctrl+F) ; bouton d’affichage des miniatures.
• 1.0.1 (2026-05-11) — Rendu HiDPI net sur Retina/4K ; liens du PDF cliquables (couche annotations) ; correction de l’étirement vertical des pages.
• 1.0.0 (2026-05-08) — Version initiale : page vitrine, visionneuse intégrée, URLs SEO, multilingue, multiboutique.