Pdf-catalogus PrestaShop: volledige gids

Presentatie

DFPDFCatalog publiceert uw pdf-catalogi rechtstreeks op uw PrestaShop 8- of 9-webshop. De module werkt op twee aanvullende manieren. Ze maakt om te beginnen eigen frontpagina’s aan: een etalagepagina met al uw catalogi als klikbare banners (/catalogues-pdf) en een viewerpagina per catalogus (/catalogue-pdf/{id}-{slug}). Daarnaast kunt u elke catalogus in gelijk welke pagina van uw webshop integreren, via een shortcode, een Smarty-widget of een iframe.

In beide gevallen verschijnt de pdf in een ingebouwde lezer van professioneel niveau: dubbele-paginamodus als een magazine, klikbare miniaturen, volledig scherm, zoom, klikbare links en selecteerbare tekst.

Installatie

1. Download het zip-bestand van de module vanuit uw DataFirefly-account.
2. Ga in uw PrestaShop-backoffice naar Modules → Modulebeheer → Een module installeren.
3. Selecteer het bestand dfpdfcatalog.zip en bevestig.
4. De module installeert zichzelf automatisch: databasetabellen, admintabblad en frontroutes worden zonder enige handmatige configuratie aangemaakt.

Na de installatie verschijnt een nieuw tabblad Pdf-catalogi in het menu Catalogus van de backoffice.

Hetzelfde archief installeert op PrestaShop 8.0 tot 8.2 en op PrestaShop 9.x. U hoeft geen aparte versie te downloaden per generatie.

Bijwerken vanaf een oudere versie

1. Upload de nieuwe versie via Modules → Modulebeheer → Een module installeren (of vervang de map /modules/dfpdfcatalog/ via FTP).
2. Leeg de PrestaShop-cache: Geavanceerde instellingen → Prestaties → Cache legen.

De update bewaart uw bestaande catalogi: de databasetabellen en de geüploade bestanden (banners en pdf’s) blijven onaangeroerd. Bij de overgang naar 1.2.0 registreert de module automatisch de hooks die nodig zijn voor de integratie in pagina’s.

Een catalogus toevoegen

1. Ga naar Catalogus → Pdf-catalogi en klik op Een catalogus toevoegen.
2. Vul de titel in (vertaalbaar per taal); die dient ook om de slug van de URL en de meta title van de pagina te genereren.
3. Vul de beschrijving in (vertaalbaar); die verschijnt op de viewerpagina en wordt als meta description gebruikt.
4. Upload de bannerafbeelding; die verschijnt in het raster van de etalagepagina en dient als openingsaffiche wanneer de catalogus in een pagina is geïntegreerd.
5. Upload het pdf-bestand.
6. Bepaal de positie (weergavevolgorde in het raster) en de status actief/inactief.
7. Vink in multishop de winkels aan waarop de catalogus moet verschijnen.
8. Sla op: de catalogus is meteen zichtbaar op /catalogues-pdf.

Open de catalogus na het opslaan opnieuw: het formulier toont een blok Integratiecodes met de vier kant-en-klare codes om hem elders op uw webshop te tonen. Klik in een veld om het te selecteren.

Een catalogus in een pagina integreren

De etalagepagina past niet bij elk gebruik. Voor een landingspagina, een pagina voor overheidsopdrachten of een categorie met een eigen catalogus plaatst u de viewer precies waar u wilt.

Aanbevolen methode: de shortcode

Plak deze marker in de inhoud van uw pagina, exact op de plek waar de catalogus moet verschijnen:

[dfpdfcatalog id="3"]

Vervang 3 door de identificatie van de catalogus, zichtbaar in de kolom ID van de lijst Catalogus → Pdf-catalogi. De shortcode werkt in:

• de inhoud van CMS-pagina’s;
• de categoriebeschrijvingen;
• de productbeschrijvingen.

In die drie contexten vervangt de module de marker aan serverzijde, vóór het verzenden van de pagina. Voor alle andere contexten (themablokken, modules van derden, page builders) detecteert een JavaScript-terugval de marker in de pagina en bouwt hij de viewer op dezelfde plek op. U hoeft niets in te stellen: voor de bezoeker is het gedrag identiek.

Opties van de shortcode

• id: identificatie van de catalogus. Verplicht.
• mode: click (standaard) toont eerst een affiche met de banner van de catalogus en laadt de viewer pas bij een klik. inline toont de viewer meteen, geladen zodra hij de viewport nadert.
• height: hoogte van de viewer in pixels. Standaard neemt de viewer 80 % van de schermhoogte in.
• title: label op de openingsaffiche. Standaard de titel van de catalogus.

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

