Product Media Pro - Video, Google Maps, Instagram, Audio of eigen HTML op elke productpagina, zonder themabewerking

Eén product, één stuk media, geen themabewerking

Sommige producten hebben meer nodig dan foto's. Een demonstratievideo, een kaart naar het atelier waar het gemaakt is, een geluidsfragment, een Instagram-post waarin een klant u getagd heeft. Om dat toe te voegen moet u normaal gesproken uw thema aanpassen — en na elke thema-update opnieuw aanpassen.

Deze module geeft elk product zijn eigen mediapaneel, in het tabblad Modules van dat product in uw back office. Kies een bron, plak een link, sla op. De media verschijnt op de pagina van dat product en nergens anders.

Acht bronnen, en een live voorbeeld tijdens het plakken

YouTube, Vimeo en Dailymotion werken met de gewone video-URL uit uw adresbalk. Google Maps vraagt om de <iframe>-code uit het dialoogvenster Delen → Een kaart insluiten. Instagram vraagt om de URL van een openbare post. Audio accepteert een directe .mp3-, .ogg- of .wav-link, een SoundCloud- of Spotify-link, of een volledig embed-fragment.

Daarnaast accepteert Eigen iFrame elke embedcode van derden die een <iframe>-tag gebruikt, en Eigen HTML accepteert werkelijk alles — tekst, een tabel, uw eigen widget.

Het voorbeeld werkt bij tijdens het plakken, zodat u de definitieve embed ziet voordat u opslaat. Er is geen aparte 'genereren'-stap die u kunt vergeten.

Per product, niet winkelbreed

Elk product kan een andere bron dragen, of geen enkele. Een gitaar krijgt zijn geluidsfragment, een handgemaakte tafel een kaart naar het atelier, een fiets een montagevideo, en de overige vierhonderd producten krijgen niets. Eén schakelaar per product bepaalt of de media überhaupt getoond wordt.

Drie posities, één keer kiezen

U bepaalt winkelbreed waar het blok staat: onder de productafbeeldingen, boven de producttabbladen, of in een eigen tabblad 'Media'.

Twijfelt u? Kies dan het tabblad. Die optie gebruikt PrestaShop's eigen native producttab-hook in plaats van een plek te zoeken in de opmaak van uw thema, en werkt daarom op elk thema.

Standaard responsive

Embeds schalen mee met het scherm. Alles wat de module weergeeft zit in een responsive 16:9-kader dat meebeweegt met de pagina. Wilt u hetzelfde gedrag voor code die u zelf plakt, zet die dan in <div class="embed-container"> — en de stylesheet levert daarnaast de hulpklassen embed-container-square en embed-container-tall, die u handmatig toevoegt wanneer een 16:9-kader de verkeerde vorm heeft, zoals bij een Instagram-post meestal het geval is.

De module raakt nooit een themabestand aan — en daar draait het om

Versie 1.x werkte door de product.tpl van uw thema te kopiëren en te hernoemen. Dat gaat goed tot het moment waarop u uw thema bijwerkt, waarna het stilletjes ophoudt te werken — of erger: bij het verwijderen van de module werd uw themabestand overschreven met een verouderde back-up.

Versie 2 doet daar niets van. De module haakt in op displayProductExtraContent en displayFooterProduct — beide standaard — en gebruikt een klein positioneringsscript voor de twee plaatsingen buiten het tabblad. Er wordt nergens in de module een bestand gekopieerd, hernoemd of overschreven. Eigen thema's, kindthema's en toekomstige thema-updates blijven volledig ongemoeid.

Versie 2.0.1 repareerde de twee posities op het thema van PrestaShop 9

Dit verdient een duidelijk woord als u Hummingbird gebruikt, het standaardthema van PrestaShop 9.

Het positioneringsscript herkende alleen selectors van het Classic-thema. In Hummingbird bestaat geen van die selectors, waardoor 'onder de afbeeldingen' en 'boven de tabbladen' in stilte niets deden — het blok bleef simpelweg staan waar de footer-hook het had weergegeven. De optie 'eigen tabblad' had er geen last van, omdat die nooit van selectors afhing.

2.0.1 voegde de selectors van Hummingbird toe (#product_accordion en .product__images) naast die van Classic, zodat alle drie de posities zich nu op beide thema's gedragen zoals beschreven.

Een schonere herbouw eronder

Versie 2 loste ook een aantal dingen op die jarenlang niet klopten:

Het opslaan van welk product dan ook — zelfs vanuit een volstrekt ongerelateerd tabblad — maakte voorheen een lege mediarij aan. HTML-entiteiten werden dubbel gecodeerd, waardoor de eigen opschoning van de module werd uitgeschakeld voordat de inhoud werd opgeslagen. Het databaseschema hield één kolom per mediatype aan; de upgrade comprimeert dat tot vier kolommen (active, media_type, media_input, media_html) en migreert automatisch.

De module levert ook niet langer zijn eigen Bootstrap, jQuery en URI.js mee — de back office van PrestaShop 1.7+ biedt die al, en het meesturen van dubbele exemplaren vroeg alleen maar om conflicten.

Getty Images is als aparte bron geschrapt omdat Getty zijn gratis embed-widget heeft stopgezet. Bestaande Getty-vermeldingen migreren naar Eigen iFrame, wat ze onderhuids altijd al waren.

Compatibiliteit

PrestaShop 1.7 tot en met 9, PHP 7.1 of hoger, in acht talen: Nederlands, Engels, Frans, Duits, Italiaans, Pools, Spaans en Turks — de interface van de module is dus ook in het Nederlands beschikbaar.

Geen overrides, geen themawijziging. Vijf standaardhooks en één kleine databasetabel. Draait u nog op PrestaShop 1.5 of 1.6? Gebruik dan moduleversie 1.3.x — 2.0 en hoger zijn uitsluitend voor 1.7+.

Veelgestelde vragen

Kan elk product iets anders tonen?

Ja — daar is de module op gebouwd. Elk product heeft zijn eigen mediapaneel, in het tabblad Modules van dat product, met een eigen bron, een eigen link en een eigen aan/uit-schakelaar. Producten waar u niets invult, tonen ook niets.

Waar verschijnt de media precies?

Waar u dat winkelbreed kiest: onder de productafbeeldingen, boven de producttabbladen, of in een eigen Media-tabblad. Twijfelt u, kies dan het Media-tabblad — dat gebruikt een native PrestaShop-hook en werkt daardoor op elk thema, ook op zwaar aangepaste thema's.

Ik gebruik Hummingbird op PrestaShop 9 en het blok verplaatst niet.

Werk bij naar 2.0.1. Vóór die release kende het positioneringsscript alleen de selectors van Classic, waardoor de twee posities buiten het tabblad in Hummingbird niets deden. 2.0.1 voegde de selectors van Hummingbird toe en alle drie de posities werken nu.

Wat moet ik plakken voor Google Maps?

De volledige <iframe>-embedcode uit het dialoogvenster Delen → Een kaart insluiten van Google Maps, niet de gewone deellink. Een kale URL kan niet worden ingesloten.

Mijn geplakte iframe toont een leeg kader in het voorbeeld.

Sommige sites weigeren om binnen het iframe van een andere pagina te worden weergegeven, via hun eigen X-Frame-Options- of CSP-headers. Dat bepaalt de site die u insluit, niet deze module. Probeer in dat geval Eigen HTML, of een directe link als die bestaat.

Zijn jQuery of Bootstrap nodig?

De module levert geen van beide meer mee. Versie 1.x stuurde eigen kopieën van Bootstrap, jQuery en URI.js mee; PrestaShop 1.7+ biedt al wat de back office nodig heeft, dus die zijn verwijderd.

Overleeft de module een thema-update?

Ja. De module werkt volledig via standaard PrestaShop-hooks en kopieert, hernoemt of overschrijft nooit een themabestand. Versie 1.x kopieerde uw product.tpl wél, en precies dat gedrag heeft versie 2 verwijderd.

Mijn Instagram-post wordt niet weergegeven.

Controleer of de post openbaar is. Instagram verzorgt de weergave met zijn eigen embedcode, dus een bezoeker met een extensie die code van derden blokkeert, ziet de post niet.

Wat gebeurt er met mijn bestaande media bij een upgrade vanaf 1.3.x?

Die migreert automatisch — u hoeft niets te doen. Het enige verschil is Getty Images, dat opgaat in Eigen iFrame omdat Getty de gratis embed-widget waarop het steunde heeft stopgezet.