Skip to content

Commit

Permalink
Cart sidebar enhancement
Browse files Browse the repository at this point in the history
  • Loading branch information
@tharanithar-r
tharanithar-r committed Oct 24, 2023
1 parent f3e79ea commit 0d77048
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 39 deletions.
19 changes: 11 additions & 8 deletions menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ tr:hover td{
position: fixed;
top: 0;
right: 0;
width: 250px;
width: 350px;
background-color: white;
/* visibility: hidden; */
}
Expand All @@ -89,10 +89,6 @@ div.col h3{
padding-left: 10px;
}

.sidebar .row{
padding-top: 10px;
}

.sidebar{
background-color:darkgrey !important;
}
Expand All @@ -104,24 +100,31 @@ div.col h3{
.cartq{
text-align: center;
padding-left: 10px;
font-size: 12px;
font-size: 14px;
}

.remove{
background-color: rgb(222, 86, 86);
border: 1px;
border-radius: 8px;
width: 80%;
width: 50%;
}

.fb{
background-color: rgb(222, 86, 86);
background-color: #2F4858;
color: white;
width: 80%;
border-radius: 8px;
border: 1px;
height: 35px;
}

.cartsidebar{
background-color: black;
width: 100px;
}

.item-card{
padding: 12px;
box-shadow: 0 2px 6px rgba(65, 11, 16, .15)
}
70 changes: 49 additions & 21 deletions menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,15 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
<script src="jquery-3.6.4.min.js"></script>
<script src="menu.js"></script>


<!-- Boxicons CSS -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="mynav.css">
<script src="menu.js"></script>
Expand Down Expand Up @@ -61,15 +59,38 @@
</div>
</nav>
<div class="wrapper h-100">
<div class="sidebar h-100">
<div class="row">
<div class="col">
<h3>Cart</h3>
<div class="sidebar h-100" style="overflow-y: scroll;">
<br>
<div class="container">
<div class="row">
<div class="col-10" style="text-align: center;">
<h3 style="color: #2F4858;padding-left: 50px;font-weight: bold;">Cart</h3>
</div>
<div class="col-2"><div type="button" style="background: #2F4858;border-radius: 12px;color: white;" class="close col">X</div></div>
</div>
<br>
<div id="divcart">
<div class="card item-card" id="cartcontainer" style="border-bottom-left-radius: 0px;border-bottom-right-radius: 0px; border-top-left-radius: 12px;border-top-right-radius: 12px;">

<div type="button" class="close col">X</div>
</div>
<div class="container" id="cartcontainer">
</div>
<div class="footer">
<div class="card" style="border-top-right-radius: 0px;border-top-left-radius: 0px;border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;padding:12px;background-color: #de5656;">
<div class="row" >
<div class="col-6" style="text-align: end;font-weight: bold;font-size: large;">Total:</div>
<div class="col-6" style="text-align: start;font-weight: bold;font-size: large;"><label id="lbltotal"></label></div>
</div>
<div class="row" style="height: 15px;"></div>
<div class="row">
<div class="col" style="text-align: center;">
<button class="fb" style="background-color: #2F4858;color: white;">Checkout<a href="order.html"></a></button>
</div>
</div>
<div class="row" style="height: 15px;"></div>
<div class="row">
<div class="col" style="text-align: center;"><button class="fb" id="clear">Clear Cart</button></div>
</div>
</div>
</div>
<!-- <div class="row">
<div class="col-md-6">
<div class="row">name</div>
Expand All @@ -80,19 +101,26 @@ <h3>Cart</h3>
<div class="row" type="button">remove</div>
</div>
</div> -->
</div>
<hr>
<div class="footer">
<div class="row">
<div class="col" style="text-align: center;"><button class="fb" id="clear">Clear Cart</button></div>
<div class="col"><a href="order.html"><button class="fb" style="background-color: rgb(89, 89, 228);">Checkout</button></a></div>


</div>
<div id="divempty" style="display: none;">
<div class="card item-card" id="cartcontainer" style="border-bottom-left-radius: 0px;border-bottom-right-radius: 0px; border-top-left-radius: 12px;border-top-right-radius: 12px;padding:30px;">
<label style="text-align: center;">Your Cart is Empty</label>

</div>
<div class="footer">
<div class="card" style="border-top-right-radius: 0px;border-top-left-radius: 0px;border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;padding:12px;background-color: #de5656;">
<div class="row">
<div class="col" style="text-align: center;">
<a href="./menu.html"><button class="fb" style="background-color: #2F4858;color: white;">Go to Menu</button></a>
</div>
</div>
</div>
</div>
</div>
</div>


<br>
<br>

</div>
</div>
<h1 class="text-bg-dark">CAFE MENU</h1>
Expand Down
55 changes: 45 additions & 10 deletions menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ $(document).ready(function () {

// show and hide cart
$(".cartsidebar").click(function () {
checkcart(cart);
$(".sidebar").show(500);
$(this).hide();
});
Expand Down Expand Up @@ -92,23 +93,57 @@ function updatecart(cart){
// add items to the cart sidebar
function addtocart(cart){
// console.log(1);
checkcart(cart);
let str=``
for(let item in cart){
str+=`<div class="row">
<div class="col-md-6">
<div class="row cartname"><strong>`+cart[item].name+`</strong></div>
<div class="row cartq w-100">Quantity: `+cart[item].quantity+`</div>
</div>
<div class="col-md-6">
<div class="row cartprice"><strong>Rs.`+cart[item].price+`</strong></div>
<div class="row rem"><button class="remove" id="remove`+item+`">remove</button></div>
</div>
</div>`;
str+=`
<div class="row">
<div class="col-6">
<strong>`+cart[item].name+`</strong>
</div>
<div class="col-6" style="text-align:end;" >
<strong>Rs.`+cart[item].price+`</strong>
</div>
</div>
<div class="row" style="height:5px"></div>
<div class="row">
<div class="col-6 cartq" style="text-align:start;">
<label>Quantity: <strong>`+cart[item].quantity+`</strong></label>
</div>
<div class="col-6 cartprice" style="padding-right:10px;justify-content:end;">
<button class="remove" id="remove`+item+`"><i class='bx bx-trash-alt' style="color:black" undefined ></i></button>
</div>
</div>
<hr>
`;
}

document.getElementById("cartcontainer").innerHTML=str;
totprice(cart);
}

//calculating totprice = itemprice*qty
function totprice(cart){
let lblprice = document.getElementById('lbltotal');
let finalprice = 0;
for(let item in cart){
finalprice += (cart[item].price * cart[item].quantity);
}
lblprice.innerHTML= finalprice;
}

//check the cart if it is empty or not
function checkcart(cart){
if(Object.keys(cart).length === 0){
document.getElementById('divempty').style.display = 'block';
document.getElementById('divcart').style.display = 'none';
}
else{
document.getElementById('divempty').style.display = 'none';
document.getElementById('divcart').style.display = 'block';
}
};

//clear cart by looping through cart and deleting all items
function clearcart(cart){
for( let item in cart){
Expand Down

0 comments on commit 0d77048

Please sign in to comment.