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

19

Від автора: UberGallery – простий PHP скрипт для створення красивої галереї зображень з генерацією превью на льоту. Необхідно лише завантажити зображення в потрібну папку, і галерея для OpenCart буде готова. Наше завдання – створити модуль, який буде використовувати UberGallery для генерації галереї, але за правилами OpenCart. В back end повинна бути можливість змінювати параметри, такі як ширина превью, висота превью і т. д. З цим вимогам я створю блок галереї на front end сторінках.

Сьогодні ми вивчимо back end частина. Ми створимо файли, необхідні для форми налаштувань в back end модулі. Припускаю, що ви знаєте основи процесу модульної розробки в OpenCart, так як ми опустимо їх. Ви повинні працювати в останній версії OpenCart, щоб слідувати за кодом.

Створення файлів – швидкий огляд

Давайте швидко пробіжимося по файлів back end.

admin/controller/module/uber_gallery.php: файл контролера, що забезпечує додаток логікою звичайного контролера OpenCart.

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

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

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

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

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

admin/view/template/module/uber_gallery.tpl: файл шаблону подання, в якому зберігається XHTML код форми налаштувань.

system/library/uberGallery: сам компонент UberGallery.

Сьогодні ми створимо всі ці файли. Я створю кастомний форму налаштувань для модуля UberGallery, щоб ви могли налаштувати параметри через back end.

Не будемо витрачати час, перейдемо до найцікавішого.

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

Перед створенням файлів скачайте UberGallery з офіційного сайту та скопіюйте папку resource в system/library/uberGallery/resources.

Створіть файл system/library/uberGallery/resources/oc.galleryConfig.ini з наступним кодом.

; This is the default UberGallery config file. Copy this file to galleryConfig.php
; and change the following values to customize your gallery.
[basic_settings]
cache_expiration = [cache_expiration] ; Cache expiration time in minutes
; Set to -1 for permanent caching
enable_pagination = true ; Set to ‘true’ to enable pagination
paginator_threshold = 10 ; Maximum number of pages to display
; in the paginator before truncating
thumbnail_width = [thumbnail_width] ; Thumbnail width (in pixels)
thumbnail_height = [thumbnail_height] ; Thumbnail height (in pixels)
thumbnail_quality = [thumbnail_quality] ; Thumbnail quality from 1 — 100
; Higher = better quality / slower
theme_name = uber-responsive ; Theme used to style the gallery
[advanced_settings]
images_per_page = [thumbnail_count] ; Images displayed per page, requires
; enable_pagination be set to ‘true’
images_sort_by = natcasesort ; Method used to sort image array
; Available sorting options include:
; asort, arsort, ksort, krsort,
; natcasesort, natsort, shuffle
reverse_sort = false ; Set to ‘true’ to reverse sort order
enable_debugging = false ; Output debug messages

Файл схожий з файлом налаштувань UberGallery galleryConfig.ini, але з плейсхолдерами. З його допомогою ми будемо створювати цей файл конфігурацій на льоту, коли адмін буде зберігати форму налаштувань через back end.

За вимогами UberGallery необхідно скопіювати system/library/uberGallery/resources/sample.galleryConfig.ini в system/library/uberGallery/resources/galleryConfig.ini. Перевірте, щоб файли system/library/uberGallery/resources/galleryConfig.ini і system/library/uberGallery/resources/cache були доступні для запису з веб-сервера.

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

