Menu-Scan/cart.php at main · riyadhbinislam/Menu-Scan · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<?php
    ini_set('display_errors', 1);
    error_reporting(E_ALL);
    include_once "config/config.php";
    include_once "lib/Database.php";
    include_once "lib/Session.php";
    Session::init();
    include_once "helpers/format.php";
    include_once "classes/cart.php";
    include_once "classes/order.php";

    $db = new Database();
    $fm = new Format();
    $cart = new Cart();

    $tableid = isset($_SESSION['tableid']) ? $_SESSION['tableid'] : null;
?>

<style>
    .itemQuantity {
        position: absolute;
        top: -9px;
        left: -19px;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background-color: #000;
        color: #fff;
        text-align: center;
    }

    .data-info {
        position: relative;
    }

    .data-action-alt a i {
        margin: 0;
    }
</style>

<section class="main-content">
    <div class="container">
        <h2 class="section-title">Your Cart</h2>
        <div id="cart-wrapper" class="sec-cat-product">
            <div class="cart-items"></div>
            <div class="total-price"></div>
            <div class="ordernow">
                <a href="order.php?orderId=order" class="regular-button" style="margin-top: 50px;">Place Order</a>
            </div>
        </div>
    </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    function loadCart() {
        $.ajax({
            url: 'fetch_cart.php',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                var cartItems = '';
                var total = 0;
                var itemQuantity = 0;

                if (response.length > 0) {
                    $.each(response, function(index, item) {
                        var itemTotal = parseFloat(item.itemPrice) * parseInt(item.itemQuantity);
                        total += itemTotal;
                        itemQuantity += parseInt(item.itemQuantity);

                        cartItems += `
                            <div class="cart-solo-row">
                                <div class="data-info">
                                    <span class="itemName">${item.itemName}</span>
                                    <span class="itemPrice">$${parseFloat(item.itemPrice).toFixed(2)}</span>
                                    <span class="itemQuantity">${item.itemQuantity}</span>
                                </div>
                                <div class="data-action-alt">
                                    <span class="action-button">
                                        <a href="delcart.php?cartId=${item.cartId}" class="delete-item"><i class="fas fa-trash-alt"></i></a>
                                    </span>
                                </div>
                                <div class="data-amount">
                                    <span>$${itemTotal.toFixed(2)}</span>
                                </div>
                            </div>
                        `;
                    });

                    $('#cart-wrapper .cart-items').html(cartItems);
                    $('#cart-wrapper .total-price').html(`<span>Sub Total:</span> <span>$${total.toFixed(2)}</span>`);
                    $('#cartButton strong').text(itemQuantity); // Update cart quantity in header
                } else {
                    $('#cart-wrapper .cart-items').html("<span class='msg-alt'>Your Cart is Empty! Please add some products to your cart.</span>");
                    $('#cart-wrapper .total-price').empty();
                    $('#cartButton strong').text('0'); // Update cart quantity in header
                }
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    }

    // Load cart on page load
    loadCart();
});
</script>