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

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

18 Мар 2023г. в 15:45

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

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

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

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

'file_path' => htmlentities($relativePath),
1
'file_path' => htmlentities($relativePath),
Замените ее на:

'file_path' => htmlentities(UBER_ORIG_IMG_PATH . $key),
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 со следующим кодом.

<?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);
}
}
}

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

define('UBER_ORIG_IMG_PATH', HTTP_SERVER.'image/uberGallery/');
include_once(DIR_SYSTEM.'library/uberGallery/resources/UberGallery.php');
$gallery = UberGallery::init();
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.

$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";
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 со следующим кодом.

<?php
// Heading
$_['heading_title'] = 'uberGallery';
1
2
3
<?php
// Heading
$_['heading_title'] = 'uberGallery';
В нем задается заголовок блока галереи на front end.

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


<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>


<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.