Дек 02 2008

Добавление товаров в корзину на AJAX

Раздел: Веб-разработкаМета @ 23:18

Задача из области юзабилити — как добавить товар в корзину, и при этом оставить человека на той же странице, причем желательно даже без перезагрузки оной? Раньше было проблемой, последние пару лет — везде делается на 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'));
?>

Готово!

Теги: ,

2 Responses to “Добавление товаров в корзину на AJAX”

  1. MaxLord says:

    Добавляем в layout ссылки на эти библиотеки и устанавливаем кодировку для страниц.
    Кодировка — это важно, ajax будет корректно работать только если весь проект у вас в юникоде!

    charset(”utf-8″);?>
    link(’prototype’) ?>
    link(’scriptaculous.js?load=effects’) ?>

    потратил 2,5 часа и не понял как это мутить - *Добавляем в layout ссылки на эти библиотеки и устанавливаем кодировку для страниц.*
    Всё облазил ничё не нашёл оО..((

  2. Мета says:

    Сразу после третьего пункта идет пример кода - его и нужно вставить в layout.

Напиши комментарий!