Не так давно мы рассматривали довольно неплохой модуль для создания галереи на OpenCart – “Gallery Images”, но при работе с движком линейки 2.x нам этот модуль не подойдет, так как он совместим в версиями 1.5.5.1-1.5.6.4. Что же можно предпринять для более свежих версий движка? Как создать галерею на OpenCart 2.x?Модуль “Blueimp Gallery by GrandCMS.com” позволяет создавать столько галерей, сколько необходимо в вашем магазине: для создания независимых галерей товаров, как дополнительные галереи на странице товара и т.д.
Галереи довольно минималистичны, не имеют ничего лишнего.
Pop-up окна не лишены стиля – смотрятся стильно и функционально.
В общем, если есть необходимость реализовать в магазине галерею (или галереи) не вычурного вида, то смело можно воспользоваться модулем “Blueimp Gallery by GrandCMS.com”. Конечно, яркости всегда можно добиться с помощью стилей.
Установка и настройка модуля
1. Скачиваем модуль “Blueimp Gallery by GrandCMS.com”. Модуль совместим с версиями 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1.
2. Отправляемся в админку магазина/Модули/Установка расширений и загружаем скачанный архив.
3. Переходим в “Модификаторы”, включаем галерею (Blueimp Gallery by GrandCMS.com) и нажимаем кнопку “Обновить” в правом верхнем углу.
4. Идем во вкладку “Модули” и активируем “Gallery”. Заходим в “Gallery”, чтобы настроить модуль:
– Module Name – задаем индивидуальное название модуля если собираемся создавать больше одной галереи, чтобы при добавлении каждой галереи в определенный макет не запутать самих себя, это имя будет видно только вам в админке;
– Title – добавляем, по желанию, название галереи, то название, которое будет отображаться на странице вывода галереи;
– Banner – указываем изображения из какого баннера должны отображаться в галерее. Если вы предварительно не создали баннер с нужными фотографиями или изображениями, то это необходимо сделать в Система/Дизайн/Баннеры;
– Resized Images – можете выбрать “да”, если хотите, чтобы в pop-up оконе все изображения открывались одного размера, если вы их не отресайзили перед загрузкой в магазин. Если же вас не смущают разнокалиберные изображения во всплывающем окне, то можете выбрать “нет” и изображения будут открываться такого размера, какого были загружены;
– Status – включаем галерею.
5. Итак, изображения загружены в определенный баннер, модуль галереи настроен, теперь необходимо вывести галерею в магазин. Вывести галерею можно на любой схеме магазина: в категориях, на страницах товаров, информационных страницах. Для этого необходимо перейти в Система/Дизайн/Макеты и выбрать тот макет (или схему), на котором хотим вывести галерею. Например, если мы хотим вывести галерею на главной, то заходим в “Home” и добавляем вывод модуля созданной нами галереи.
Этим мы дали галерее указание отображаться на главной странице, внизу.
Подобным образом, заходя в нужный макет, можно вывести галерею в любом другом месте магазина, хоть в сайдбаре размещайте.
Как вы уже успели заметить, изображения галереи не имеют названий. Если они вам не нужны, то значит все ок, если все же есть надобность отображать заголовки изображений, то для этого необходимо добавить несколько строк кода в файл галереи.
Открываем файл catalog/view/theme/default/template/module/gallery.tpl и находим строку
после нее размещаем
и у нас появятся заголовки как под миниатюрами, так и в pop-up окне изображения. Стилей, конечно, классу “name” мы не прописывали поэтому заголовки выглядят просто и, можно сказать, неоформлено, но это уже совсем другая тема (да здравствуют стили, которые помогут придать любой желаемый вид).
Вот таким образом можно реализовать добавление галереи в магазина на OpenCart 2.x.
Галереи довольно минималистичны, не имеют ничего лишнего.
Pop-up окна не лишены стиля – смотрятся стильно и функционально.
Установка и настройка модуля
1. Скачиваем модуль “Blueimp Gallery by GrandCMS.com”. Модуль совместим с версиями 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1.
2. Отправляемся в админку магазина/Модули/Установка расширений и загружаем скачанный архив.
3. Переходим в “Модификаторы”, включаем галерею (Blueimp Gallery by GrandCMS.com) и нажимаем кнопку “Обновить” в правом верхнем углу.
4. Идем во вкладку “Модули” и активируем “Gallery”. Заходим в “Gallery”, чтобы настроить модуль:
– Module Name – задаем индивидуальное название модуля если собираемся создавать больше одной галереи, чтобы при добавлении каждой галереи в определенный макет не запутать самих себя, это имя будет видно только вам в админке;
– Title – добавляем, по желанию, название галереи, то название, которое будет отображаться на странице вывода галереи;
– Banner – указываем изображения из какого баннера должны отображаться в галерее. Если вы предварительно не создали баннер с нужными фотографиями или изображениями, то это необходимо сделать в Система/Дизайн/Баннеры;
– Resized Images – можете выбрать “да”, если хотите, чтобы в pop-up оконе все изображения открывались одного размера, если вы их не отресайзили перед загрузкой в магазин. Если же вас не смущают разнокалиберные изображения во всплывающем окне, то можете выбрать “нет” и изображения будут открываться такого размера, какого были загружены;
– Status – включаем галерею.
5. Итак, изображения загружены в определенный баннер, модуль галереи настроен, теперь необходимо вывести галерею в магазин. Вывести галерею можно на любой схеме магазина: в категориях, на страницах товаров, информационных страницах. Для этого необходимо перейти в Система/Дизайн/Макеты и выбрать тот макет (или схему), на котором хотим вывести галерею. Например, если мы хотим вывести галерею на главной, то заходим в “Home” и добавляем вывод модуля созданной нами галереи.
Этим мы дали галерее указание отображаться на главной странице, внизу.
Подобным образом, заходя в нужный макет, можно вывести галерею в любом другом месте магазина, хоть в сайдбаре размещайте.
6. Но что, если необходимо вывести галерею на одной определенной странице? Ведь если указать макет “Information”, то модуль галереи сработает на всех информационных страницах, точно также дело обстоит с категориями и товарами.
В этом случае мы не будем идти сложным путем, а воспользуемся модулем “Clean Category page”, создадим новую схему и категорию. А теперь по порядку:
– скачиваем и устанавливаем модуль “Clean Category page” (Суть модуля заключается в том, чтобы убирать со страницы категорий заголовок, кнопку “Продолжить” и фразу о том, что в этой категории нет товаров, когда их действительно нет в этой категории). Будьте внимательны при скачивании модуля, есть две версии для движка версий 1.5.5-1.5.6.4 и для 2.0.1.0, 2.0.1.1 (я тестировала на 2.0.2.0 – работает отлично, правда я на данной версии не использую vqmod, модуль размещала вручную).
– отправляемся в Система/Дизайн/Макеты и создаем новый макет, даем ему название, которое будет говорить нам о его сути (“Галерея товаров”, “Новинки сезона” и т.д.)
– идем в Каталог/Категории и создаем категорию с аналогичным названием. Отмечаем в настройках “Главное меню”, если хотим, чтобы в меню появилась вкладка “Галерея товаров” (вкладка с таким названием, которое носит ваша категория). В табе “Дизайн” меняем схему на ту, которую мы создали!
– возвращаемся в Система/Дизайн/Макеты, выбираем созданный нами макет и добавляем на него нашу галерею, как мы это делали в пункте 5 для главной страницы. Теперь у нас в главном меню появилась новая вкладка, перейдя по которой можно увидеть галерею изображений.
В этом случае мы не будем идти сложным путем, а воспользуемся модулем “Clean Category page”, создадим новую схему и категорию. А теперь по порядку:
– скачиваем и устанавливаем модуль “Clean Category page” (Суть модуля заключается в том, чтобы убирать со страницы категорий заголовок, кнопку “Продолжить” и фразу о том, что в этой категории нет товаров, когда их действительно нет в этой категории). Будьте внимательны при скачивании модуля, есть две версии для движка версий 1.5.5-1.5.6.4 и для 2.0.1.0, 2.0.1.1 (я тестировала на 2.0.2.0 – работает отлично, правда я на данной версии не использую vqmod, модуль размещала вручную).
– отправляемся в Система/Дизайн/Макеты и создаем новый макет, даем ему название, которое будет говорить нам о его сути (“Галерея товаров”, “Новинки сезона” и т.д.)
– идем в Каталог/Категории и создаем категорию с аналогичным названием. Отмечаем в настройках “Главное меню”, если хотим, чтобы в меню появилась вкладка “Галерея товаров” (вкладка с таким названием, которое носит ваша категория). В табе “Дизайн” меняем схему на ту, которую мы создали!
– возвращаемся в Система/Дизайн/Макеты, выбираем созданный нами макет и добавляем на него нашу галерею, как мы это делали в пункте 5 для главной страницы. Теперь у нас в главном меню появилась новая вкладка, перейдя по которой можно увидеть галерею изображений.
Как вы уже успели заметить, изображения галереи не имеют названий. Если они вам не нужны, то значит все ок, если все же есть надобность отображать заголовки изображений, то для этого необходимо добавить несколько строк кода в файл галереи.
Открываем файл catalog/view/theme/default/template/module/gallery.tpl и находим строку
1
|
<div class="image"><a href="<?php echo $gimage['image']; ?>" title="<?php echo $gimage['title']; ?>" data-gallery="#blueimp-gallery-links<?php echo $module; ?>"><img src="<?php echo $gimage['thumb']; ?>" alt="<?php echo $gimage['title']; ?>" title="<?php echo $gimage['title']; ?>" class="img-responsive" /></a></div>
|
после нее размещаем
1
2
3
|
<?php if ($gimage['title']) { ?>
<div class="name"><a href="<?php echo $gimage['link']; ?>"><?php echo $gimage['title']; ?></a></div>
<?php } ?>
|
Вот таким образом можно реализовать добавление галереи в магазина на OpenCart 2.x.
Немає коментарів:
Дописати коментар