load->language(‘module/uber_gallery’);
$this->load->model(‘extension/module’);
$this->document->setTitle($this->language->get(‘heading_title’));
if (($this->request->server[‘REQUEST_METHOD’] == ‘POST’) && $this->validate()) {
if (!isset($this->request->get[‘module_id’])) {
$this->model_extension_module->addModule(‘uber_gallery’, $this->request->post);
} else {
$this->model_extension_module->editModule($this->request->get[‘module_id’], $this->request->post);
}
// update über config file
$config_file = implode(«\n»,file(DIR_SYSTEM.’library/uberGallery/resources/oc.galleryConfig.ini’));
$tokens = array(«[cache_expiration]», «[thumbnail_width]», «[thumbnail_height]», «[thumbnail_quality]», «[thumbnail_count]»);
$replacements = array(
$this->request->post[‘thumb_caching’],
$this->request->post[‘thumb_width’],
$this->request->post[‘thumb_height’],
$this->request->post[‘thumb_quality’],
$this->request->post[‘thumb_count’]
);
$save_config_file = str_replace($tokens, $replacements, $config_file);
$fp = fopen(DIR_SYSTEM.’library/uberGallery/resources/galleryConfig.ini’, ‘w’);
@fwrite($fp, $save_config_file, strlen($save_config_file));
$this->session->data[‘success’] = $this->language->get(‘text_success’);
$this->response->redirect($this->url->link(‘extension/module’, ‘token=’ . $this->session->data[‘token’], ‘SSL’));
}
$data[‘heading_title’] = $this->language->get(‘heading_title’);
$data[‘text_edit’] = $this->language->get(‘text_edit’);
$data[‘text_enabled’] = $this->language->get(‘text_enabled’);
$data[‘text_disabled’] = $this->language->get(‘text_disabled’);
$data[‘entry_name’] = $this->language->get(‘entry_name’);
$data[‘entry_status’] = $this->language->get(‘entry_status’);
$data[‘entry_thumb_caching’] = $this->language->get(‘entry_thumb_caching’);
$data[‘entry_thumb_quality’] = $this->language->get(‘entry_thumb_quality’);
$data[‘entry_thumb_width’] = $this->language->get(‘entry_thumb_width’);
$data[‘entry_thumb_height’] = $this->language->get(‘entry_thumb_height’);
$data[‘entry_thumb_count’] = $this->language->get(‘entry_thumb_count’);
$data[‘entry_enable_module_paging’] = $this->language->get(‘entry_enable_module_paging’);
$data[‘button_save’] = $this->language->get(‘button_save’);
$data[‘button_cancel’] = $this->language->get(‘button_cancel’);
if (isset($this->error[‘warning’])) {
$data[‘error_warning’] = $this->error[‘warning’];
} else {
$data[‘error_warning’] = «;
}
if (isset($this->error[‘error_name’])) {
$data[‘error_name’] = $this->error[‘error_name’];
} else {
$data[‘error_name’] = «;
}
if (isset($this->error[‘error_thumb_width’])) {
$data[‘error_thumb_width’] = $this->error[‘error_thumb_width’];
} else {
$data[‘error_thumb_width’] = «;
}
if (isset($this->error[‘error_thumb_height’])) {
$data[‘error_thumb_height’] = $this->error[‘error_thumb_height’];
} else {
$data[‘error_thumb_height’] = «;
}
if (isset($this->error[‘error_thumb_quality’])) {
$data[‘error_thumb_quality’] = $this->error[‘error_thumb_quality’];
} else {
$data[‘error_thumb_quality’] = «;
}
if (isset($this->error[‘error_thumb_count’])) {
$data[‘error_thumb_count’] = $this->error[‘error_thumb_count’];
} else {
$data[‘error_thumb_count’] = «;
}
$data[‘breadcrumbs’] = array();
$data[‘breadcrumbs’][] = array(
‘text’ => $this->language->get(‘text_home’),
‘href’ => $this->url->link(‘common/dashboard’, ‘token=’ . $this->session->data[‘token’], ‘SSL’)
);
$data[‘breadcrumbs’][] = array(
‘text’ => $this->language->get(‘text_module’),
‘href’ => $this->url->link(‘extension/module’, ‘token=’ . $this->session->data[‘token’], ‘SSL’)
);
if (!isset($this->request->get[‘module_id’])) {
$data[‘breadcrumbs’][] = array(
‘text’ => $this->language->get(‘heading_title’),
‘href’ => $this->url->link(‘module/uber_gallery’, ‘token=’ . $this->session->data[‘token’], ‘SSL’)
);
} else {
$data[‘breadcrumbs’][] = array(
‘text’ => $this->language->get(‘heading_title’),
‘href’ => $this->url->link(‘module/uber_gallery’, ‘token=’ . $this->session->data[‘token’] . ‘&module_id=’ . $this->request->get[‘module_id’], ‘SSL’)
);
}
if (!isset($this->request->get[‘module_id’])) {
$data[‘action’] = $this->url->link(‘module/uber_gallery’, ‘token=’ . $this->session->data[‘token’], ‘SSL’);
} else {
$data[‘action’] = $this->url->link(‘module/uber_gallery’, ‘token=’ . $this->session->data[‘token’] . ‘&module_id=’ . $this->request->get[‘module_id’], ‘SSL’);
}
$data[‘cancel’] = $this->url->link(‘extension/module’, ‘token=’ . $this->session->data[‘token’], ‘SSL’);
if (isset($this->request->get[‘module_id’]) && ($this->request->server[‘REQUEST_METHOD’] != ‘POST’)) {
$module_info = $this->model_extension_module->getModule($this->request->get[‘module_id’]);
}
if (isset($this->request->post[‘name’])) {
$data[‘name’] = $this->request->post[‘name’];
} elseif (!empty($module_info)) {
$data[‘name’] = $module_info[‘name’];
} else {
$data[‘name’] = «;
}
if (isset($this->request->post[‘thumb_width’])) {
$data[‘thumb_width’] = $this->request->post[‘thumb_width’];
} elseif (!empty($module_info)) {
$data[‘thumb_width’] = $module_info[‘thumb_width’];
} else {
$data[‘thumb_width’] = «;
}
if (isset($this->request->post[‘thumb_height’])) {
$data[‘thumb_height’] = $this->request->post[‘thumb_height’];
} elseif (!empty($module_info)) {
$data[‘thumb_height’] = $module_info[‘thumb_height’];
} else {
$data[‘thumb_height’] = «;
}
if (isset($this->request->post[‘thumb_quality’])) {
$data[‘thumb_quality’] = $this->request->post[‘thumb_quality’];
} elseif (!empty($module_info)) {
$data[‘thumb_quality’] = $module_info[‘thumb_quality’];
} else {
$data[‘thumb_quality’] = «;
}
if (isset($this->request->post[‘thumb_count’])) {
$data[‘thumb_count’] = $this->request->post[‘thumb_count’];
} elseif (!empty($module_info)) {
$data[‘thumb_count’] = $module_info[‘thumb_count’];
} else {
$data[‘thumb_count’] = «;
}
if (isset($this->request->post[‘thumb_caching’])) {
$data[‘thumb_caching’] = $this->request->post[‘thumb_caching’];
} elseif (!empty($module_info)) {
$data[‘thumb_caching’] = $module_info[‘thumb_caching’];
} else {
$data[‘thumb_caching’] = «;
}
if (isset($this->request->post[‘enable_module_paging’])) {
$data[‘enable_module_paging’] = $this->request->post[‘enable_module_paging’];
} elseif (!empty($module_info)) {
$data[‘enable_module_paging’] = $module_info[‘enable_module_paging’];
} else {
$data[‘enable_module_paging’] = «;
}
if (isset($this->request->post[‘status’])) {
$data[‘status’] = $this->request->post[‘status’];
} elseif (!empty($module_info)) {
$data[‘status’] = $module_info[‘status’];
} else {
$data[‘status’] = «;
}
$data[‘header’] = $this->load->controller(‘common/header’);
$data[‘column_left’] = $this->load->controller(‘common/column_left’);
$data[‘footer’] = $this->load->controller(‘common/footer’);
$this->response->setOutput($this->load->view(‘module/uber_gallery.tpl’, $data));
}
protected function validate() {
if (!$this->user->hasPermission(‘змінити’, ‘module/uber_gallery’)) {
$this->error[‘warning’] = $this->language->get(‘error_permission’);
}
if (!$this->request->post[‘name’]) {
$this->error[‘error_name’] = $this->language->get(‘error_name’);
}
if (!$this->request->post[‘thumb_width’]) {
$this->error[‘error_thumb_width’] = $this->language->get(‘error_thumb_width’);
}
if (!$this->request->post[‘thumb_height’]) {
$this->error[‘error_thumb_height’] = $this->language->get(‘error_thumb_height’);
}
if (!$this->request->post[‘thumb_quality’]) {
$this->error[‘error_thumb_quality’] = $this->language->get(‘error_thumb_quality’);
}
if (!$this->request->post[‘thumb_count’]) {
$this->error[‘error_thumb_count’] = $this->language->get(‘error_thumb_count’);
}
return !$this->error;
}
}

