Від автора: завдяки тому, що в ядрі OpenCart присутній бібліотека JQuery, робота з Ajax стає вкрай простий. На ділі ж, по всіх файлів фреймворку розкидані невеликі, але значимі вкраплення на JQuery. У цій статті ми створимо веб-сторінку і продемонструємо з її допомогою роботу Ajax в OpenCart.
Сторінка буде мати простий інтерфейс з випадаючим списком товарів і блоком, в якому відображається вся інформація з обраного товару. Родзинка майбутнього демо полягає в тому, що блок з інформацією про товар буде будуватися з допомогою Ajax на льоту. Сам приклад не буде якимось понад складним, проте, як я думаю, він послужить своєї головної мети і покаже базове взаємодія Ajax і OpenCart.
Передбачається, що ви працюєте з-під останньої версії OpenCart 2.1.x.x! Так як основна тема статті-це взаємодія Ajax і OpenCart, я швидко розповім про розробку власних модулів в OpenCart. І навіть якщо ви зовсім не розумієте, про що йде мова, вам на допомогу прийдуть невеликі пояснення коду в коментарях, щоб ви змогли дійти з нами до кінця статті!
Швидкий погляд на організацію файлів
По-швидкому розглянемо необхідні файли нашої сторінки.
catalog/controller/ajax/index.php: Файл контролера, в якому прописана логіка стандартного контролера в OpenCart.
Інтернет-магазин на OpenCart!
Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!
Приступити до створення
catalog/language/english/ajax/index.php: файл мови.
catalog/view/theme/default/template/ajax/index.tpl: Файл шаблону подання, в якому зберігається XHTML нашої сторінки.
catalog/view/theme/default/template/ajax/product.tpl: Файл шаблону подання, в якому зберігається XHTML код AJAX відповіді.
Короткий список файлів, з якими ми будемо працювати.
Створюємо файли модуля
Давайте продовжимо і створимо файл catalog/controller/ajax/index.php і скопіювати в нього наступний код.
load->language(‘ajax/index’);
$this->load->model(‘catalog/product’);
$this->document->setTitle($this->language->get(‘heading_title’));
// завантажуємо всі товари
$products = $this->model_catalog_product->getProducts();
$data[‘products’] = $products;
$data[‘breadcrumbs’] = array();
$data[‘breadcrumbs’][] = array(
‘href’ => $this->url->link(‘common/home’),
‘text’ => $this->language->get(‘text_home’)
);
$data[‘breadcrumbs’][] = array(
‘href’ => $this->url->link(‘ajax/index’),
‘text’ => $this->language->get(‘heading_title’)
);
$data[‘heading_title’] = $this->language->get(‘heading_title’);
$data[‘text_product_dropdown_label’] = $this->language->get(‘text_product_dropdown_label’);
$data[‘column_left’] = $this->load->controller(‘common/column_left’);
$data[‘column_right’] = $this->load->controller(‘common/column_right’);
$data[‘content_top’] = $this->load->controller(‘common/content_top’);
$data[‘content_bottom’] = $this->load->controller(‘common/content_bottom’);
$data[‘footer’] = $this->load->controller(‘common/footer’);
$data[‘header’] = $this->load->controller(‘common/header’);
if (file_exists(DIR_TEMPLATE . $this->config->get(‘config_template’) . ‘/template/ajax/index.tpl’)) {
$this->response->setOutput($this->load->view($this->config->get(‘config_template’) . ‘/template/ajax/index.tpl’, $data));
} else {
$this->response->setOutput($this->load->view(‘default/template/ajax/index.tpl’, $data));
}
}
// метод виклику ajax
public function ajaxGetProduct() {
if (isset($this->request->get[‘product_id’])) {
$product_id = (int) $this->request->get[‘product_id’];
if ($product_id > 0) {
// завантажуємо певний товар, запитаний в ajax
$this->load->model(‘catalog/product’);
$product = $this->model_catalog_product->getProduct($product_id);
$data[‘product’] = $product;
// готуємо превью зображення
$this->load->model(‘tool/image’);
if ($product[‘image’]) {
$data[‘thumb’] = $this->model_tool_image->resize($product[‘image’], $this->config->get(‘config_image_thumb_width’), $this->config->get(‘config_image_thumb_height’));
}
// форматуємо ціну
$data[‘price’] = $this->currency->format($this->tax->calculate($product[‘price’], $product[‘tax_class_id’], $this->config->get(‘config_tax’)));
$this->load->language(‘product/product’);
$data[‘text_manufacturer’] = $this->language->get(‘text_manufacturer’);
$data[‘text_model’] = $this->language->get(‘text_model’);
$data[‘text_note’] = $this->language->get(‘text_note’);
$data[‘tab_description’] = $this->language->get(‘tab_description’);
if (file_exists(DIR_TEMPLATE . $this->config->get(‘config_template’) . ‘/template/ajax/product.tpl’)) {
$this->response->setOutput($this->load->view($this->config->get(‘config_template’) . ‘/template/ajax/product.tpl’, $data));
} else {
$this->response->setOutput($this->load->view(‘default/template/ajax/product.tpl’, $data));
}
}
}
}
}
Метод index даного контролера використовується для завантаження мови і файлів моделі, а також з його допомогою задаються загальні змінні для стандартного шаблону OpenCart. Так як ми будемо завантажувати модель товарів із самого ядра, нам не потрібно дублювати код для того, щоб отримати інформацію про товари.
Після завантаження моделі товарів з допомогою методу getProducts ми завантажуємо всі товари. В кінці ми підходимо до методу index, задавши index.tpl, як у нашому файлі основного шаблону.
Слідом йде вкрай важливий метод ajaxGetProduct, за допомогою якого будується блок з даними про товар по його ідентифікатору, переданому в Ajax метод (це ми незабаром побачимо у файлі шаблону). Даний метод завантажує ту ж саму модель і метод index, але крім цього він ще й запускає функцію getProduct, яка витягує інформацію про товар за його ID.
Наприкінці в якості шаблону для даного методу задається шаблон product.tpl. В рамках нашого прикладу ми використовуємо шаблон для створення відповіді з Ajax’а, але ви цілком можете скористатися JSON рядком.
Їдемо далі, створимо файл мови catalog/language/english/ajax/index.php, в якому будемо зберігати прості підпису.
Інтернет-магазин на OpenCart!
Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!
Приступити до створення
В рамках даного уроку файл шаблону подання важливіше інших. Його необхідно створити в директорії catalog/view/theme/default/template/ajax/index.tpl і скопіювати в нього код нижче.
$(‘#product’).on(‘change’, function() {
$.ajax({
url: ‘index.php?route=ajax/index/ajaxGetProduct&product_id=’ + this.value,
dataType: ‘html’,
success: function(htmlText) {
$(‘#product_summary’).html(htmlText);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + “\r\n” + xhr.statusText + “\r\n” + xhr.responseText);
}
});
});
Нас цікавить нижня частина файлу index.tpl, а саме JS код, в якому використовуються методи JQuery для прикріплення події change і Ajax. Після вибору користувачем товару з випадаючого списку запускається подія change, яке відразу ж запускає Ajax. У методі ajax до рядку запиту GET ми прикріплюємо змінну product_id.
Однак, як ми вже згадували вище у налаштуваннях контролера, метод ajaxGetProduct посилає XHTML код блоку з додатковими даними про товар на основі його product_id. У методі success ми прикріплюємо XHTML відповідь до тегу DIV id product_summary.
І залишилося створити останній файл catalog/view/theme/default/template/ajax/product.tpl з наступним кодом для виклику Ajax.
–
Нічого особливого – звичайний блок з додатковою інформацією про товар XHTML. Отже, копатися в файлах ми закінчили. У наступній частині ми перейдемо до front-end тестів, створеної нами сторінки.
Front-end тестування
З найскладнішою частиною ми впоралися, і тепер потрібно протестувати, що у нас вийшло! Перейдіть в розділ front-ennd в http://www.yourstore.com/index.php?route=ajax/index. Перед вами повинен з’явитися красивий інтерфейс, як на скріншоті.
Це наша сторінка, на якій відображається список, що випадає з усіма товарами. Давайте оберемо товар зі списку, що має викликати Ajax запит. Прямо під списком з’являється досить гарний блок з загальною інформацією про товар.
Якщо ви робили все точно, як я сказав, то у вас не повинно виникнути проблем. Цей приклад досить простий і показує лише базове взаємодія Ajax і OpenCart, але ви завжди можете його розширити під свої вимоги.
Спробуйте погратися з кодом, створіть інтерактивне з допомогою Ajax. Це найкращий спосіб зрозуміти технологію. На сьогодні все, трохи пізніше я розповім про більш захоплюючі технології.
Висновок
У цій статті основну увагу було приділено взаємодії Ajax і OpenCart. Як і завжди, ми скористалися методом створення спеціального модуля для демонстрації технології.
І як завжди, якщо ви шукайте додаткові інструменти, утиліти, дозволи і т. д. для роботи з OpenCart і інтегрувати їх в свої проекти або просто потренуватися, не забувайте, що у нас є свій сайт з усім, що вам потрібно.
Сподіваюся, стаття була для вас інформативною і корисною. Не соромтеся задавати питання та залишати коментарі!
Інтернет-магазин на OpenCart!
Створити інтернет-магазин на самій популярної CMS OpenCart з нуля!
Приступити до створення
