Продолжение долгожданной серии статей про создание ajax корзины в Codeigniter с использованием javascript фреймворка jQuery.
Эта статья посвящена созданию шаблона (вида, view) для корзины и организации работы с шаблонами в Codeigniter.
Ссылки на прошлые статьи:
- 123
- 123
Предисловие
Вообще, статьи про написание AJAX корзины покупок были первыми статьями, которые я написал для этого блога. Я и не думал что они наберут хоть какую популярность, потому что Codeigniter уже устарел и на нём уже никто не пишет. Но похоже я ошибался.
Создание шаблона страницы
Что из себя представляет шаблон (или представление, или вид, или view)?
Шаблон - это HTML код страницы или её фрагмента, такого как шапка, подвал, левая колонка сайта. Шаблоны могут быть встроены в другие шаблоны (например в левую колонку может быть встроено несколько шаблонов блоков). Согласно структуре MVC, которая взята за основу в Codeigniter, с шаблоном должен работать контроллер.
Шаблоны в Codeigniter находятся в папке application/view. Создайте в ней новый файл с именем template.php и добавьте туда следующий код:
template.php
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>AJAX корзина товаров в Codeigniter</title>
<link href="<?php print base_url('assets/css/reset.css'); ?>" type="text/css" rel="stylesheet"/>
<link href="<?php print base_url('assets/css/styles.css'); ?>" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="content">
<?php print $messages; ?>
<?php print $cart; ?>
<?php print $content; ?>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="<?php print base_url('assets/js/cart.js'); ?>"></script>
</body>
</html>Шаблон template.php будет основным в проекте. В него (а точнее в переменные $cart и $content) будет подставляться различный HTML код (в нашем случае HTML код шаблона корзины и списка товаров). Переменная $messages нужна для вывода сообщений пользователю, например: "товар добавлен в корзину".
Так же в этом шаблоне подключаются все файлы стилей и js скриптов. В Codeigniter есть полезная функция base_url(), которая возвращает адрес сайта. Т.е. код:
<?php print base_url('assets/css/reset.css'); ?>Вернёт следующий результат: http://ваш\_сайт/assets/css/reset.css. Здесь "Ваш сайт" это url, который указан в конфиге codeigniter.
Настоятельно рекомендую во всех случаях, когда нужно работать с URL адресами сайта использовать эту функцию, чтобы не возникало проблем при переносе сайта на другие домены.
Перед закрывающим тегом </body> мы добавлены javascript скрипты, которые используются на сайте: библиотека jQuery из CDN Google и скрипт, в котором будет js код для работы AJAX корзины.
Старайтесь всегда добавлять все скрипты до закрывающегося тега </body>, чтобы загрузка тяжёлых скриптов не тормозила загрузку основного контента страницы.
Шаблоны для корзины и списка товаров
Давайте создадим в папке application/views остальные шаблоны, которые потребуются для работы.
products-view.php
Шаблон для вывода сетки товаров сайта. Здесь мы просто выводим в цикле поля товара (наименование, цена и изображение). Так же выводим форму с кнопкой "Купить" для каждого товара.
<?php
/**
* Шаблон вывода сетки товаров
*/
?>
<table class="products-list">
<tbody>
<tr>
<?php foreach ($products as $item) { ?>
<td>
<img src="<?php print base_url('assets/img/' . $item['image']); ?>" width="">
<header class="product-title"><?php print $item['name']; ?></header>
<p class="price"><?php print $item['price']; ?></p>
<?php print form_open('cart/add_to_cart'); ?>
<input type="hidden" name="product_id" value="<?php print $item['id']; ?>"/>
<input type="submit" name="add-to-cart" value="Купить"/>
<?php print form_close(); ?>
</td>
<?php } ?>
</tr>
</tbody>
</table>cart-view.php
Это шаблон для вывода блока корзины покупок. Товары выводятся в виде таблицы, где можно посмотреть наименование, цену, общую цену, задать количество, удалить товар из корзины, а так же очистить её. Если товаров в корзине нет, то выводится фраза "В корзине нет товаров".
Для кнопок "Удалить" и "Очистить корзину" мы используем формы, которые будут посылать POST запрос на сервер к контроллеру cart.php. Контроллер будет возвращать результат, который мы будем отображать пользователю. Для создания форм используется функции-хелпер form_open() и form_close() из помощника form http://ellislab.com/codeigniter/user-guide/helpers/form_helper.html, который мы добавили в автозагрузку еще в первом уроке. Вообще в Codeigniter есть много функций-помошников, о которых можно почитать в документации.
Очень рекомендую использовать для создания формы именно функции form_open и form_close. В дальнейшем это поможет избежать многих трудностей при разработке, а так же позволяет Codeigniter'у автоматически защитить формы от CSRF (Подделка межсайтовых запросов).
Очень рекомендую использовать для создания формы именно функции form_open и form_close. В дальнейшем это поможет избежать многих трудностей при разработке, а так же позволяет Codeigniter'у автоматически защитить формы от CSRF (Подделка межсайтовых запросов).
<?php
/**
* Шаблон для вывода корзины покупок
*/
?>
<div class="cart">
<?php if (empty($cart_items)) { ?>
<p>В корзине нет товаров</p>
<?php } else { ?>
<table class="cart-items">
<thead>
<tr>
<th></th>
<th>Наименование</th>
<th>Цена</th>
<th>Количество</th>
<th>Сумма</th>
</tr>
</thead>
<tbody>
<?php foreach ($cart_items as $row_id => $item) { ?>
<tr>
<td>
<?php print form_open('cart/delete_item/'); ?>
<input type="submit" value="Удалить"/>
<input type="hidden" name="rowid" value="<?php print $row_id; ?>"/>
<?php print form_close(); ?>
</td>
<td><?php print $item['name']; ?></td>
<td><?php print $item['price']; ?></td>
<td><?php print $item['qty']; ?></td>
<td><?php print $item['subtotal']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<?php } ?>
<div class="controls">
<?php print form_open('cart/cart_empty'); ?>
<input type="submit" value="Очистить корзину"/>
<?php print form_close(); ?>
</div>
</div>На этом с шаблонами пока закончим.
Вывод шаблонов на странице
Согласно архитектуре MVC (Model-View-Controler), выводом шаблонов занимается контроллер. Давайте выведем наши шаблоны на страницу.
Откройте контроллер cart (application/controllers/cart.php) и измените метод index(), как у меня:
/**
* Выводит товары и корзину
*/
public function index()
{
// Массив, в котором будут храниться товары
$products = array();
// Получение товаров из БД
$products = $this->cart_model->retrieve_products();
// Корзина пользователя. Пока оставим её пустой
$user_cart = array();
// Массив данных для передачи в шаблон template.php
$data = array();
// Подгружаем шаблоны корзины и сетки товаров.
// Последним параметром передаём true, чтобы шаблон выводился
// в переменную
$data['cart'] = $this->load->view('cart-view', array('cart_items' => $user_cart), true);
$data['content'] = $this->load->view('products-view',
// Переменная products со всеми товарами будет доступна
// в шаблоне с сеткой товаров
array('products' => $products),
true);
// Сообщения пользователю
$data['messages'] = '';
// Выводим основной шаблон
$this->load->view('template', $data);
}Теперь, если открыть сайт, то на странице будет пустая корзина и список товаров сайта.
На этом третья часть разработки ajax корзины на Codeigniter закончена. В следующей статье мы разберёмся с работой модуля корзины покупок.
Читать Делаем корзину покупок с помощью Codeigniter и JQuery. Часть 4.