На главную Статьи Функции

Интернет-магазин. 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>

Он довольно объемный, но на самом деле его код аналогичен коду файла cart_interface.php, который отвечает за отображение интерфейса корзины: cart_interface.php:
  <?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.



© 2010-2019 При использовании материалов ссылка на сайт www.webchaynik.ru обязательна

обратная связь