آموزش ساخت سبد خرید در PHP ویژگی (shopping cart)

آموزش ساخت سبد خرید در PHP – ویژگی سبد خرید در فروشگاه های اینترنتی این است که حتی اگر کاربری وارد حساب خود نشود

همچنان لیست محصولات برای خرید در خود نگه می دارد و ویژگی بعدی آن این است که تمامی اقلام نگه داری شده را می توان یکجا سفارش داد و پرداخت نمود .

این پروژه شامل 4 فایل است :

1- app.js : کنترل رفتار کاربر پس از بارگذاری صفحه و ارسال درخواست ajax
2- cart.php : نقش rest api را ایفا می کند و داده ها را به صورت json برمی گرداند
3- shop.php : توابع مورد نیاز مان را تامین می کند
4- index.php : صفحه فروشگاه و لیست محصولات .

فایل app.js برای ارسال درخواست به cart.php و کنترل رفتار کاربر

متغیر requestLock برای جلوگیری از نتیجه غیرمنتظره است یعنی در نظر بگیرید اگر سرور شلوغ باشد و درخواست های متعددی از سمت کلاینت ارسال شود ، این درخواست های ارسال شده به ترتیب پاسخ داده نشود . پس با تعریف requestLock در صورتی که false بود اجازه ارسال درخواست بعدی وجود دارد

document.addEventListener("DOMContentLoaded", function() {

    // access DOM

    const cartBtnDOM = document.getElementById("cart-btn");
    const cartDOM = document.getElementById("cart-ajax-result");
    const cartBodyDOM = document.getElementById("cart-ajax-result-body");

    const addToCartBtnDOM = document.getElementsByClassName("add-to-cart");

    // other property
    let requestLock = false;



    // set handler for DOM

    for (const element of addToCartBtnDOM) {
        element.onclick = toCartFunc;
    }

    cartBtnDOM.onclick = showCartFunc;



    // call require functions

    loadCartFunc();


    // callback dom

    function showCartFunc() {
        const thisElement = this;

        cartDOM.classList.toggle("ds-none");

    }

    function toCartFunc(e) {
        e.preventDefault();
        const thisElement = this;
        const PID = thisElement.dataset['id'];
        const itemAdded = thisElement.dataset['added'];

        if (itemAdded == "false") {


            customGetRequestFunc({
                params: {
                    "pid": PID,
                    "state": "add"
                },
                loadFunc: function() {
                    requestLock = false;
                    const cartItems = this.response;

                    if (cartItems) {
                        if (cartItems['status'] == 1) {
                            loadCartFunc();
                            thisElement.setAttribute("data-added", "true");
                            thisElement.innerHTML = "✅";
                        } else
                            window.alert(cartItems['msg']);
                    }
                }
            });
        } else {
            alert("این محصول از قبل به سبد خرید اضافه شده");
        }

    }

    // ajax request

    function customGetRequestFunc(options) {
        if(requestLock == true)
            return;

        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";

        requestLock = true;

        let queryString = new URLSearchParams;

        const params = options.params;
        for (const param in params) {
            queryString.append(param, params[param]);
        }


        queryString = "?" + queryString.toString();

        xhr.open("GET", location.origin + "/cart.php" + queryString);

        xhr.onload = options.loadFunc;

        xhr.onerror = function() {
            requestLock = false;
            console.warn("[XHR Error]");
        }

        xhr.send();
    }

    function loadCartFunc() {
        customGetRequestFunc({
            params: {
                "rcv": "true"
            },
            loadFunc: function() {
                requestLock = false;
                const cartItems = this.response;

                if (cartItems) {
                    if (cartItems['status'] == 1) {

                        cartBodyDOM.innerHTML = "";

                        if (cartItems['pid_list'] == false)
                            cartBodyDOM.innerHTML = "خالی ):";
                        else {
                            for (const cartItem of cartItems['pid_list']) {
                                const productAddCartBtn = document.getElementById("pid_" + cartItem.id);

                                if (productAddCartBtn) {
                                    productAddCartBtn.innerHTML = "✅";
                                    productAddCartBtn.setAttribute("data-added", "true");
                                }

                                cartBodyDOM.innerHTML += generateHtmlElementFunc(cartItem);
                            }
                        }
                    } else
                        window.alert(cartItems['msg']);
                }
            }
        });
    }


    // other

    window.removeItemFromCartFunc = function(e) {
        const thisElement = e.target;
        const PID = thisElement.getAttribute("data-id");

        customGetRequestFunc({
            params: {
                "pid": PID,
                "state": "rmv"
            },
            loadFunc: function() {
                requestLock = false;
                const cartItems = this.response;

                uniqueAddToCartBtnDOM = document.getElementById("pid_" + PID);



                if (cartItems) {
                    if (cartItems['status'] == 1) {
                        if (uniqueAddToCartBtnDOM) {
                            uniqueAddToCartBtnDOM.setAttribute("data-added", "false");
                            uniqueAddToCartBtnDOM.innerHTML = "افزودن به سبد خرید";
                        }
                        loadCartFunc();
                    } else
                        window.alert("خطایی رخ داده")
                }
            }
        });

    }

    function generateHtmlElementFunc(data) {
        const templateHtml = `
${data.title}

${data.price} تومان✘`;
        return templateHtml;
    }



});

فایل cart.php برای تعامل با دیتابیس و پاسخ به صورت json

<?php

header("Content-Type: application/json");
require_once "shop.php";

if(!empty($_COOKIE['cart_list']) && !is_countable(json_decode($_COOKIE['cart_list'],true)))
{
	setcookie("cart_list" , null , time() - 10);
	die();
}

$cart_list_entity = [];
$cart_list_entity["status"] = 1;

if (!empty($_GET['pid']) && @$_GET['state'] == "add") {

	$product_ID = $_GET['pid'];

	if (!product_exist($product_ID)) {
		die('{"msg" : "محصول وجود ندارد" , "status" : 0}');
	}

	$cart_list_entity["msg"] = "با موفقیت اضافه گردید";

	if (empty($_COOKIE['cart_list'])) {
		$cart_list_entity["pid_list"][] = $product_ID;

	} else if (!empty($_COOKIE['cart_list'])) {
		$cart_list_entity["pid_list"] = @json_decode($_COOKIE['cart_list'], true);

		if (count($cart_list_entity["pid_list"]) <= 9) {

			foreach ($cart_list_entity["pid_list"] as $pid) {

				if ($pid == $product_ID) {
					$cart_list_entity["status"] = 0;
					$cart_list_entity["msg"] = "محصول مورد نظر از قبل اضافه شده";
					break;
				}
			}

		} else {

			$cart_list_entity["status"] = 0;
			$cart_list_entity["msg"] = "حداکثر تعداد اقلام برای سبد خرید 10 عدد می باشد";
		}

		if ($cart_list_entity["status"] == 1) {

			array_push($cart_list_entity["pid_list"], $product_ID);
		}

	}

	setcookie('cart_list', @json_encode($cart_list_entity["pid_list"]), time() + 86400 * 30);

	print_json_data($cart_list_entity);

} else if (!empty($_GET['pid']) && @$_GET['state'] == "rmv") {

	$product_ID = $_GET['pid'];

	$cart_list_entity["msg"] = "با موفقیت حذف گردید";
	$cart_list_entity["pid_list"] = [];

	if (!empty($_COOKIE['cart_list'])) {
		$cart_list_entity["pid_list"] = @json_decode($_COOKIE['cart_list'], true);

		foreach ($cart_list_entity["pid_list"] as $pid_key => $pid) {

			if ($pid == $product_ID) {
				unset($cart_list_entity["pid_list"][$pid_key]);
				break;
			}
		}

	}

	setcookie('cart_list', @json_encode($cart_list_entity["pid_list"]) , time() + 86400 * 30);

	print_json_data($cart_list_entity);

} else if (!empty($_GET['rcv']) && $_GET['rcv'] == "true") {

	if (!empty($_COOKIE['cart_list'])) {

		$cart_list_entity["msg"] = "لیست سبد خرید";
		$cart_list_entity["pid_list"] = @json_decode($_COOKIE['cart_list'], true);

		print_json_data($cart_list_entity);
	}

} else {
	echo '{"msg" : "هیچ پارامتری تعریف نشده" , "status" : 0}';
}

?>

فایل shop.php برای توابع کاربردی ( دریافت ، جتسجو داده ها ، نمایش json )

<?php

function loop_product($pid = "", $select = "*") {

	$mysqli = new mysqli("localhost", "root", "", "shop");

	$mysqli->set_charset("utf8");
	$stmt = $mysqli->stmt_init();

	$GLOBALS['title'] = "لیست محصولات ";

	$loop_shop_query = "";

	if ($pid) {
		$loop_shop_query = "WHERE id=?";
	}

	$query = "SELECT {$select} FROM `products` {$loop_shop_query}";

	$stmt->prepare($query);
	if ($pid) {
		$stmt->bind_param("i", $pid);
	}

	$rows = [];

	if ($stmt->execute() && $res = $stmt->get_result()) {
		if ($stmt->affected_rows || $res->num_rows) {
			while ($row_loop = $res->fetch_assoc()) {
				$rows[] = $row_loop;
			}
		}
	}

	$stmt->close();
	$mysqli->close();

	return $rows;

}

function product_exist($pid) {

	$mysqli = new mysqli("localhost", "root", "", "shop");

	$mysqli->set_charset("utf8");
	$stmt = $mysqli->stmt_init();

	$query = "SELECT id FROM `products` WHERE id=?";

	$is_found = 0;
	$stmt->prepare($query);
	$stmt->bind_param("i", $pid);

	if ($stmt->execute() && $stmt->store_result()) {
		$is_found = $stmt->affected_rows;
		$stmt->free_result();
	}
	return $is_found;
}

function print_json_data($cart_list_entity) {

	$new_cart_list_entity = $cart_list_entity;

	

	$new_cart_list_entity["pid_list"] = [];

	foreach ($cart_list_entity["pid_list"] as $product_key => $product_id) {
		$product = loop_product($product_id , "id , title , thumbnail , price");

		if($product){
		$new_cart_list_entity["pid_list"][] = $product[0];
		}
	}

	echo json_encode($new_cart_list_entity);
}

?>

فایل index.php که شامل لیست محصولات می باشد

shopping cart

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RapidCode.IR - سبد خرید در PHP</title>
    <style>
    body {
        text-align: center;
        overflow-x: hidden;
    }

    #introduce {
        color: white;
        text-decoration: none;
        font-weight: bold;
        display: block;
        width: 100%;
        padding: 5px 10px;
        background-color: #4CAF50;
        text-align: center;
        font-size: 25px;
        margin-bottom: 45px;
    }

    .container{
        width: 70%;
        margin: 15px auto;
        direction: rtl;
    }

    .ds-none{
        display: none !important;
    }

    article {
    width: 25%;
    border: 2px solid skyblue;
    padding: 10px;
    float: right;
    margin-left: 15px;
    }

    article img {
    width: 200px;
	height: 200px;
    object-fit: cover;
    }

    article h2{
        height: 82px;
    }

    article p{
        height: 56px;
        overflow: hidden;
    }

    article a {
    text-decoration: none;
    font-weight: bold;
    background-color: #4CAF50;
    color: white;
    width: 100%;
    padding: 10px 0;
    display: block;
    }

    #cart-ajax-result{
        display: block;
        width: 50%;
        margin-right: 25%;
        padding-top: 30px;
        position: absolute;
        left: 25%;
        margin-top: 15px;
        background: green;
        color: white;

    }

    #cart-ajax-result tr{
        box-shadow: 0px 7px 5px black;  
        margin-bottom: 5px;
    }

    #cart-ajax-result td img{
        width: 90px;
        height: 90px;
        object-fit: contain;
        border: 1px solid;
    }

    #cart-ajax-result td a{
        text-decoration: none;
        font-weight: bold;
        color: black;
        font-size: medium;
    }

    #cart-ajax-result .remove-from-cart{
        font-size: large;
        font-weight: bold;
        color: white;
        background-color: #F44336;
        padding: 5px;
        cursor: pointer;
    }

    #price{
        display: block;
        color: orange;
        font-weight: bold;
    }

    #cart-btn{
        padding: 5px 15px;
        background-color: orange;
        font-weight: bold;
        font-size: large;
        border-bottom: 2px solid grey;
        cursor: pointer;
    }

    #cart-btn:hover{
        border-color: black;
    }


    </style>
</head>

<body>
    <a id="introduce" target="_blank" href="https://rapidcode.ir">رپید کد - کتابخانه مجازی برنامه نویسان</a>

    <div class="container">

            <div class="cart-wrapper">
			
            <span id="cart-btn">سبد خرید</span>

            <table id="cart-ajax-result" class="ds-none">
               <tbody id="cart-ajax-result-body">

                
                
               </tbody>
            </table>


            </div>
        

<?php 

require_once "shop.php";
$rows = loop_product();



?>


<h1><?php echo $GLOBALS['title'] ?></h1>

<?php

foreach ($rows as $row):

?>
    <article>
        <img src="<?php echo $row['thumbnail'] ?>" alt="<?php echo $row['title'] ?>">

        <h2><?php echo $row['title'] ?></h2>

        <p><?php echo $row['content'] ?></p>

        <span id="price"><?php echo $row['price'] ?> تومان</span><br>


        <a class="add-to-cart" href="#<?php echo $row['id'] ?>" id="pid_<?php echo $row['id'] ?>" data-ID="<?php echo $row['id'] ?>" data-added="false">افزودن به سبد خرید</a>

    </article>

<?php endforeach;?>

    </div>


    <script src="app.js"></script>
</body>
</html>

دموی ساخت سبد خرید در PHP

قبل از اجرای برنامه وارد پوشه shop DATABASE to import شده دیتابیس را import کنید

دانلود پروژه آموزش ساخت سبد خرید در PHP