Vimeo Video Showcase - Responsieve slider en lightbox met automatische thumbnails

Een video die bezoekers naar Vimeo stuurt, is een video die de verkoop kost

Productvideo's, tutorials en merkfilmpjes verkopen - maar alleen zolang de klant nog in uw shop is. Precies daar houdt deze module hem: de video's staan in een slider op uw homepage, en een klik opent een lightbox over de pagina heen in plaats van een nieuw tabblad op vimeo.com.

Plak een link. Dat is de installatie.

• 1. Kopieer de link van de video uit de adresbalk of via de deelknop van Vimeo.
• 2. Plak hem in "Add a video" en klik op Toevoegen. Zodra de link herkend wordt, verschijnt er een voorbeeld.
• 3. Een derde stap is er niet - de thumbnail en de titel komen automatisch van Vimeo, en de slider staat al live op uw homepage.

Laat u de titel leeg, dan wordt de eigen Vimeo-titel van de video gebruikt. Elk linkformaat wordt geaccepteerd: vimeo.com/…, player.vimeo.com/video/…, kanaal-, groeps- en showcase-links, zelfs een kaal video-ID.

Verborgen video's, zonder ze openbaar te maken

Plak de volledige privélink - die met de extra code achter het nummer - en de video speelt in uw shop terwijl hij op Vimeo verborgen blijft. Precies wat u nodig hebt voor tutorials, materiaal alleen voor klanten of alles wat nog niet klaar is voor een openbaar kanaal.

Een lightbox, geen omweg

Video's openen in een overlay zonder afleiding, te sluiten met een klik of met de Escape-toets, en spelen af in de Do-Not-Track-modus van Vimeo (dnt=1). Het automatisch doorschuiven van de slider pauzeert zolang een video speelt en zolang het browsertabblad op de achtergrond staat, zodat er achter de speler niets beweegt.

Een slider die zich op elk scherm gedraagt

U bepaalt hoeveel video's er op desktop naast elkaar staan, van één tot acht; op kleinere desktopschermen toont de slider automatisch hoogstens vier, op tablets drie en op telefoons twee, met native swipen. Pijlen en bolletjes zijn optioneel en verdwijnen vanzelf zodra alle video's toch al op het scherm passen. Ook de snelheid van het doorschuiven en pauzeren bij hover zijn instellingen.

Controle per video, en per taal

In de lijst "Your videos" ordent u video's opnieuw met pijltjes omhoog en omlaag, verbergt u er een met één klik, bewerkt u hem of verwijdert u hem. Elke video kan worden beperkt tot één shoptaal of aan iedereen worden getoond - handig als een tutorial alleen in het Duits bestaat, of als een campagnefilmpje voor één markt bedoeld is. Video's waarvan de taal later uit de shop is verwijderd, worden gemarkeerd, zodat u ze een nieuwe taal kunt geven in plaats van ze stilzwijgend kwijt te raken.

Licht van opzet

Geen jQuery. Geen slick, geen modal-video-plug-in, geen externe bibliotheken, geen API-sleutel. Eén klein CSS-bestand en één klein JavaScript-bestand, die alleen laden als er iets te tonen valt, en die met het moduleversienummer tegen caching zijn beveiligd, zodat updates terugkerende bezoekers bereiken zonder harde vernieuwing.

Wat versie 2.0 heeft opgelost

Oudere versies laadden op elke pagina jQuery 1.10 van een CDN, haakten zowel aan header als aan displayHeader waardoor bestanden dubbel werden geladen, lieten lege URL's uitgroeien tot kapotte grijze slides en hadden een configuratiepagina die op moderne PrestaShop-versies vastliep. Dat is er bewust allemaal uit: geen jQuery meer, elke opslagactie gevalideerd en doorgestuurd, en zonder geldige Vimeo-link kan een video niet worden opgeslagen. Bij het bijwerken worden uw bestaande video's automatisch overgezet - ID's worden uitgelezen, thumbnails opnieuw opgehaald, en elke oude slide zonder geldige video blijft behouden en wordt als Hidden gemarkeerd in plaats van weggegooid.

Compatibiliteit

PrestaShop 1.7, 8 en 9, in acht talen: Duits, Engels, Frans, Italiaans, Nederlands, Pools, Spaans en Turks. Bij de installatie haakt de slider aan displayHome, maar hij werkt op elke display-hook als u hem verplaatst via Design → Positions, en u kunt hem met {widget name='vimeoslider'} rechtstreeks in een template zetten. Bij het verwijderen van de module verdwijnen ook de tabel en de instellingen - uw video's op Vimeo blijven onaangeroerd.

Veelgestelde vragen

Heb ik een Vimeo-API-sleutel nodig?

Nee. Plak de link; de thumbnail en de titel haalt de module zelf op.

Kan ik verborgen video's gebruiken?

Ja - plak de volledige privélink inclusief de code achter het videonummer, en de video speelt in uw shop terwijl hij op Vimeo verborgen blijft.

Waar wordt de video afgespeeld?

In een lightbox over uw pagina, te sluiten met een klik of met de Escape-toets, zodat de klant de shop nooit verlaat.

Hoeveel video's worden er tegelijk getoond?

U kiest op desktop tussen één en acht per rij; tablets en telefoons krijgen er automatisch minder, met swipen.

Kan een video aan maar één taal worden getoond?

Ja. Elke video kan worden beperkt tot één shoptaal of aan iedereen worden getoond.

Kan ik de slider ergens anders plaatsen dan op de homepage?

Ja. Verplaats of kopieer hem via Design → Positions naar elke display-hook, of zet hem met {widget name='vimeoslider'} in een template.

Een thumbnail blijft een donker vlak - wat nu?

Vimeo heeft niet geantwoord toen de module erom vroeg. Open het bewerkformulier van de video, klik op Update video en controleer of de video niet privé staat; voor verborgen video's is de volledige privélink nodig.