UMI.CMS. Как сделать в каталоге товаров галерею изображений

Здравствуйте, в этой статье я постараюсь вам рассказать о том как на UMI.CMS можно легко добавить фото галерею товаров.

UMI.CMS. Как сделать в каталоге товаров галерею изображений

Сразу хочу отметить, что я использую стандартную UMI.CMS версии 2.8.6, и шаблон demoold с TPL шаблонизатором. У меня все шаблоны хранятся в папочке template\demoold, поэтому в путях может быть несовпадение с вашими.

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

Разметка шаблона данных UMI.CMS

Галерея изображений. UMI.CMS Галерея изображений. UMI.CMS

Теперь нужно добавить новую группу — «Дополнительные изображения», с идентификатором «extra_images»:

Галерея. UMI.CMS

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

Галерея изображений. UMI.CMS

TIP: у вас должно быть две группы. В первой группе должно быть основное изображение и во второй группе, вы создавали ее выше, то количество изображений, которое вы хотите, чтобы видел ваш пользователь.

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

Галерея изображений. UMI.CMS

Галерея изображений. UMI.CMSТеперь следует вывести дополнительные изображения и подключить скрипт галереи.

Подключение галереи для 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

Галерея изображений. UMI.CMS

Осталось вывести дополнительные изображений объекта каталога 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;
?>

На этом все.

Теперь переходите на сайт и обновляете страницу:
Галерея изображений. UMI.CMS

Попробуйте нажать на изображение и получите всплывающие изображение с уменьшенными копиями.
Галерея изображений. UMI.CMS

Если у вас возникнут вопросы, задавайте! С радостью отвечу!

Bookmark the permalink.

Также может быть интересно: