Інтеграція UberGallery для створення галереї в OpenCart: частина 2

Від автора: у цій серії уроків ми розбираємося, як інтегрувати 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’ => htmlentities($relativePath),

Замініть її на:

‘file_path’ => htmlentities(UBER_ORIG_IMG_PATH . $key),

Всі. Причина — file_path обробляється в ядрі скрипта UberGallery. У нас папка з оригіналами зображень розташована в абсолютно іншому місці порівняно з UberGallery. Це простий фікс.

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

Front end налаштування – швидкий огляд

Швидко пробіжимося по файлів, необхідним front end.

Ці файли ми сьогодні створимо.

Створення файлів модуля

Створіть файл catalog/controller/module/uber_gallery.php з таким кодом.

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 і створює відповідний об’єкт галереї.

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

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

Приступити до створення

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

З контролером закінчили. Перейдемо до наступного файлу.

Створіть мовний файл catalog/language/english/module/uber_gallery.php з таким кодом.

У ньому задається заголовок блоку галереї на front end.

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

СТАТТІ ПО ТЕМІБІЛЬШЕ ВІД АВТОРА

Як встановити шаблон на OpenCart

Створення сторінки в OpenCart

Створення кастомного адаптера кешування для OpenCart

Розширені повідомлення про сценарії OpenCart 2.2.xx

Автоматична генерація SEO URL (ЧПУ) в OpenCart

Як включити ЧПУ в OpenCart