Интернет-магазин. AJAX корзина товаров. Часть 3: Интерфейс

В файлах примера я поместил интерфейс корзины в отдельный файл cart_interface.php, в котором будет выведен список товаров, а также можно будет изменить количество или удалить товар из корзины.

1. Сначала напишем JavaScript функцию, которая будет удалять товары из корзины:

   function remove_from_cart(product_id) {
     $.post(  "backend/remove_from_cart.php", {product_id:product_id}, update_cart_interface()); 
   }
   

   Сама функция выглядит аналогично функции add_to_cart(), с той лишь разницей, что она обращается к другому backend файлу remove_from_cart.php, который выглядит следующим образом: remove_from_cart.php:

     <?php
     session_start();
     include $_SERVER['DOCUMENT_ROOT'].'/cart/cart.php';
     remove_from_cart($_POST['product_id']);
     ?>
   

   После удачного запроса, JavaScript функция remove_from_cart() вызывает функцию update_cart_interface(), которая будет выводить полную корзину товаров с новыми значениями количества и суммы. Описание функции update_cart_interface() будет дано ниже.

2. Теперь пишем функцию, которая будет обновлять количество выбранного товара:

   function update_product_count(product_id, count) {
     $.post(  "backend/update_product_count.php", {product_id:product_id, count:count},  update_cart_interface);
   }
   

   Она обращается к backend файлу backend/update_product_count.php:

     <?php
     //запускаем сессию
     session_start();
     include $_SERVER['DOCUMENT_ROOT'].'/cart/cart.php';
     update_product_count($_POST['product_id'], $_POST['count']);
   

   По завершении запроса вызывается функция update_cart_interface(), которую уже пора описать:

3. Функция update_cart_interface(), которая выводит измененные значения в корзине:

   function update_cart_interface()  {
     $.post("backend/cart_interface.php", {},
   	function  on_success(data) {
   		$('#cart_interface').html(data);
   	});
   }
     

   Она не получает никаких значений, и после выполнения AJAX запроса выводит полученные данные в элемент с идентификатором cart_interface. Backend файл этой функции выглядит так:

     <?php
     //запускаем сессию
     session_start();
     include $_SERVER['DOCUMENT_ROOT'].'/cart/cart.php';
     include_once $_SERVER['DOCUMENT_ROOT'].'/cart/db.class.php';
     $db=new DB;
     echo '<table cellpadding="4">';
     foreach ($_SESSION['products'] as $key=>$value) {
     $q="SELECT  * FROM products WHERE id='$key'";
     $product=$db->fetch_assoc($db->query($q));
     ?>           
     <tr>
     <td><?php  echo $product['name']?></td>
     <td>
     количество:  <input type="text" size="2"  id="product_count_<?php echo $key;?>" value="<?php echo  $_SESSION['products'][$key]['count']?>" /> 
     <span  onclick="update_product_count(<?php echo $key?>,  $('#product_count_<?php echo $key;?>').val()">обновить</span>
     </td>
     <td>
     стоимость: 
     <?php  echo  ($_SESSION['products'][$key]['count']*$_SESSION['products'][$key]['coast'])?>
     </td>
     <td>
     <span  onclick="remove_from_cart(<?php echo  $key?>)">удалить</span>
     </td>
     </tr>
     <?php   
     }
     ?>
     </table>
     <div>Товаров в корзине <?php echo  $_SESSION['products_incart']?> на сумму <?php echo  $_SESSION['cart_coast']?></div>
   
     

  <?php
  session_start(); 
  include_once 'db.class.php';
  $db=new DB;
  include 'cart.php';
  ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type"  content="text/html; charset=windows-1251" />
  <title>Untitled Document</title>
  <script language="javascript"  type="text/javascript"  src="functions.js"></script>
  <script language="javascript"  type="text/javascript" src="jquery.js"></script>
  </head>
  <body>
  <div id="cart_interface">
  <table  cellpadding="4">
  <?php 
  foreach  ($_SESSION['products'] as $key=>$value) {
  $q="SELECT  * FROM products WHERE id='$key'";
  $product=$db->fetch_assoc($db->query($q));
  ?>           
  <tr>
  <td><?php echo  $product['name']?></td>
  <td>
  количество:  <input type="text" size="2"  id="product_count_<?php echo $key;?>" value="<?php echo  $_SESSION['products'][$key]['count']?>" /> 
  <span  onclick="update_product_count(<?php echo $key?>, $('#product_count_<?php  echo $key;?>').val())">обновить</span>
  </td>
  <td>
  стоимость: 
  <?php  echo  ($_SESSION['products'][$key]['count']*$_SESSION['products'][$key]['coast'])?>
  </td>
  <td>
  <span  onclick="remove_from_cart(<?php echo $key?>)">удалить</span>
  </td>
  </tr>
  <?php    
  }
  ?>
  </table>
  <div>Товаров  в корзине <?php echo $_SESSION['products_incart']?> на сумму <?php  echo $_SESSION['cart_coast']?></div>
  </div>
  <a href="index.php">вернуться к  покупкам</a>
  </body>
  </html>
  

На этом хотелось бы закончить статьи о том, как сделать корзину интернет магазина ан AJAX.