Від автора: в першій статті ми створили плагін Recent Products, який показує Х кількість товарів на стороні front-end’а. Кількість відображуваних товарів можна налаштувати через back-end форму конфігурацій, яку ми створили в першій частині. Також ми розібралися з архітектурою плагінів в OpenCart. Дана архітектура застосовується і до front-end частини плагіна.
Швидкий огляд
Як вже говорилося раніше, в цьому уроці ми створимо файли front-end боку плагіна. Давайте поглянемо на список файлів.
catalog/language/english/module/recent_products.php: файл зі статичними заголовками, які використовуються на front-end стороні.
catalog/controller/module/recent_products.php: файл контролера з логікою програми нашого модуля.
catalog/model/module/recent_products.php: файл моделі, що взаємодіє з базою даних для отримання товарів.
Інтернет-магазин на OpenCart!
Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!
Приступити до створення
catalog/view/theme/default/template/module/recent_products.tpl: шаблон подання з XHTML кодом.
Першим ділом ви помітите, що на відміну від директорії admin, тут використовується папка catalog, в якій зберігаються файли плагіна на front-end стороні. Також є файл моделі, який не створювався для back-end’а й зберігає програмний код нашого плагіна, щоб витягати недавні товари з бази даних.
Інша річ, на яку необхідно звернути увагу – розташування файлу подання recent_products.tpl. Насправді, на стороні front-end’а у вас може бути кілька тем, і файл буде зберігатися в папці теми. У нас вказаний шлях до теми за замовчуванням в OpenCart, за яким зберігається велика частина файлів шаблонів. У всьому іншому структура плагіна така ж, в ній є файл мови і контролера.
Створюємо файли плагіна
Першим ділом створимо файл мови catalog/language/english/module/recent_products.php з кодом.
Файл використовується для установки статичних заголовків, які будуть використовуватися у файлі шаблону подання. Файл майже ідентичний файлу мови з адмінки.
Тепер давайте створимо файл контролера, який повинен знаходитися за адресою catalog/controller/module/recent_products.php.
load->language(‘module/recent_products’);
$data[‘heading_title’] = $this->language->get(‘heading_title’);
$this->load->model(‘module/recent_products’);
$this->load->model(‘tool/image’);
$data[‘products’] = array();
$results = $this->model_module_recent_products->getRecentProducts( $setting[‘limit’] );
if ($results) {
foreach ($results as $result) {
if ($result[‘image’]) {
$image = $this->model_tool_image->resize( $result[‘image’], 100, 100 );
} else {
$image = $this->model_tool_image->resize( ‘placeholder.png’, 100, 100 );
}
if ( ( $this->config->get(‘config_customer_price’) && $this->customer->isLogged() ) || !$this->config->get( ‘config_customer_price’ ) ) {
$price = $this->currency->format( $this->tax->calculate($result[‘price’], $result[‘tax_class_id’], $this->config->get(‘config_tax’)) );
} else {
$price = false;
}
if ((float)$result[‘special’]) {
$special = $this->currency->format( $this->tax->calculate( $result[‘special’], $result[‘tax_class_id’], $this->config->get(‘config_tax’) ) );
} else {
$special = false;
}
$data[‘products’][] = array(
‘product_id’ => $result[‘product_id’],
‘thumb’ => $image,
‘name’ => $result[‘name’],
‘description’ => utf8_substr( strip_tags( html_entity_decode($result[‘description’], ENT_QUOTES, ‘UTF-8’) ), 0, $this->config->get( ‘config_product_description_length’ ) ) . ‘..’,
‘price’ => $price,
‘special’ => $special,
‘href’ => $this->url->link(‘product/product’, ‘product_id=’ . $result[‘product_id’])
);
}
if (file_exists(DIR_TEMPLATE . $this->config->get(‘config_template’) . ‘/template/module/recent_products.tpl’)) {
return $this->load->view( $this->config->get(‘config_template’) . ‘/template/module/recent_products.tpl’, $data );
} else {
return $this->load->view( ‘default/template/module/recent_products.tpl’, $data );
}
}
}
}
Знову ж таки, в методі index зберігається велика частина нашого коду. У більшості плагінів в методі index вам зустрінеться аргумент $setting. Згадайте форму налаштувань в адмінці з першого уроку, яка потрібна для налаштування плагіна – це і є змінна $setting. В ній у вигляді масиву зберігаються значення налаштувань плагіна для форми.
Скорочення $this->load->language завантажує файл мови з front-end боку, який докладно ми розібрали на першому уроці. Точно так само $this->load->model завантажує модель плагіна, яка зберігається за адресою catalog/model/module/recent_products.php. Також ми подгружаем модель Image з папки tool, в ній є метод для зміни розміру зображень.
Найважливіший виклик у методі index – виклик методу getRecentProducts, який повертає з бази даних масив недавно переглянутих товарів. Коли будемо розбирати файл моделі, ми розглянемо його більш докладно. Як аргумент методу передається значення $setting[‘limit’], яке визначається на стороні back-end’а.
$results = $this->model_module_recent_products->getRecentProducts( $setting[‘limit’] );
Потім ми проходимся по масиву товарів і готуємо масив $data[‘products’], який будемо використовувати у файлі шаблону. У процесі підготовки масиву ми використовуємо метод для зміни розміру зображень з моделі Image і створюємо з його допомогою маленькі зображення. Великі зображення на front-end’е показувати немає сенсу.
Також ви помітите $this->config->get – дана рядок використовується для витягування глобальних значень параметрів магазину. Змінити ці параметри можна System > Settings.
Скорочення $this->url->link створює SEO доброзичливі посилання на сторінки товарів. І нарешті, йде шматок коду, який завантажує файл шаблону recent_products.tpl, в якому дані готуються до висновку за допомогою масиву $data.
На відміну від адмінки, на front-end стороні є умова завантаження файлу шаблону, так як ви можете використовувати тему не за замовчуванням. Якщо у вас часом немає, завжди використовується тема за замовчуванням в якості фолбэка.
if ( file_exists(DIR_TEMPLATE . $this->config->get(‘config_template’) . ‘/template/module/recent_products.tpl’) ) {
return $this->load->view( $this->config->get(‘config_template’) . ‘/template/module/recent_products.tpl’, $data );
} else {
return $this->load->view( ‘default/template/module/recent_products.tpl’, $data );
}
З файлом контролера закінчили. Тепер давайте створимо файл моделі catalog/model/module/recent_products.php.
Інтернет-магазин на OpenCart!
Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!
Приступити до створення
load->model(‘catalog/product’);
$product_data = $this->cache->get( ‘product.recent.’ . (int)$this->config->get(‘config_language_id’) . ‘.’ . (int)$this->config->get(‘config_store_id’) . ‘.’ . $this->config->get(‘config_customer_group_id’) . ‘.’ . (int)$limit );
if (!$product_data) {
$query = $this->db->query(“SELECT p.product_id FROM ” . DB_PREFIX . “product p LEFT JOIN” . DB_PREFIX . “product_to_store p2s ON (p.product_id = p2s.product_id) WHERE p.status = ‘1’ AND p.date_available config->get(‘config_store_id’) . “‘ ORDER BY p.date_added DESC LIMIT ” . (int)$limit);
foreach ($query->rows as $result) {
$product_data[$result[‘product_id’]] = $this->model_catalog_product->getProduct( $result[‘product_id’] );
}
$this->cache->set( ‘product.recent.’ . (int)$this->config->get(‘config_language_id’) . ‘.’ . (int)$this->config->get(‘config_store_id’) . ‘.’ . $this->config->get(‘config_customer_group_id’) . ‘.’ . (int)$limit, $product_data );
}
return $product_data;
}
}
За кодом видно, що клас моделі починається з ключового слова Model, і потім вказується структура папок. Клас успадковує все від класу Model, в якому зберігаються об’єкти і методи для взаємодії з базою даних.
Також ми завантажуємо модель Product з папки catalog за допомогою $this->load->model(‘catalog/product’). Нам знадобляться методи цього класу.
Є ще пара корисних скорочень — $this->cache->set і $this->cache->get. Перше використовується для запису значення в кеш, а друге отримує вже записане значення з кеш-пам’яті по ключу. Хороша звичка використовувати кеш для збільшення продуктивності магазину.
В кінці ми виконуємо запит до бази даних і витягуємо недавні товари за допомогою рядка $this->db->query. Рядок запускає метод query класу database.
Після отримання товарів ми проходимся по них у циклі і подгружаем інформацію про них за допомогою методу getProduct класу моделі Product. В кінці ми зберігаємо дані з масиву в кеш, щоб в наступних запитах нам не довелося заново робити одну і ту ж роботу!
Залишилося створити файл шаблону recent_products.tpl. Створимо його в папці catalog/view/theme/default/template/module/recent_products.tpl.
У файлі шаблону ми просто пробегаемся по масиву $products, який був переданий з контролера і виводимо список товарів в XHTML.
З front-end файлами закінчили! В наступному розділі я покажу вам, як прикріпити наш плагін до макету OpenCart, щоб він показувався на стороні front-end’а.
Прикріплюємо плагін до макету
Будь плагін, який щось показує на front-end стороні, необхідно прив’язати до вільного макету. Для прикладу ми прив’яжемо плагін до позиції Content Top.
Перейдіть в панель адміністратора System > Design > Layouts. Повинні з’явитися всі доступні макети магазину. Перейдіть в режим редагування макету Home. Необхідно просто додати новий модуль, як показано на скріншоті нижче.
Як бачите, ми взяли Recent Products > My Recent Block Plugin і прикріпили його до позиції Content Top. Збережіть зміни і все!
Front-end демо
Перейдіть на бік front-end’а, повинен з’явитися гарний блок з нещодавно переглянутими товарами, як на скріншоті нижче.
Ось і закінчилося наше подорож по розробці користувальницького плагіна для OpenCart. Серія уроків була націлена на початківців розробників, однак ми отримали досить хороший шаблон плагіна, який можна розширити під свої потреби. Покопатися в коді, додайте новий функціонал. Гарне вправа після уроку!
Висновок
У цій серії уроків ми вивчили розробку користувальницького плагіна в OpenCart. Так як курс був для новачків, ми створили дуже простий плагін зі списком недавно переглянутих товарів в блоці. У попередньому уроці ми створили форму налаштувань для нашого плагіна.
Інтернет-магазин на OpenCart!
Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!
Приступити до створення