Як правило, тут два стандартних методу, як в будь-якому back end файлі контролера – index (забезпечує стандартну логіку зберігання значень форми) і validate (використовується для валідації форми налаштувань).

На початку статті я згадав, що ви повинні знати основи модульно розробки в OpenCart, тому ми обговоримо лише код, що відноситься до UberGallery.

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

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

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

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

Ми не будемо розбирати метод index, завантаження мов і модулів, створення змінних файлу шаблону подання. Замість цього ми розберемо один цікавий шматок коду в index методі. Давайте подивимося уважніше.

// update über config file
$config_file = implode(«\n»,file(DIR_SYSTEM.’library/uberGallery/resources/oc.galleryConfig.ini’));
$tokens = array(«[cache_expiration]», «[thumbnail_width]», «[thumbnail_height]», «[thumbnail_quality]», «[thumbnail_count]»);
$replacements = array(
$this->request->post[‘thumb_caching’],
$this->request->post[‘thumb_width’],
$this->request->post[‘thumb_height’],
$this->request->post[‘thumb_quality’],
$this->request->post[‘thumb_count’]
);
$save_config_file = str_replace($tokens, $replacements, $config_file);
$fp = fopen(DIR_SYSTEM.’library/uberGallery/resources/galleryConfig.ini’, ‘w’);
@fwrite($fp, $save_config_file, strlen($save_config_file));

