jQuery С чего начать? Дизайн Другие CSS HTML JavaScript PHP

Уважаемые посетители сайта, задающие вопросы вроде "А как прикрутить вашу корзину к сайту?" и т.п. Я не делаю готовых решений, я описываю логику реализации, для каждого отдельного сайта нужно будет дописывать те или иные вещи в любом случае, поэтому если вам очень нужно что-либо прикрутить или приделать, я оказываю платные и бесплатные услуги по консультированию и доработке сайтов. Пишите в форму обратной связи вверху страницы, отвечу всем.

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

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

Сначала напишем 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() будет дано ниже.
Теперь пишем функцию, которая будет обновлять количество выбранного товара:
```
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(), которую уже пора описать:

Функция 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.

Статьи в разделе