Як використовувати Ajax в OpenCart

22

Від автора: завдяки тому, що в ядрі OpenCart присутній бібліотека JQuery, робота з Ajax стає вкрай простий. На ділі ж, по всіх файлів фреймворку розкидані невеликі, але значимі вкраплення на JQuery. У цій статті ми створимо веб-сторінку і продемонструємо з її допомогою роботу Ajax в OpenCart.

Сторінка буде мати простий інтерфейс з випадаючим списком товарів і блоком, в якому відображається вся інформація з обраного товару. Родзинка майбутнього демо полягає в тому, що блок з інформацією про товар буде будуватися з допомогою Ajax на льоту. Сам приклад не буде якимось понад складним, проте, як я думаю, він послужить своєї головної мети і покаже базове взаємодія Ajax і OpenCart.

Передбачається, що ви працюєте з-під останньої версії OpenCart 2.1.x.x! Так як основна тема статті-це взаємодія Ajax і OpenCart, я швидко розповім про розробку власних модулів в OpenCart. І навіть якщо ви зовсім не розумієте, про що йде мова, вам на допомогу прийдуть невеликі пояснення коду в коментарях, щоб ви змогли дійти з нами до кінця статті!

Швидкий погляд на організацію файлів

По-швидкому розглянемо необхідні файли нашої сторінки.

catalog/controller/ajax/index.php: Файл контролера, в якому прописана логіка стандартного контролера в OpenCart.

Як використовувати Ajax в 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, в якому будемо зберігати прості підпису.

Як використовувати Ajax в OpenCart

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

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

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