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

آموزش ساخت سبد خرید در 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.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

آموزش ساخت سبد خرید در PHP


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

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

ارسال نظر