Mini galeria zdjęć auta na listingu

Szybki start

Przykładowe auto z demo: Audi A4 allroad, wyszukane po VIN.

Wklej w miejsce zdjęcia w karcie ogłoszenia:

Kopiuj

Kafelek wypełnia szerokość rodzica, a wysokość wynika z aspect-ratio. Przeglądarka ładuje iframe dopiero, gdy kafelek zbliża się do ekranu (loading="lazy").

Wskazanie auta

Każde osadzenie wymaga klucza konta (key) i jednego z identyfikatorów:

Numer rejestracyjny może zawierać spacje i myślniki, a wielkość liter nie ma znaczenia: sk 402-vv zadziała tak samo jak SK402VV. Gdy podasz kilka identyfikatorów, decyduje kolejność carId → vin → plates.

Sesje przy VIN i rejestracji

Jedno auto może mieć wiele sesji: obrót 360° oraz sesje samych zdjęć, w różnych proporcjach. Dla przykładowego Audi w VC360 jest ich sześć:

Którą sesję pokazać przy vin lub plates, ustala parametr session:

Znacznik 360° pojawia się tylko przy sesji z obrotem. Link „Obejrzyj w 360°” na ostatnim slajdzie prowadzi do pełnego playera tej sesji, którą znalazł mini player.

Parametry adresu /embed

Kolejność zdjęć

Zdjęcia mają wspólną numerację, niezależną od typu sesji: 1–8 to nadwozie (ujęcia dookoła auta), od 9 w górę to zdjęcia dodatkowe (wnętrze, detale). Dla przykładowego Audi to numery 1–8 i 9–30.

Każde zdjęcie pojawia się najwyżej raz. Bez * galeria pokazuje tylko wymienione zdjęcia.

Kolejność najprościej ułożyć w konfiguratorze: klikasz miniatury, a narzędzie podaje gotowy parametr order i kod iframe.

Proporcje 16:9 i 4:3

Sesje VC360 bywają w 16:9 lub 4:3 (przykładowe Audi ma obie). Proporcje kafelka ustawia strona przez aspect-ratio na iframe. Żeby kafelek dopasował się sam do zdjęć, dodaj raz na stronie poniższy skrypt i atrybut data-vc360-auto na iframe'ach:

Kopiuj

Player po załadowaniu wysyła stronie wiadomość ready z polem ratioLabel (16:9 lub 4:3), a skrypt ustawia według niej proporcje kafelka. Do tego czasu obowiązuje wartość z atrybutu style.

Motywy

theme=vwfs dopasowuje player do VWFS Store: kolory petrol i turkus, ostre narożniki, przycisk „SPRAWDŹ SZCZEGÓŁY”, font VWAG TheSans (jeśli jest dostępny na stronie, w przeciwnym razie font zastępczy). Bez parametru theme działa motyw domyślny, a kolor przycisków zmienia accent.

Komunikaty do strony

Iframe informuje stronę o zdarzeniach przez postMessage. Wszystkie komunikaty mają source: 'vc360mini':

Każdy komunikat zawiera też frame (Twój identyfikator z adresu), carId i env. Przykład: analityka przesunięć i ukrycie kafelka, gdy auto nie ma zdjęć:

Kopiujwindow.addEventListener('message', function (e) {
  var m = e.data;
  if (!m || m.source !== 'vc360mini') return;
  if (m.type === 'change') analytics.track('gallery_swipe', { offer: m.frame, index: m.index });
  if (m.type === 'error') document.querySelector('[data-offer="' + m.frame + '"] iframe').hidden = true;
});

Sterowanie ze strony: iframe.contentWindow.postMessage({ source: 'vc360mini-host', cmd: 'next' }, '*'). Dostępne komendy to next, prev i goTo (z polem index).

Dobre praktyki

• Zawsze ustawiaj loading="lazy" i aspect-ratio. Strona nie przeskakuje podczas ładowania, a kafelki poniżej ekranu nie zużywają transferu.
• Dodawaj title z modelem auta, na przykład dla czytników ekranu.
• Nie dodawaj atrybutu sandbox albo dopuść w nim allow-scripts allow-same-origin allow-top-navigation-by-user-activation allow-popups. Inaczej link do ogłoszenia nie zadziała.
• Na telefonie zdjęcia przesuwa się palcem, na komputerze przeciąga myszką albo strzałkami po najechaniu. Kliknięcie po przeciągnięciu nie otwiera oferty.
• Klucz key jest widoczny w kodzie strony, tak samo jak w pełnym playerze VC360. Pozwala tylko oglądać zdjęcia.

Bez iframe: Web Component

Na długich listach (50+ kafelków) lżejszy jest komponent osadzony bezpośrednio na stronie. Parametry są te same, jako atrybuty (car-id, vin, plates, order…):

Kopiuj