От автора: в этой серии уроков мы разбираемся, как интегрировать 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 и найдите следующую строку:
|
1 |
'file_path' => htmlentities($relativePath), |
Замените ее на:
|
1 |
'file_path' => htmlentities(UBER_ORIG_IMG_PATH . $key), |
Все. Причина — 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 со следующим кодом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php class ControllerModuleUberGallery extends Controller { public function index($setting) { $this->load->language('module/uber_gallery'); define('UBER_ORIG_IMG_PATH', HTTP_SERVER.'image/uberGallery/'); include_once(DIR_SYSTEM.'library/uberGallery/resources/UberGallery.php'); $gallery = UberGallery::init(); $data['heading_title'] = $setting['name']; $data['responsive_css_url'] = HTTP_SERVER . "system/library/uberGallery/resources/themes/uber-responsive/css/style.css"; $data['uber_css_url'] = HTTP_SERVER . "system/library/uberGallery/resources/UberGallery.css"; $data['cbox_url'] = HTTP_SERVER . "system/library/uberGallery/resources/colorbox/1/colorbox.css"; $data['js_url'] = HTTP_SERVER . "system/library/uberGallery/resources/colorbox/jquery.colorbox.js"; $data['gallery'] = $gallery; if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/uber_gallery.tpl')) { return $this->load->view($this->config->get('config_template') . '/template/module/uber_gallery.tpl', $data); } else { return $this->load->view('default/template/module/uber_gallery.tpl', $data); } } } |
Начнем сверху. Константу UBER_ORIG_IMG_PATH должна быть знакома. Ее мы объявили в начале статьи. Мы использовали ее для простого фикса в самом скрипте UberGallery.
В методе index есть важный участок кода, который подключает библиотеку UberGallery и создает соответствующий объект галереи.
|
1 2 3 |
define('UBER_ORIG_IMG_PATH', HTTP_SERVER.'image/uberGallery/'); include_once(DIR_SYSTEM.'library/uberGallery/resources/UberGallery.php'); $gallery = UberGallery::init(); |
Далее необходимо подключить пару CSS и JS файлов, необходимых для скрипта UberGallery.
|
1 2 3 4 |
$data['responsive_css_url'] = HTTP_SERVER . "system/library/uberGallery/resources/themes/uber-responsive/css/style.css"; $data['uber_css_url'] = HTTP_SERVER . "system/library/uberGallery/resources/UberGallery.css"; $data['cbox_url'] = HTTP_SERVER . "system/library/uberGallery/resources/colorbox/1/colorbox.css"; $data['js_url'] = HTTP_SERVER . "system/library/uberGallery/resources/colorbox/jquery.colorbox.js"; |
С контроллером закончили. Перейдем к следующему файлу.
Создайте языковой файл catalog/language/english/module/uber_gallery.php со следующим кодом.
|
1 2 3 |
<?php // Heading $_['heading_title'] = 'uberGallery'; |
В нем задается заголовок блока галереи на front end.
Перейдем к файлу шаблона представления. Создайте файл catalog/view/theme/default/template/module/uber_gallery.tpl со следующим кодом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- FIRST DO STATIC, after that CONVERT ALL PATH AND SETTINGS DYNAMIC --> <link rel="stylesheet" type="text/css" href="<?php echo $uber_css_url; ?>" /> <link rel="stylesheet" type="text/css" href="<?php echo $responsive_css_url; ?>" /> <link rel="stylesheet" type="text/css" href="<?php echo $cbox_url; ?>" /> <script type="text/javascript" src="<?php echo $js_url; ?>"></script> <script type="text/javascript"> $(document).ready(function(){ $("a[rel='colorbox']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5"}); }); </script> <h3><?php echo $heading_title; ?></h3> <div class="row"> <?php $gallery->createGallery(DIR_SYSTEM.'../image/uberGallery'); ?> </div> |
Здесь все также просто и стандартно – мы загружаем 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
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
