Программируем на CakePHP

Задача из области юзабилити — как добавить товар в корзину, и при этом оставить человека на той же странице, причем желательно даже без перезагрузки оной? Раньше было проблемой, последние пару лет — везде делается на ajax. За примерами реализации далеко ходить не надо — тот же Ozon.ru вовсю пользуется ajax’ом. Вот в своих проектах нам захотелось сделать современную корзину. Оказалось, на CakePHP это совсем не сложно.

Наверное, стоит описать процесс подробно, чтобы в следующих постах просто ссылаться на этот за предварительными настройками.

1. Скачиваем библиотеки prototype и scriptaculous – стандартный ajax хелпер из CakePHP использует именно их.
2. Распаковываем содержимое архивов с библиотеками в /app/webroot/js/ таким образом чтобы основные файлы лежали прямо в этой папке (а не в каких-нибудь еще вложенных).
3. Добавляем в layout ссылки на эти библиотеки и устанавливаем кодировку для страниц.
   Кодировка — это важно, ajax будет корректно работать только если весь проект у вас в юникоде!
   
   

   <?php echo $html->charset("utf-8");?>
   <?php print $javascript->link('prototype') ?>
   <?php print $javascript->link('scriptaculous.js?load=effects') ?>

4. Добавляем запись про кодировку в конфиг базы данных (/app/config/database.php) чтобы модели возвращали данные тоже в юникоде:
   
   

   var $default = array(
   		'driver' => 'mysql',
   		'persistent' => false,
   		'host' => 'localhost',
   		'login' => 'mycp',
   		'password' => 'mycptest',
   		'database' => 'mycp',
   		'prefix' => '',
   		'encoding' => 'utf8'
   	);

5. И опять же про кодировку, но уже в основном конфиге приложения /app/config/core.php:
   
   

   Configure::write('App.encoding', 'UTF-8');

6. Добавляем в файл /app/app_controller.php (или создаем этот файл) список хелперов по-умолчанию. Удобнее всего прописать этот список здесь, чтобы не забыть подключить javascript хелпер ко всем контроллерам, а то он теперь нужен для layout’а (им библиотеки подключаются).
   
   

   <?php
   class AppController extends Controller {
       var $helpers = array('Html','Form','Javascript');
   }
   ?>

7. Создаем пустой layout для ajax - /app/views/layouts/ajax.ctp. Он нужен просто пустой, чтобы при ajax- выводе небыло лишнего вывода.
8. Все, вся предварительная подготовка сделана.

Предположим, что у вас уже есть контроллер корзины (carts_controller.php), в котором есть функция put_in_cart($product_id). Корзина может быть реализована очень по-разному, поэтому полный код я здесь не привожу. Если будет интересно — пишите в комментах, может быть сделаю отдельный пост про разные виды корзин.

Ну так вот, у вас уже есть функция, которая помещает товар в корзину. Вам нужно так переписать эту функцию, чтобы она возвращала в вид количество товаров в корзине после добавления. И заодно установить для нее layout ajax. Например, так:

function put_in_cart($prod_id = null) {
	$this->layout = 'ajax'; 
 
	/* пропущено */
 
	$count = $this->Cart->findCount('order_id='.$order_id); 
	$this->set('count', $count); 
}

Создаем шаблон для вывода количества товаров в корзине (/app/views/carts/put_in_cart.ctp). Он очень, очень простой:

<?php echo $count;?>

Подготавливаем в основном layout’е место для вывода количества товаров. Это может быть блок типа «Ваша корзина», с текстом «товаров в корзине: х» и ссылкой «Оформить заказ». Например, такой:

 <span id=”cart”> Ваша корзина</span><br />
Всего товаров:  <span id="cart_count"><?php echo $this->requestAction('/cats/cart_count'); ?></span><br />
<?php echo $html->link('Оформить заказ', '/cart/order'); ?>

Здесь специально сделан requestAction к функции cart_count() для того чтобы при заходе на страничку отображалось актуальное количество товаров в корзине. Иначе число будет появляться только при щелчке по «добавить товар». Функция cart_count() просто возвращает число.

Обратите внимание — именно содержимое «span id="cart_count"»«/span» будет обновляться при ajax-запросе.

Теперь привязываем сам запрос. В виде, отвечающем за вывод списка товаров, вместо ссылки «Добавить товар в корзину» пишем следующее:

<?php
 echo $ajax->link('Добавить в корзину', array('controller' => 'carts', 'action' => 'put_in_cart', $prod['id'] ), array('update' => 'cart_count'));
?>

Готово!

Теги: ajax, cakephp