OpenCart 2.x — модуль галереи
Не так давно мы рассматривали довольно неплохой модуль для создания галереи на 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» и добавляем вывод модуля созданной нами галереи.
Этим мы дали галерее указание отображаться на главной странице, внизу.
Подобным образом, заходя в нужный макет, можно вывести галерею в любом другом месте магазина, хоть в сайдбаре размещайте.
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 для главной страницы. Теперь у нас в главном меню появилась новая вкладка, перейдя по которой можно увидеть галерею изображений.
Как вы уже успели заметить, изображения галереи не имеют названий. Если они вам не нужны, то значит все ок, если все же есть надобность отображать заголовки изображений, то для этого необходимо добавить несколько строк кода в файл галереи.
Открываем файл 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 } ?> |
и у нас появятся заголовки как под миниатюрами, так и в pop-up окне изображения. Стилей, конечно, классу «name» мы не прописывали поэтому заголовки выглядят просто и, можно сказать, неоформлено, но это уже совсем другая тема (да здравствуют стили, которые помогут придать любой желаемый вид).
Вот таким образом можно реализовать добавление галереи в магазина на OpenCart 2.x.
Спасибо большое за ответ !!! буду пробовать !!!
Удачи в освоении OpenCart 2.x!
Впервые смотрю новый (второй) opencart и не понял, что за такие модификаторы. Модули — знаем, а модификаторы — впервые слышим. И как они связаны с модулями? Спасибо!
Всё, разобрался!
Огромное спасибо, читаю ваши посты и делаю то, что мне нужно!!!
Еще раз огромное спасибо…
Спасибо за отзыв!
Спасибо за подробную инструкцию! Добавлю сайт в закладки. Пригодится.
Спасибо за отзыв!
как Вы прописали модуль вручную чтобы убрать с категории товаров текст В данной категории нет товаров.
Убрать эту фразу можно либо в коде, либо с помощью модуля «Clean Category page».
Здравствуйте! Скажите пожалуйста а как сделать чтобы в ряд выводилась не 4 картинки как на примере, а к примеру 5.
ocStore 2.1.0.1 При установке через FTP, Gallery не появилось в списке модулей, при закачке через “QuickFix: Extensions Installer issue when FTP support disabled” — появилось.
Добавлю к своему комментарию. Остается проблема — страница помещается в список категорий с количеством товара «ноль».
Если галерея выведена в главное меню, то можно реализовать при клике по менюшке вывод галереии в виде альбомов, а внутри каждого альбома определенные фото
Все установилось без проблем, спасибо. Но галерея выводится в списке категории. То есть, заголовок «Категории» и в списке вместе с категориями галерея. Есть возможность вывести из списка категорий?
Модуль на версии ocStore 2.1.0.2.1 по ходу не пашет :( а так нужен :(
Спасибо за замечательную, нужную статью. Подскажите, с помощью этого модуля получится организовать галерею с подкатегориями(страница с папками фоток, при переходе в одну из них вываливаются ее фотки)??
Помогите, при установке модуля Blueimp Gallery by GrandCMS.com выдается ошибка Неправильный тип файла и в галерее не работают всплывающие окна, как решить?
Как вывести галерею в описании категорий или на отдельных страницах (статьях). Заранее благодарен
«правда я на данной версии не использую vqmod, модуль размещала вручную» — Как это сделать?
Спасибо добрый человек!!!!!