Smarty-widget in een thematemplate

Om een catalogus rechtstreeks in een .tpl-bestand van uw thema te integreren:

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

Deze syntaxis werkt alleen in templates. De inhoud van CMS-pagina’s wordt niet door Smarty geïnterpreteerd; gebruik daar de shortcode.

Iframe, ook buiten PrestaShop

De module stelt een integratiepagina zonder header of footer van de webshop beschikbaar, te plaatsen in een iframe:

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

Dit is de methode bij uitstek om een catalogus op een externe site te tonen. Deze integratiepagina’s staan op noindex en concurreren dus nooit met uw echte pagina’s in de zoekresultaten. Merk op dat de hoogte van een iframe vast is: gebruik op uw eigen webshop liever de shortcode, die zich aan de inhoud aanpast.

Meerdere catalogi op dezelfde pagina

U kunt zoveel catalogi op één pagina plaatsen als nodig. Elke integratie maakt een onafhankelijke viewer aan, met eigen navigatieknoppen, eigen zoom en eigen weergavemodus. De sneltoetsen werken alleen op de viewer waar de muis boven staat, niet op alle tegelijk.

Het laden is voor dit scenario geoptimaliseerd:

• in de modus click wordt geen enkele pdf gedownload zolang de bezoeker geen catalogus heeft geopend;
• in de modus inline start het laden zodra de viewer de viewport nadert;
• de renderbibliotheek en het stylesheet worden maar één keer per pagina gedownload, en alleen als er echt een catalogus op staat.

Een pagina met acht catalogi in de modus click laadt bij de start dus maar acht bannerafbeeldingen.

Frontpagina’s

Etalagepagina

De pagina /catalogues-pdf toont alle actieve catalogi van de huidige winkel als een raster van banners, gesorteerd op positie. Elke banner verwijst naar de viewer van de catalogus. De pagina genereert een eigen meta title en meta description en sluit aan op het native kruimelpad van PrestaShop.

Viewerpagina

Elke catalogus heeft een eigen pagina /catalogue-pdf/{id}-{slug}. De pdf wordt er in de ingebouwde viewer getoond, met een knop terug naar de etalage en een knop voor rechtstreeks downloaden. De pdf wordt via een PHP-controller inline geserveerd, wat de weergave in de browser afdwingt. HTTP Range-verzoeken worden ondersteund, zodat grote catalogi geleidelijk laden in plaats van in één keer.

De viewer gebruiken

De viewer is gebouwd op PDF.js (Mozilla) en biedt de volgende bedieningen in zijn werkbalk:

• Miniaturen: toont of verbergt de zijbalk met paginaminiaturen. De miniaturen zijn klikbaar en worden al scrollend gegenereerd (lazy rendering), ook bij heel lange catalogi. De actieve pagina(‘s) worden gemarkeerd.
• Dubbele pagina: schakelt tussen pagina per pagina en de dubbele-paginamodus als een magazine: cover alleen, daarna de paren 2-3, 4-5, enzovoort. Deze modus staat standaard aan op schermen van minstens 1024 px breed.
• Navigatie: knoppen vorige/volgende, pagina-indicator (bijvoorbeeld “Pagina 4-5 / 24” in dubbele-paginamodus). De pijltjestoetsen links/rechts werken ook.
• Zoom: in- en uitzoomen in stappen van 25 % en een knop voor automatische aanpassing aan de breedte.
• Volledig scherm: zet de viewer op volledig scherm via de native browser-API. Op iOS Safari wordt automatisch een gesimuleerde volledig-schermmodus gebruikt. Met Escape verlaat u die.

De hyperlinks in de pdf blijven klikbaar: externe links openen in een nieuw tabblad, en interne links (inhoudsopgave, verwijzingen) navigeren rechtstreeks in de viewer. Bevat de pdf een tekstlaag, dan is de tekst selecteerbaar en kopieerbaar, en werkt de Ctrl+F-zoekfunctie van de browser op de inhoud.

De rendering gebruikt de pixeldichtheid van het scherm (HiDPI): de pagina’s zijn scherp op Retina- en 4K-schermen.

SEO en URL’s

De module registreert haar routes via de hook moduleRoutes van PrestaShop:

• /catalogues-pdf: etalagepagina, met eigen meta title en meta description.
• /catalogue-pdf/{id}-{slug}: één nette URL per catalogus, waarbij de slug automatisch uit de titel wordt gegenereerd. De meta title neemt de catalogustitel over en de meta description de beschrijving.
• /catalogue-pdf-embed/{id}: integratiepagina voor iframes, op noindex.

Er hoeft geen enkele CMS-pagina te worden aangemaakt: de routes worden bij de installatie automatisch geregistreerd.

Meertalig en multishop

De titels en beschrijvingen vertaalt u veld per veld in het bewerkingsformulier (de standaard taalkiezer van PrestaShop). Elke taal genereert een eigen slug en eigen meta’s. In multishop beheert u de koppeling catalogus/winkel met selectievakjes: elke winkel toont alleen de catalogi die eraan zijn toegewezen. Die filtering geldt ook voor rechtstreekse toegang via de URL en voor de integraties in pagina’s: een catalogus die niet aan de huidige winkel is toegewezen, wordt er nooit geserveerd.

Probleemoplossing

De shortcode verschijnt als platte tekst op de pagina

• Controleer of de identificatie overeenkomt met een bestaande, actieve catalogus die aan de huidige winkel is toegewezen. Een onvindbare identificatie laat de marker intact in plaats van een lege viewer te tonen.
• Controleer of de catalogus wel degelijk een pdf-bestand bevat.
• Leeg de PrestaShop-cache en herlaad de pagina in privénavigatie.
• Hebt u de module net bijgewerkt, verwijder ze dan en installeer ze opnieuw om de registratie van de integratiehooks te forceren.

De pdf verschijnt niet

• Controleer of het pdf-bestand goed is geüpload (bewerk de catalogus opnieuw in de backoffice).
• Leeg de PrestaShop-cache en herlaad de pagina in privénavigatie.
• Verschijnt er een foutmelding in de viewer, dan wordt als noodoplossing een rechtstreekse downloadlink van de pdf aangeboden.

De tekst is niet selecteerbaar of Ctrl+F vindt niets

Tekstselectie vereist dat de pdf een tekstlaag bevat. Gescande of als pure bitmap geëxporteerde pdf’s hebben er geen: dan is alleen grafische weergave mogelijk. Haal het document door een OCR-tool als u de tekst nodig hebt.

De links in de pdf zijn niet klikbaar

De links moeten echte linkannotaties in de pdf zijn (aangemaakt door de exporttool: InDesign, Word, LibreOffice enzovoort). Tekst die op een URL lijkt maar geen annotatie is, wordt niet klikbaar.

De pagina’s lijken uitgerekt of wazig

Dit probleem van de versies 1.0.0 is opgelost sinds versie 1.0.1 (HiDPI-rendering en neutralisatie van de CSS-resets van thema’s). Werk de module bij en leeg daarna de PrestaShop-cache.

Versiegeschiedenis

• 1.2.0 (2026-08-10): integratie van een catalogus in gelijk welke pagina via shortcode, Smarty-widget of iframe; vervanging aan serverzijde in CMS-pagina’s, categorieën en productpagina’s, met JavaScript-terugval; viewer herschreven als onafhankelijke instanties (meerdere catalogi per pagina); lazy loading; kant-en-klare integratiecodes in de backoffice; ondersteuning van HTTP Range-verzoeken.
• 1.1.0 (2026-08-10): compatibiliteit met PrestaShop 9; correctie van de winkelkoppeling in het bewerkingsformulier; winkelfiltering toegepast op rechtstreekse toegang via URL; controle van de werkelijke inhoud van geüploade bestanden.
• 1.0.4 (2026-05-11): volledig-schermmodus (native API + iOS Safari-terugval); correctie van de fit-width van de cover in dubbele-paginamodus; markering van de actieve knoppen.
• 1.0.3 (2026-05-11): dubbele-paginamodus als een magazine (cover alleen, daarna 2-3, 4-5 enzovoort); automatische activering op brede schermen; nette annulering van renderingen bij snel navigeren.
• 1.0.2 (2026-05-11): zijbalk met klikbare miniaturen met lazy rendering; tekstlaag (selectie + Ctrl+F); knop om de miniaturen te tonen.
• 1.0.1 (2026-05-11): scherpe HiDPI-rendering op Retina/4K; klikbare pdf-links (annotatielaag); correctie van de verticale uitrekking van pagina’s.
• 1.0.0 (2026-05-08): eerste versie: etalagepagina, ingebouwde viewer, SEO-URL’s, meertalig, multishop.