UMI.CMS. Как сделать в каталоге товаров галерею изображений
Здравствуйте, в этой статье я постараюсь вам рассказать о том как на 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 файлы следует после макросов или перед тегом </body>, чтобы скрипты загружались самыми последними:
%system includeQuickEditJs()% %system includeEditInPlaceJs()%
После того, как я подключить CSS они находились у меня по следующему пути:
<link href="/templates/demoold/fancyBox/source/jquery.fancybox.css?v=2.1.4" rel="stylesheet" media="screen" type="text/css" /> <link href="/templates/demoold/fancyBox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" rel="stylesheet" type="text/css" /> <link href="/templates/demoold/fancyBox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" rel="stylesheet" type="text/css" />
И js файлы:
<script type="text/javascript" src="/templates/demoold/fancyBox/lib/jquery.mousewheel-3.0.6.pack.js"></script> <script type="text/javascript" src="/templates/demoold/fancyBox/source/jquery.fancybox.js?v=2.1.4"></script> <script type="text/javascript" src="/templates/demoold/fancyBox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="/templates/demoold/fancyBox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> <script type="text/javascript" src="/templates/demoold/fancyBox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
Также сразу можно подключить вызов функции fancyBox с параметрами, для подключения галереи на карточке товара. В качестве галереи будет использоваться «Thumbnail helper», подробнее в демо:
jQuery(function($) {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
Со всеми параметрами можно ознакомится на сайте автора
Скрипты отвечающие за галерею подключены, теперь пожно выводить файлы из БД сайта.
Вывод дополнительных изображений в каталоге UMI.CMS
Для вывода главного изображения следует воспользоваться макросом %data getProperty ()%.
%data getProperty ()% — Выводит свойство страницы по определенному шаблону.
Нужно перейти в директорию \templates\demoold\tpls\catalog\ , в шаблон, который отвечает за вывод карточки товара, у меня это products-details.view.tpl, и в секцию
$FORMS['view_block'] = <<<END END;
Добавить макрос %data getProperty ()% с параметрами, параметры могут быть отличными от моих
%data getProperty(%id%, 'photo', 'catalog_view')%
Далее в шаблон catalog_view.tpl, который отвечает за вывод Thumbnail товара - \templates\demoold\tpls\data, и заменить содержимое файла на:
<?php
$FORMS = Array();
$FORMS['img_file'] = <<<END
<a href="%src%" class="fancybox-thumb" rel="fancybox-thumb" title="%h1%">
%system makeThumbnail(%filepath%, 450, 'auto', 'catalog_view')%
</a>
END;
?>
Если у вас нет этого файла, то нужно создать его.
%system makeThumbnail ()% — Создает и выводит уменьшенное изображение (миниатюру) указанной картинки.
Главное изображение товара выведено на сайт, можете зайти и проверить. Также если вы нажмете на изображение, то у вас сработает fancyBox.
Осталось вывести дополнительные изображений объекта каталога UMI.CMS. Для вывода нужно воспользоваться макросом %data getPropertyGroup ()%
%data getPropertyGroup ()% — Выводит группу свойств страницы по определенному шаблону.
Открываете файл, который отвечает за отображение карточки товара, и добавить макрос с параметрами %data getPropertyGroup (%id%, 'extra_images', 'extra_images')%.
Добавить этот макрос нужно в секцию:
$FORMS['view_block'] = <<<END %data getProperty(%id%, 'photo', 'catalog_view')% END;
под макрос:
%data getProperty(%id%, 'photo', 'catalog_view')%
Далее нужно перейти в каталог \templates\demoold\tpls\data, и там создать файл extra_images.tpl. В этот файл следует добавить код ниже:
<?php
$FORMS = Array();
$FORMS['group'] = <<<END
%lines%
END;
$FORMS['group_line'] = <<<END
%prop%
END;
$FORMS['img_file'] = <<<END
<a href="%src%" class="fancybox-thumb" rel="fancybox-thumb" title="%h1%">
%system makeThumbnail(%filepath%, 70, 'auto', 'catalog_view')%
</a>
END;
?>
На этом все.
Теперь переходите на сайт и обновляете страницу:
Попробуйте нажать на изображение и получите всплывающие изображение с уменьшенными копиями.
Если у вас возникнут вопросы, задавайте! С радостью отвечу!