Як зробити в каталозі товарів галерею зображень

Привіт, в цій статті я постараюся вам розповісти про те як на UMI.CMS можна легко додати фото галерею товарів.

Відразу хочу відзначити, що я використовую стандартну UMI.CMS версії 2.8.6, і шаблон demoold з TPL шаблонізатором. У мене все шаблони зберігаються в таткові template \ demoold, тому в шляхах може бути розбіжність з вашими.

Для початку потрібно зайти в «Шаблони даних», далі в об'єкт каталогу. Я використовую стандартну UMI.CMS, тому буду редагувати об'єкт «Хом'ячок»

Розмітка шаблону даних UMI.CMS

Тепер потрібно додати нову групу - «Додаткові зображення», з ідентифікатором «extra_images»:

Далі слід додати нові поля, типу зображення, і зробити їх видимими. Назви можуть бути довільними:

TIP. у вас повинно бути дві групи. У першій групі повинно бути основне зображення і в другій групі, ви створювали її вище, то кількість зображень, яке ви хочете, щоб бачив ваш користувач.

Після того, як додані групи і поля, слід перейти в модуль «Каталог», і зайти в потрібний вам об'єкт і додати зображення до товару:

Тепер слід вивести додаткові зображення і підключити скрипт галереї.

Підключення галереї для UMI.CMS

Як галереї я люблю використовувати fancyBox.

Переходьте на сайт розробника, і завантажуєте його. Якщо раптом щось недоступне, то ви можете завантажити fancyBox прям тут.

Тепер слід підключити сам скрипт до шаблону UMI.CMS.

Розпаковуєте файли скрипта в папці вашого шаблону, відкриваєте шаблон, який відповідає за виведення об'єкта каталогу, тобто картку товару 😉 і підключити всі CSS і JS файлів fancyBox. Підключати всі js файли слід після макросів або перед тегом , щоб скрипти завантажувалися найостаннішими:

Після того, як я підключити CSS вони перебували у мене за наступним шляхом:

Також відразу можна підключити виклик функції fancyBox з параметрами, для підключення галереї на картці товару. Як галереї буде використовуватися «Thumbnail helper», докладніше в демо:

Скрипти відповідають за галерею підключені, тепер жни виводити файли з БД сайту.

Висновок додаткових зображень в каталозі UMI.CMS

Для виведення головного зображення слід скористатися макросом .ata getProperty ()%.

.ata getProperty ()% - Виводить властивість сторінки за певним шаблоном.

Потрібно перейти в директорію \ templates \ demoold \ tpls \ catalog \. в шаблон, який відповідає за виведення картки товару, у мене це products-details.view.tpl, і в секцію

Додати макрос .ata getProperty ()% з параметрами, параметри можуть бути відмінними від моїх

Далі в шаблон catalog_view.tpl, який відповідає за виведення Thumbnail товару - \ templates \ demoold \ tpls \ data, і замінити вміст файлу на:

Якщо у вас немає цього файлу, то потрібно створити його.

% System makeThumbnail ()% - Створює і виводить зменшене зображення (мініатюру) зазначеної картинки.

Головне зображення товару виведено на сайт, можете зайти і перевірити. Також якщо ви натиснете на зображення, то у вас спрацює fancyBox.

Залишилося вивести додаткові зображень об'єкта каталогу UMI.CMS. Для виведення потрібно скористатися макросом .ata getPropertyGroup ()%

.ata getPropertyGroup ()% - Виводить групу властивостей сторінки за певним шаблоном.

Відкриваєте файл, який відповідає за відображення картки товару, і додати макрос з параметрами .ata getPropertyGroup (% id%, 'extra_images', 'extra_images')%.

Додати цей макрос потрібно в секцію:

Далі потрібно перейти в каталог \ templates \ demoold \ tpls \ data, і там створити файл extra_images.tpl. У цей файл слід додати код нижче:

Тепер переходите на сайт і оновлюєте сторінку:

Спробуйте натиснути на зображення і отримаєте спливаючі зображення зі зменшеними копіями.

Якщо у вас виникнуть питання, задавайте! З радістю відповім!

Схожі статті

• Як зробити зображення в блозі круглої форми, шпаргалки блогерша

• Каталог товарів

• Купівля товарів за каталогами - плюси і мінуси