Интеграция UberGallery для создания галереи в OpenCart: часть 2

Интеграция UberGallery — создание галереи для OpenCart

От автора: в этой серии уроков мы разбираемся, как интегрировать UberGallery скрипт, чтобы получилась красивая галерея OpenCart 2. Для этого мы создаем модуль в OpenCart для нативной работы. В первой части мы разобрали back end сторону кастомного модуля и создали отличную форму настроек, с помощью которой можно с легкостью изменять параметры UberGallery. Сегодня мы рассмотрим front end часть, отвечающую за то, как выводится галерея OpenCart 2.

Если вы не читали первую часть, настоятельно рекомендую сделать это, так как код этой статьи в основном полагается на первый урок. В первой части мы сделали все, чтобы наш back end работал правильно, особенно это относится к странице настройки UberGallery. В этой части мы сосредоточимся на front end.

Создадим все необходимое с точки зрения front end пользователя.

Быстрый фикс в UberGallery

Нужно слегка поправить скрипт UberGallery, чтобы он плавно работал с модулем OpenCart.

Откройте файл system/library/uberGallery/resources/UberGallery.php и найдите следующую строку:

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

Замените ее на:

Все. Причина — file_path обрабатывается в ядре скрипта UberGallery. У нас папка с оригиналами изображений расположена в абсолютно другом месте по сравнению с UberGallery. Это простой фикс.

Создайте новую папку image/uberGallery, дайте ей права на запись со стороны сервера. В нее мы будем загружать оригиналы изображений галереи.

Front end настройка – быстрый обзор

Быстро пробежимся по файлам, необходимым на front end.

catalog/controller/module/uber_gallery.php: файл контроллера, обеспечивающий приложение логикой обычного контроллера в OpenCart.

catalog/language/english/module/uber_gallery.php: языковой файл для установки языковых лейблов.

catalog/view/theme/default/template/module/uber_gallery.tpl: файл шаблона представления с XHTML кодом формы настроек.

Эти файлы мы сегодня создадим.

Создание файлов модуля

Создайте файл catalog/controller/module/uber_gallery.php со следующим кодом.

Начнем сверху. Константу UBER_ORIG_IMG_PATH должна быть знакома. Ее мы объявили в начале статьи. Мы использовали ее для простого фикса в самом скрипте UberGallery.

В методе index есть важный участок кода, который подключает библиотеку UberGallery и создает соответствующий объект галереи.

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

Далее необходимо подключить пару CSS и JS файлов, необходимых для скрипта UberGallery.

С контроллером закончили. Перейдем к следующему файлу.

Создайте языковой файл catalog/language/english/module/uber_gallery.php со следующим кодом.

В нем задается заголовок блока галереи на front end.

Перейдем к файлу шаблона представления. Создайте файл catalog/view/theme/default/template/module/uber_gallery.tpl со следующим кодом.

Здесь все также просто и стандартно – мы загружаем CSS и JS файлы. Далее инициализируется скрипт colorbox, который строит галерею. Также необходимо вызвать метод createGallery, поскольку мы передали объект $gallery из контроллера. С настройкой front end файлов закончили.

Осталось еще кое-что, что необходимо сделать перед тестированием галереи. Загрузите несколько изображений в папку image/uberGallery – папка, которую мы указали как аргумент в методе createGallery в файле шаблона.

Назначение модуля UberGallery макету домашней страницы

Зайдите на back end и далее System > Design > Layouts. Отредактируйте макет home и добавьте модуль uberGallery в положение Content Bottom, как показано на скриншоте ниже.

Сохраните изменения и перейдите на front end на домашнюю страницу. Вы должны увидеть красивую галерею! Мы также интегрировали colorbox. Кликните на изображение, откроется слайдшоу с перекрытием.

Поиграйтесь с настройками. Думаю, вы будете рады, что вся тяжелая работа окупилась! Но это был лишь простой, но эффективный пример того, что можно сделать с помощью кастомного модуля OpenCart.

На сегодня все. Этот урок заканчивает серию. Надеюсь, я скоро вернусь с новыми статьями по OpenCart. А пока что разрешите мне отлучиться на чашечку кофе. Заодно почитаю парочку замечательных уроков на Envato Tuts+, как обычно.

Заключение

В этой серии мы интегрировали популярный скрипт веб-галереи UberGallery в OpenCart. В серии из двух частей мы изучили разные аспекты кастомных модулей в OpenCart и успешно создали back end и front end составляющие модуля. Твердо верю, что серия продемонстрировала возможности кастомных модулей OpenCart.

Автор: Sajal Soni

Источник: http://code.tutsplus.com/

Редакция: Команда webformyself.

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Получить курс сейчас!

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий