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

Интернет-магазин. 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.
Ага, ну и для понимания, выложу код самого файла index.php:
<?php
session_start();
//Здесь подключаем базу данных и еще что-нибудь.
?>
<!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>
<table cellpadding="4">
<?php
foreach ($products as $product) {
echo '<tr>';
echo '<td>'.$product['product_name'].'</td><td><span onclick="add_to_cart('.$product['product_id'].')">в корзину</span></td>';
echo '</tr>';
}
?>
</table>
<div id="small_cart">
<?php
if (empty($_SESSION['products'])) {
echo 'Ваша корзина пуста';
}
else {
echo 'Товаров в корзине '.$_SESSION['products_incart'].' на сумму '.$_SESSION['cart_coast'];
}
?>
</div>
</body>
</html>

На этом на сегодня закончу. В следующей статье расскажу как удалять товары из корзины и изменять их количество без перезагрузки страницы с использованием технологии AJAX.



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

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