От автора: благодаря тому, что в ядре OpenCart присутствует библиотека JQuery, работа с Ajax становится крайне простой. На деле же, по всем файлам фреймворка разбросаны небольшие, но значимые вкрапления на JQuery. В этой статье мы создадим веб-страницу и продемонстрируем с ее помощью работу Ajax в OpenCart.
Страница будет иметь простой интерфейс с выпадающим списком товаров и блоком, в котором отображается вся информация по выбранному товару. Изюминка будущего демо заключается в том, что блок с информацией о товаре будет строиться с помощью Ajax на лету. Сам пример не будет каким-то сверх сложным, однако, как я думаю, он послужит своей главной цели и покажет базовое взаимодействие Ajax и OpenCart.
Предполагается, что вы работаете из-под последней версии OpenCart 2.1.x.x! Так как основная тема статьи это взаимодействие Ajax и OpenCart, я быстро расскажу про разработку собственных модулей в OpenCart. И даже если вы совсем не понимаете, о чем идет речь, вам на помощь придут небольшие объяснения кода в комментариях, чтобы вы смогли дойти с нами до конца статьи!
Быстрый взгляд на организацию файлов
По-быстрому рассмотрим необходимые файлы нашей страницы.
catalog/controller/ajax/index.php: Файл контроллера, в котором прописана логика стандартного контроллера в 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 и скопируем в него следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<?php // catalog/controller/ajax/index.php class ControllerAjaxIndex extends Controller { public function index() { $this->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, в котором будем хранить простые подписи.
|
1 2 3 4 5 |
<?php // catalog/language/english/ajax/index.php // заголовок $_['heading_title'] = 'Simple Ajax Example'; $_['text_product_dropdown_label'] = 'Select Product'; |
В рамках данного урока файл шаблона представления важнее остальных. Его необходимо создать в директории catalog/view/theme/default/template/ajax/index.tpl и скопировать в него код ниже.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!-- catalog/view/theme/default/template/ajax/index.tpl --> <?php echo $header; ?> <div class="container"> <ul class="breadcrumb"> <?php foreach ($breadcrumbs as $breadcrumb) { ?> <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li> <?php } ?> </ul> <div class="row"><?php echo $column_left; ?> <?php if ($column_left && $column_right) { ?> <?php $class = 'col-sm-6'; ?> <?php } elseif ($column_left || $column_right) { ?> <?php $class = 'col-sm-9'; ?> <?php } else { ?> <?php $class = 'col-sm-12'; ?> <?php } ?> <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?> <h2><?php echo $heading_title; ?></h2> <fieldset id="account"> <div> <label class="col-sm-2 control-label" for="product"><?php echo $text_product_dropdown_label; ?></label> <div class="col-sm-10"> <select name="product" class="form-control" id="product"> <option>-- <?php echo $text_product_dropdown_label; ?> --</option> <?php foreach ($products as $product) { ?> <option value="<?php echo $product['product_id']; ?>"><?php echo $product['name']; ?></option> <?php } ?> </select> </div> </div> </fieldset> <div id="product_summary"></div> <?php echo $content_bottom; ?></div> <?php echo $column_right; ?></div> </div> <?php echo $footer; ?> <script type="text/javascript"> $('#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); } }); }); </script> |
Нас интересует нижняя часть файла index.tpl, а именно JS код, в котором используются методы JQuery для прикрепления события change и Ajax. После выбора пользователем товара из выпадающего списка запускается событие change, которое сразу же запускает Ajax. В методе ajax к строке запроса GET мы прикрепляем переменную product_id.
Однако как мы уже упоминали выше в настройках контроллера, метод ajaxGetProduct посылает XHTML код блока с дополнительными данными о товаре на основе его product_id. В методе success мы прикрепляем XHTML ответ к тегу DIV с идентификатором product_summary.
И осталось создать последний файл catalog/view/theme/default/template/ajax/product.tpl со следующим кодом для вызова Ajax.
|
1 2 3 4 5 6 7 |
<!-- catalog/view/theme/default/template/ajax/product.tpl --> <div style="border: 1px solid #CCC;padding:10px;margin:10px;"> <h3><?php echo $product['name']; ?> - <?php echo $price; ?></h3> <p><img src="<?php echo $thumb; ?>"/></p> <p><b><?php echo $text_manufacturer; ?></b> <?php echo $product['manufacturer']; ?></p> <p><b><?php echo $text_model; ?></b> <?php echo $product['model']; ?></p> </div> |
Ничего особенного – самый обычный блок с дополнительной информацией о товаре на XHTML. Итак, копаться в файлах мы закончили. В следующей части мы перейдем к front-end тестам, созданной нами страницы.
Front-end тестирование
С самой сложной частью мы справились, теперь нужно протестировать, что у нас получилось! Перейдите в раздел front-ennd в //www.yourstore.com/index.php?route=ajax/index. Перед вами должен появиться красивый интерфейс, как на скриншоте.
Это наша страница, на которой отображается выпадающий список со всеми товарами. Давайте выберем товар из списка, что должно вызвать Ajax запрос. Прямо под списком появляется довольно красивый блок с общей информацией о товаре.
Если вы делали все точно, как я сказал, то у вас не должно возникнуть проблем. Данный пример довольно простой и показывает лишь базовое взаимодействие Ajax и OpenCart, но вы всегда можете его расширить под свои требования.
Попробуйте поиграться с кодом, создайте что-то интерактивное с помощью Ajax. Это лучший способ понять технологию. На сегодня все, немного позже я расскажу про более увлекательные технологии.
Заключение
В данной статье основное внимание было уделено взаимодействию Ajax и OpenCart. Как и всегда, мы воспользовались методом создания пользовательского модуля для демонстрации технологии.
И как всегда, если вы ищите дополнительные инструменты, утилиты, разрешения и т.д. для работы с OpenCart и хотите интегрировать их в свои проекты или просто поупражняться, не забывайте, что у нас есть свой сайт со всем, что вам нужно.
Надеюсь, статья была для вас информативной и полезной. Не стесняйтесь задавать вопросы и оставлять комментарии!
Автор: Sajal Soni
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (1)