360° Productweergave (df360spin): volledige gids
Installatie, configuratie en vullen van de 360°-productviewer df360spin: voorbereiding van de spin-afbeeldingen, globale instellingen, aanmaken van een reeks en goede opnamepraktijken.
Overzicht
360° Productweergave (df360spin) voegt aan uw productpagina’s een interactieve viewer toe die een volledige rotatie van het artikel reconstrueert op basis van een eenvoudige afbeeldingsreeks. De bezoeker sleept het product met de muis of de vinger om het te laten draaien, met automatisch afspelen, volledig scherm, afbeeldingsteller en toetsenbordnavigatie. De module vervangt geen enkel template: ze wordt ingevoegd via een weergavehook die u kiest.
Een 360°-weergave is geen 3D-model: het is een serie foto’s die rondom het product zijn genomen. De kwaliteit van de weergave hangt in de eerste plaats af van de regelmaat van uw opnames.
De afbeeldingen voorbereiden
Fotografeer het product op een draaiplateau en neem een regelmatig aantal gelijk verdeelde opnames, in dezelfde kadrering en onder dezelfde belichting. Draai het plateau tussen elke opname over een constante hoek (bijvoorbeeld 10° voor 36 afbeeldingen, ofwel 360° ÷ 36).
Aanbevolen aantal afbeeldingen
- 24 afbeeldingen (stappen van 15°): correcte rotatie, lichte reeks.
- 36 afbeeldingen (stappen van 10°): goed compromis tussen vloeiendheid en gewicht, in de meeste gevallen aanbevolen.
- 72 afbeeldingen (stappen van 5°): zeer vloeiende rotatie voor producten met hoge waarde, zwaardere reeks.
De module accepteert tot 120 frames per reeks. Onder de 24 afbeeldingen oogt de rotatie schokkerig.
Naamgeving en formaat
Benoem de bestanden in de rotatievolgorde, met voorloopnullen om de juiste sortering te garanderen: frame_01.jpg, frame_02.jpg, … De module sorteert de afbeeldingen bij de import automatisch op bestandsnaam. Exporteer in JPG, PNG of WebP op een consistente grootte. Afbeeldingen breder dan de geconfigureerde maximale breedte worden server-side automatisch verkleind.
Een neutrale, egale achtergrond (wit of lichtgrijs) en vaste belichting geven de schoonste rotatie. Vergrendel de belichting en de witbalans van de camera om helderheidsverschillen tussen afbeeldingen te vermijden.
Installatie
- Open in de back-office Modules > Modulebeheer, klik op Een module uploaden en selecteer het ZIP-bestand
df360spin. - Klik na de installatie op Configureren om de globale opties in te stellen.
- Een nieuw tabblad 360° Spin-weergaven verschijnt onder Catalogus om uw reeksen te beheren.
Globale instellingen
Vanaf de configuratiepagina van de module definieert u het standaardgedrag van alle viewers:
- Weergavepositie: onder de miniaturen van het product (aanbevolen), in het blok met aanvullende informatie of onderaan de productpagina.
- Automatisch afspelen standaard: start de continue rotatie bij het laden. Per reeks te overschrijven indien nodig.
- Afspeelsnelheid (ms per afbeelding): weergaveduur van elke afbeelding bij automatisch afspelen. Hoe lager de waarde, hoe sneller de rotatie. Ter indicatie: 60 ms op 36 afbeeldingen geeft een volledige omwenteling in ongeveer 2 seconden.
- Sleepgevoeligheid: aantal pixels slepen dat nodig is om één afbeelding vooruit te gaan. Een lage waarde maakt de rotatie reactiever.
- Maximale framebreedte (px): boven deze breedte worden de geïmporteerde afbeeldingen automatisch verkleind.
- Lazy loading: laadt de afbeeldingen pas wanneer de viewer het zichtbare schermgebied binnenkomt.
Een 360°-reeks aanmaken
- Open Catalogus > 360° Spin-weergaven en klik op Een 360°-reeks toevoegen.
- Voer in het veld Product de naam, de referentie of de identifier van het product in: er verschijnt een suggestielijst, selecteer het juiste product.
- Laat de reeks actief en kies de modus voor automatisch afspelen (globale instelling gebruiken, ingeschakeld of uitgeschakeld).
- Sla op: het beheerpaneel van de frames verschijnt.
Een product kan maar één reeks per winkel hebben. In multistore beheert elke winkel zijn eigen reeks voor eenzelfde product.
Frames importeren en ordenen
- Sleep uw afbeeldingen naar de dropzone, of klik om ze te selecteren. U kunt er meerdere tegelijk versturen.
- De afbeeldingen worden in batches geïmporteerd met een voortgangsbalk, en daarna op bestandsnaam gesorteerd.
- Herorden de volgorde door de miniaturen te verslepen; de nieuwe volgorde wordt automatisch opgeslagen.
- Beweeg over een miniatuur en klik op het rode kruis om een afbeelding te verwijderen.
- Klik op Voorbeeld van de rotatie om de reeks direct in de back-office af te spelen vóór publicatie.
Gebruik aan klantzijde
Op de productpagina sleept de bezoeker het product om het in beide richtingen te laten draaien, met de muis of de vinger, met traagheid aan het einde van het gebaar. De bedieningsbalk biedt een afspeel-/pauzeknop, een afbeeldingsteller en een knop voor volledig scherm. Op het toetsenbord gaan de pijltjes links en rechts afbeelding per afbeelding vooruit en start of pauzeert de spatiebalk de rotatie. De systeemvoorkeur voor verminderde beweging wordt gerespecteerd: het automatisch afspelen start niet als de gebruiker die in zijn systeem heeft uitgeschakeld.
Probleemoplossing
De viewer verschijnt niet
Controleer of de reeks actief is, of ze minstens twee afbeeldingen bevat en of de in de instellingen gekozen weergavepositie overeenkomt met een hook die in uw thema aanwezig is. De module richt zich op de thema’s gebaseerd op classic.
De rotatie is schokkerig
Verhoog het aantal afbeeldingen van de reeks (mik op 36 of meer) en controleer de regelmaat van de hoek tussen elke opname.
De afbeeldingen laden zwaar
Laat lazy loading ingeschakeld, verklein de maximale framebreedte in de instellingen en geef bij de export de voorkeur aan het WebP-formaat.
Compatibiliteit
- PrestaShop 8.0 tot 9.x, classic-thema en kindthema’s.
- Multistore: één reeks per product en per winkel.
- Touchscreen en muis, browservolledig scherm.
- Vanilla JS zonder jQuery, geen enkele template-override.