Интеграция 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 и найдите следующую строку:

Интернет-магазин на OpenCart!

Создайте интернет-магазин на самой популярной CMS – OpenCart с нуля!

Приступить к созданию

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

Все. Причина — 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 и создает соответствующий объект галереи.

Интернет-магазин на OpenCart!

Создайте интернет-магазин на самой популярной CMS – OpenCart с нуля!

Приступить к созданию

Далее необходимо подключить пару 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.

Интернет-магазин на OpenCart!

Создайте интернет-магазин на самой популярной CMS – OpenCart с нуля!

Приступить к созданию

Интернет-магазин на OpenCart

Создание магазина с уникальным шаблоном на CMS OpenCart

Научиться

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree