Блог / JavaScript + Ajax / Создаем корзину для сайта

Создаем корзину для сайта

В этом уроке разберем, как можно создать корзину для сайта. Рассмотрим основные моменты. У нас будет страница с товарами, где для каждого товара будет кнопка купить со своим id, при клике на кнопку мы будем делать Ajax-запрос к php скрипту. В этом php файле будем создавать сессию корзины. Ну и напоследок сделаем страницу нашей корзины для сайта, где также при помощи Ajax-запросов можно будет менять количество товаров или удалять товар из корзины.

В этом уроке подключим стили bootstrap. Также подключим фреймворк Jqery для наших ajax-запросов. В нашем примере создадим страницу с тремя товарами, где главный html код это кнопка <button class="btn-buy" id="1">Купить</button> c id=”код товара” и классом class="btn-buy", чтобы мы могли обработать клик в jqery. На своем сайте вы, скорее всего, будете выводить товары циклом, доставая их из базы данных. Кнопке купить нужно будет давать id с кодом товара.

Вот наша страница с товарами:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Корзина для сайта</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
 <div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="http://placehold.it/192x200" alt="...">
      <div class="caption">
        <h3>Товар 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, modi!</p>
        <p><button class="btn btn-primary btn-buy" id="1">Купить</button></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="http://placehold.it/192x200" alt="...">
      <div class="caption">
        <h3>Товар 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, modi!</p>
        <p><button class="btn btn-primary btn-buy" id="2">Купить</button></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="http://placehold.it/192x200" alt="...">
      <div class="caption">
        <h3>Товар 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, modi!</p>
        <p><button class="btn btn-primary btn-buy" id="3">Купить</button></p>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    
</body>
</html>

Теперь напишем скрипт обработки клика на кнопку, в котором мы получим id кнопки, который является кодом нашего товара и отправим его аякс запросом в файлик addtocart.php.

<script>
    $('.btn-buy').click(function () {//клип на кнопку
        var id = $(this).attr('id'); //получаем id этой кнопки
            $.ajax({//передаем ajax-запросом данные
            type: "POST", //метод передачи данных
            url: '/addtocart.php',//php-файл для обработки данных
            data: {id_tov: id},//передаем наши данные
            success: function(data) {//
                $('.basker_kol').html(data);//меняем количество товаров на кнопке корзины 
                }
            });
    });
</script>

Также добавим на нашу страницы ссылку на корзину со счетчиком товаров.

<a class="btn btn-default btn-lg" href="cart.php">
    Корзина
    <span class="badge basker_kol">0</span>
</a>

Теперь создадим наш файл addtocart.php, где мы будем получать данные от аякс-запроса, открывать сессию корзины и записывать в нее добавленный товар. Сессия корзины будет у нас в виде массива, где индексами будут id наших товаров, а значения количество товаорв. При добавлении товара будем устанавливать количество 1, которое можно будет менять на странице корзины.

<?php
$id = $_POST['id_tov'];//получаем id товара

        session_start();
        if (!isset($_SESSION['cart'])) {//если сесия корзины не существует
            $temp[$id] = 1;//в масив заносим количество тавара 1 
        } else {//если в сесии корзины уже есть товары
            $temp = $_SESSION['cart'];//заносим в масив старую сесию
            if (!array_key_exists($id, $temp)) {//проверяем есть ли в корзине уже такой товар
            $temp[$id] = 1; //в масив заносим количество тавара 1
            }      
        }
        $count = count($temp);//считаем товары в корзине
        $_SESSION['cart'] = $temp;//записывае в сесию наш масив
        echo $count; //возвращаем количество товаров
?>

Теперь сделаем страницу корзины cart.php. Мы будем выводить товары в виде таблицы:

id-товара

input с количеством

Кнопка удалить

У себя по id товара можете вытаскивать из базы информацию о товаре, для отображения названия, картинки, цены…

Вот код нашей корзины:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Корзина</title>
</head>
<body>
<?php session_start();
if (!isset($_SESSION['cart'])):?>

<h2>Ваша корзина пуста</h2>

<?php else :?>
<table>
    <tr>
        <td>id</td>
        <td>количество</td>
        <td>Удалить</td>
    </tr>
    <?php $temp=$_SESSION['cart'];
          foreach($temp as $id=>$kol): ?>
           <tr id="<?=$id?>">
                <td>id товара: <?=$id?></td>
                <td><input type="number" class="count-product" id="<?=$id?>" value="<?=$kol?>"></td>
                <td><button class="btn btn-default btn-del" id="<?=$id?>">Удалить</button></td>
            </tr>
          <?php endforeach; ?>
</table>          
<?php endif; ?>    
</body>
</html>

Теперь подключим на нашу страницу корзины jqery и напишем скрипт отбработки изменения количества и кнопки удалить. Тут мы также будем делать аякс-запрос к нашим php-обработчикам, где будет меняться сессия корзины.

<script src="jquery-2.2.3.min.js"></script>   
<script>
    //изменение количества
        $('.count-product').change(function () { //изменение содержимого инпута     
        var col = $(this).val(); //получаем количество
        if (col<1){ col = 1; $(this).val(1); } //если ввели меньше 1 установим 1
        var id = $(this).attr('id'); //получаем id товара
            $.ajax({//аякс-запрос
            type: "POST",//метод
            url: 'cartamount.php',//куда передаем
            data: {col_tov: col, id_tov: id},//данные
            success: function() {//получаем результат
               //тут можно пересчитать сумму
                }
            });
        });
        //удаление товара
        $('.btn-del').click(function () { //клик на кнопку     
        var id = $(this).attr('id'); //получаем id товара
            $.ajax({//аякс-запрос
            type: "POST",//метод
            url: 'cartdel.php',//куда передаем
            data: {id_tov: id},//данные
            success: function(data) {//получаем результат
                    //тут можно пересчитать сумму
                    $('tr#'+id).css('display', 'none');//скрываем строку таблицы
                }
            });
        });
</script>

Осталось написать два php обработчика. В cartamount.php мы будем изменять количество товаров в нашей сессии, а в cartdel.php удалять в сессии запись с нужным id. Начнем с cartamount.php

<?php
$id = $_POST['id_tov'];//получаем id
$col = $_POST['col_tov'];//получаем количество
        
session_start(); //стартуем сессию
$temp = $_SESSION['cart']; //переносим сессию во временную переменную
$temp[$id]=$col; //изменяем количество
$_SESSION['cart'] = $temp; //сохраняем сессию
?>

Теперь в нашей сессии изменено количество и если обновим страничку корзины, то количество товаров сохранится. Теперь создадим обработчик удаления товара cartdel.php

<?php
$id = $_POST['id_tov'];//получаем id
session_start(); //стартуем сессию
$temp = $_SESSION['cart']; //переносим сессию во временную переменную
   if ($temp){
       unset ($temp[$id]);//удаляем запись
      }
$_SESSION['cart'] = $temp; //сохраняем сессию
?>

Вот и все наша корзина для сайта готова, теперь можно создавать кнопку «оформить заказ» и там уже работать с нашей сессией корзины.

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння