Hogyan készítsünk képgalériát a termékkatalógusban?

Helló, ebben a cikkben megpróbálom elmondani neked, hogy az UMI.CMS-en hogyan lehet egyszerűen hozzáadni az áruk fotóalbumát.

Csak azt szeretném megjegyezni, hogy a szabványos UMI.CMS 2.8.6 verziót használom, és a sablon demoold a TPL sablonhoz. Számomra az összes sablon az apu-sablonban \ demoold, tehát olyan módon, hogy lehet eltérés a tiéd.

Először meg kell menni az "Adattábla", majd a könyvtár objektumra. A szabványos UMI.CMS-t használom, ezért szerkesztem a "Hamster" objektumot

Az UMI.CMS adat sablon elrendezése

Most új csoportot kell hozzáadnia - "További képek", az "extra_images" azonosítóval:

Ezután adja hozzá az új mezőket, például egy képet, és tegye láthatóvá. A nevek önkényesek lehetnek:

TIP. két csoportra van szüksége. Az első csoportban egy főképnek kell lennie, a második csoportban pedig nagyobbat kell létrehoznia, majd a megtekinteni kívánt képek számát.

Miután hozzáadta a csoportokat és mezőket, menjen a "Katalógus" modulba, és keresse meg a kívánt objektumot, és adja hozzá a képeket a termékhez:

Most további képeket kell megjeleníteni, és csatlakoztatni kell a galéria parancsfájlt.

Galéria csatlakoztatása az UMI.CMS-hez

Galériaként a fancyBox-ot szeretem használni.

Menjen a fejlesztő webhelyére, és töltse le. Ha hirtelen valami nem áll rendelkezésre, akkor közvetlenül letöltheti a fancyBoxot.

Csatlakoztassa magát a szkriptet az UMI.CMS sablonhoz.

Csomagolja ki a script fájlokat a sablon mappában nyissa meg a sablont, amely felelős a termelés a könyvtár tárgy, azaz egy termékkártya 😉 és csatlakoztassa az összes CSS és JS fájlt a fancyBoxhoz. Csatlakoztassa az összes js fájlt a makrók után vagy a címke előtt , hogy a szkriptek a legfrissebbek legyenek betöltve:

Miután összekapcsoltam a CSS-t, az úton voltak:

Ezenkívül azonnal csatlakoztathatja a fancyBox funkcióhívást paraméterekkel, amelyek segítségével a galéria a termék kártyáján keresztül csatlakozhat. Mivel a galéria "Thumbnail helper" lesz használva, többet a demóban:

A galériának felelős szkriptek kapcsolódnak, most már fájlokat lehet kinyerni a webhelyadatbázisból.

További képek kimenete az UMI.CMS katalógusban

A főkép kimenetéhez használja a .ata getProperty ()% makrót.

.ata getProperty ()% - Megjeleníti az oldal tulajdonságait egy adott sablonhoz.

A \ templates \ demoold \ tpls \ catalog \ könyvtárba kell mennie. egy minta, amely felelős a kimeneti kártya az áruk, van ez a termék-details.view.tpl, és részben

Adja hozzá a .ata getProperty ()% makró paramétereket, a paraméterek eltérhetnek az enyémtől

Ezután a sablonkatalógusban_view.tpl sablonban, amely a Thumbnail termék - \ sablonok \ demoold \ tpls \ data kimenetéért felelős, és kicseréli a fájl tartalmát:

Ha nincs ilyen fájlod, létre kell hoznod.

% system makeThumbnail ()% - A megadott kép indexképének (miniatűr) létrehozása és megjelenítése.

A termék fő képe megjelenik a webhelyen, megnézheti és megnézheti. Továbbá, ha rákattint a képre, akkor van fancyBox.

Továbbra is az UMI.CMS katalógus objektum további képeinek továbbítása. A kimenethez a .ata macro getPropertyGroup ()%

.ata getPropertyGroup ()% - Egy adott sablonhoz tartozó oldal tulajdonságainak megjelenítése.

Nyissa meg az áru kártya megjelenítéséért felelős fájlt, és adj hozzá egy makrót a .ata getPropertyGroup paraméterekkel (% id%, 'extra_images', 'extra_images')%.

Adja hozzá ezt a makrót a következő szakaszhoz:

Ezután keresse meg a \ templates \ demoold \ tpls \ data könyvtárat, és hozzon létre egy extra_images.tpl fájlt. A következő kódot kell hozzáadni ehhez a fájlhoz:

Most menj az oldalra, és frissítsd az oldalt:

Próbálja kipróbálni a képet, és kis másolatokkal felugró ablakot kap.

Ha bármilyen kérdése van, kérje! Örömmel fogok válaszolni!

Kapcsolódó cikkek

• Hogyan készítsünk képeket egy kör alakú blogban, a cheat sheet bloggereket

• Áruk katalógusa

• Vásárlás katalógusokhoz - előny és hátrány