Na tejto stránke nájdete jednoduchý návod pre Shoptet doplnok Video galéria produktov, ktorý vám poskytne základné informácie nastavení spolu s možnosťami nastavenia a prispôsobenia doplnku.
Ako nastaviť video do produktovej galérie:
Priradenie videí k produktu funguje pomocou popisných parametrov (nastavené parametre pre video sa na e-shope nebudú zobrazovať). K jednému produktu môžete priradiť viacero videí z rôznych zdrojov, tiež je možné nastaviť rôzne videá pre iné cudzie jazyky – slovenské alebo české video pre domáci trh, anglické pre shop v anglickom jazyku.
- Název parametru – sem sa zadáva text
video_X.. kde X je poradie videa v galérii, tj. ak zadátevideo_3, video bude za druhou fotkou tretie v poradí. - Hodnota popisného parametru – sem sa zadáva url adresa na video, link zo správcu súborov ak nahráte vlastné video (.mp4) alebo link z YouTube, YouTube Shorts, Vimeo. Vlastné videá iného formátu ako .mp4 nie je možné prehrávať.
- Vysvětlivka názvu parametru – url na náhľadový obrázok, rozmer postačuje 200x200px, zobrazuje sa len v menších náhľadových fotografiách pod galériou v prípade, ak využívate priame prehrávanie videí v galérii. Ak videá prehrávate až po kliku v popup okne, odporúčam nastaviť náhľadovú fotografiu rovnakej veľkosti, ako hlavná produktová fotka.
Ak sa nezadá žiadna url obrázku, zobrazí sa biele pozadie s tlačidlom play. Pri YouTube, YouTube Shorts a Viemo sa zobrazí náhľadová fotka videa automaticky v prípade, ak nenastavíte žiadny vlastný obrázok.
Konfigurátor galérie
Pomocou jednoduchého konfigurátora si môžete prispôsobiť vzhľad a možnosti videí v galérii. Výsledný kód skopírujete a vložíte do editora, ktorý nájdete v administrácii vašeho obchodu v časti Vzhľad a obsah – Editor – záložka HTML kód.
Príklad umiestnenia vygenerovaného kódu v administrácii Shoptet:
Záhlavie (pred uzátvárajúcím tagom HEAD)
Pätička (pred uzátvárajúcím tagom BODY)
Pre developerov - sledovanie eventov v konzole
Galéria vysiela vlastné DOM eventy, ktoré môžete počúvať vo svojom custom JS kóde. Vďaka tomu môžete reagovať na dianie v galérii bez toho, aby ste menili jej kód.
document.addEventListener('jgmProductVideoGallery:init', function() {
console.log('[JGM] Galéria načítaná');
});
document.addEventListener('jgmProductVideoGallery:slideChange', function(e) {
console.log('[JGM] Slide:', e.detail.index);
});
document.addEventListener('jgmProductVideoGallery:videoPlay', function() {
console.log('[JGM] Video spustené');
});
document.addEventListener('jgmProductVideoGallery:videoPause', function() {
console.log('[JGM] Video pauznuté');
});
document.addEventListener('jgmProductVideoGallery:fancyboxOpen', function() {
console.log('[JGM] Lightbox otvorený');
});
document.addEventListener('jgmProductVideoGallery:fancyboxClose', function() {
console.log('[JGM] Lightbox zatvorený');
});