OpenCart 2.x — модуль галереи 2016-06-15

позволяет создавать столько галерей, сколько необходимо в вашем магазине: для создания независимых г

  1. admin
    Не так давно мы рассматривали довольно неплохой модуль для создания галереи на OpenCart — «Gallery Images», но при работе с движком линейки 2.x нам этот модуль не подойдет, так как он совместим в версиями 1.5.5.1-1.5.6.4. Что же можно предпринять для более свежих версий движка? Как создать галерею на OpenCart 2.x?

    Модуль «Blueimp Gallery by GrandCMS.com» позволяет создавать столько галерей, сколько необходимо в вашем магазине: для создания независимых галерей товаров, как дополнительные галереи на странице товара и т.д.

    Галереи довольно минималистичны, не имеют ничего лишнего.

    opencart20-gallery.jpg



    Pop-up окна не лишены стиля — смотрятся стильно и функционально.

    opencart20-gallery-pop-up.jpg

    В общем, если есть необходимость реализовать в магазине галерею (или галереи) не вычурного вида, то смело можно воспользоваться модулем «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 — включаем галерею.

    opencart-gallery-settings.jpg



    5. Итак, изображения загружены в определенный баннер, модуль галереи настроен, теперь необходимо вывести галерею в магазин. Вывести галерею можно на любой схеме магазина: в категориях, на страницах товаров, информационных страницах. Для этого необходимо перейти в Система/Дизайн/Макеты и выбрать тот макет (или схему), на котором хотим вывести галерею. Например, если мы хотим вывести галерею на главной, то заходим в «Home» и добавляем вывод модуля созданной нами галереи.

    opencart-gallery-settings-maket.jpg



    Этим мы дали галерее указание отображаться на главной странице, внизу.

    opencart-gallery-bottom-page.jpg



    Подобным образом, заходя в нужный макет, можно вывести галерею в любом другом месте магазина, хоть в сайдбаре размещайте.

    opencart-gallery-sidebar.jpg



    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 для главной страницы. Теперь у нас в главном меню появилась новая вкладка, перейдя по которой можно увидеть галерею изображений.

    opencart-gallery.jpg



    Как вы уже успели заметить, изображения галереи не имеют названий. Если они вам не нужны, то значит все ок, если все же есть надобность отображать заголовки изображений, то для этого необходимо добавить несколько строк кода в файл галереи.

    Открываем файл catalog/view/theme/default/template/module/gallery.tpl и находим строку

    Код:
    <div class="image"><ahref="<?phpecho$gimage['image'];?>"title="<?phpecho$gimage['title'];?>"data-gallery="#blueimp-gallery-links<?phpecho$module;?>"><img src="<?phpecho$gimage['thumb'];?>"alt="<?phpecho$gimage['title'];?>"title="<?phpecho$gimage['title'];?>"class="img-responsive"/></a></div>
    после нее размещаем

    Код:
    <?phpif($gimage['title']){?>
    <div class="name"><ahref="<?phpecho$gimage['link'];?>"><?phpecho$gimage['title'];?></a></div>
    <?php}?>
    и у нас появятся заголовки как под миниатюрами, так и в pop-up окне изображения. Стилей, конечно, классу «name» мы не прописывали поэтому заголовки выглядят просто и, можно сказать, неоформлено, но это уже совсем другая тема (да здравствуют стили, которые помогут придать любой желаемый вид).

    Вот таким образом можно реализовать добавление галереи в магазина на OpenCart 2.x.
    abbglmga, Alexandr1993, Marusya_Ami и 41 другим нравится это.

Пoследние рецензии

  1. SergeiZZ
    SergeiZZ
    5/5,
    Версия: 2016-06-15
    Установил на ocStore 2.1.0.2.1 Все работает. Устанавливал вручную. Все залил в корень сайта. (все из папки -upload, все из папки -clean-category-page-v1.0)
    Уважуха!
    Сергей