Интернет-магазин. AJAX корзина товаров. Часть 2: JavaScript функции.

Это вторая статья из серии AJAX корзина товаров. В первой я описал PHP функции для работы корзины. В этой мы продолжим написание корзины товаров с использованием технологии AJAX. Для полноценного функционирования корзины нам понадобится подключить библиотеку jQeury, которую можно скачать здесь.
Итак, для клиентской части корзины понадобятся JavaScript функции, аналогичные PHP функциям (не забудьте, что это функции JavaScript а не PHP, как их разместить на странице я расскажу позже):

1. function add_to_cart(product_id) {

   //здесь, как и в PHP, значение количества по умолчанию 1
   //пишем запрос к файлу backend, его я опишу позже.
   $.post( "backend/add_to_cart.php", {product_id: product_id , count: count}, update_cart());
   }

   Короткая, но очень непонятная функция, правда? Опишу по порядку. Я надеюсь, что вы хоть немного знакомы с jQuery. Итак, строка $.post() производит запрос методом POST к файлу backend/add_to_cart.php, передает ему параметр product_id со значениям product_id. По окончании AJAX запроса, происходит вызов функции update_cart(), которая будет описана ниже. Теперь переходим к самому файлу add_to_cart.php. Сейчас уже стоит сказать и о структуре файлов, а то вы можете запутаться, если этого еще не произошло. Я приведу картинку, так будет гораздо проще:

   
   Все файлы располагаются в директории cart, которая в свою очередь находится в DOCUMENT_ROOT сайта. По порядку:
   • Папка backend – в ней будут лежать файлы, отвечающие за серверную часть работы корзины, и обработку AJAX запросов.
   • В файле cart.php собраны функции для работы корзины
   • index.php – список товаров и прочее – внешний вид сайта.
   • jquery.js – библиотека jQuery
   • functions.js – JavaScript функции корзины
   • styles.css – CSS стили.

   Теперь переходим к файлу add_to_cart.php. В POST запросе он получает значение идентификатора товара и количество товара.
   add_to_cart.php:
   <?php
   //запускаем сессию
   session_start();
   include $_SERVER['DOCUMENT_ROOT'].'/cart/cart.php';
   add_to_cart($_POST['product_id']);
   ?>
   Вот и все, все остальное за нас сделает файл cart.php. Теперь, совершенно естественно переходим к функции update_cart():

2. function update_cart() {
   $.post( "backend/update_cart.php", {}, on_success);
   function on_success(data)
   {
   $('#small_cart').html(data);
   }
   }
   
   Тут немного сложнее, однако в backend файл вообще не передается никаких параметров. Мы просто обращаемся к файлу backend/update_cart.php, а он все делает за нас, а именно:
   файл update_cart.php:
   
   <?php
   session_start();
   echo 'Товаров в корзине '.$_SESSION['products_incart'].' на сумму '.$_SESSION['cart_coast'];
   
   Оказывается, файл update_cart.php делает только одно, выводит надпись сколько товаров в корзине и сколько они стоят, и передает эту надпись в функцию on_success(), которая в свою очередь помещает ее в элемент страницы с CSS идентификатором small_cart.