Тут ми намагаємося досягти наступного: коли адмін зберігає форму налаштувань UberGallery на back end, файл galleryConfig.ini повинен створюватися на льоту. Згадайте, на початку розділу ми створили файл oc.galleryConfig.ini. Тепер ви повинні зрозуміти навіщо.

Ми витягуємо контент system/library/uberGallery/resources/oc.galleryConfig.ini, замінюємо плейсхолдеры на реальні значення і зберігаємо galleryConfig.ini, переписуючи існуючий файл.

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

Нічого незвичайного – просто оголошуємо мовні змінні.

Створимо файл шаблону подання з XHTML кодом форми налаштувань. Створіть файл admin/view/template/module/uber_gallery.tpl.

×

(between 1-100)

З створенням back end файлом закінчили.

Тестування форми налаштувань

Перейдіть на back end і далі Extensions > Modules. Встановіть знову створений модуль UberGallery і відкрийте форму налаштувань.

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

Заповніть значення і збережіть форму! Це налаштування збереже модуля в базі даних. Але крім цього створиться новий файл galleryConfig.ini! Відкрийте файл system/library/uberGallery/resources/galleryConfig.ini, в ньому повинні бути значення параметрів з полів форми налаштувань.

Ми тільки що побудували механізм генерації galleryConfig.ini на льоту з допомогою форми редагування! Він буде використовувати на front end, коли ми активуємо в модулі відображення галереї.

На сьогодні все. Скоро повернуся в наступному уроці.

Висновок

У першій частині ми пробіглися по back end файлів модуля UberGallery. У наступній частині ми розберемо front end.

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

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

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

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