Scribd
Upload
21 views

Jsonaddtocart

Uploaded by

LEGEND TAHA
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
21 views

Jsonaddtocart

Uploaded by

LEGEND TAHA
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">

<head>
<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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.5.1/css/all.min.css"
integrity="sha512-
DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2
LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Products Selling</title>
</head>
<style>
body {
overflow-x: hidden;
}
</style>

<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-
bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else
here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
</li>
</ul>

<div data-bs-toggle="modal" data-bs-target="#exampleModal" type="button"


class="me-3 mt-2 position-relative">
<i class="fa-solid fa-cart-shopping display-6"></i>
<span id="cart-len" class="position-absolute top-0 start-100 translate-
middle badge rounded-pill bg-danger">

<span class="visually-hidden">unread messages</span>


</span>
</div>

</div>
</div>
</nav>
<div class="container my-5">
<div class="row">

</div>
</div>

<!-- Modal -->


<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
<ol id="cart-body">

</ol>
<p><b id="total"></b></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<script>

var products = [
{
id: 1,
name: "Samsung S23 Ultra",
price: 220000,
quantity: 9,
link:
"https://images.samsung.com/pk/smartphones/galaxy-s23-ultra/buy/product_color_green
.png",
},
{
id: 2,
name: "Redmi 12c",
price: 26500,
quantity: 19,
link: "https://cubeonline.pk/cdn/shop/files/cube-website-graphics-
77_1024x1024.png?v=1698928317",
},
{
id: 3,
name: "Samsung A53",
price: 40000,
quantity: 16,
link: "https://images.samsung.com/is/image/samsung/p6pim/pk/2202/gallery/
pk-galaxy-a53-5g-a536-sm-a536elbgpkd-thumb-531569855",
},
{
id: 4,
name: "Infinix Hot 20",
price: 29000,
quantity: 74,
link: "https://g-mart.pk/wp-content/uploads/Infinix_Hot_20-438x593.jpg",
},
{
id: 5,
name: "Redmi Note 13",
price: 46500,
quantity: 130,
link: "https://mobiledevices.com.pk/images/xiaomi/xiaomi-redmi-note-13-5g-
02.webp",
},
{
id: 6,
name: "Iphone 15 Pro",
price: 450000,
quantity: 4,
link: "https://www.mega.pk/items_images/Apple+iPhone+15+Pro+Max_-
_24629.webp",
},
{
id: 7,
name: "Realme C50",
price: 29000,
quantity: 34,
link: "https://phonebolee.com/images/Realme-C50.jpg",
},
{
id: 8,
name: "OnePlus 11R",
price: 105000,
quantity: 2,
link: "https://oasis.opstatics.com/content/dam/oasis/page/2023/in/product/
11r/11r-red.png",
},
{
id: 9,
name: "Techno Pova",
price: 53000,
quantity: 21,
link: "https://advancetelecom.com.pk/wp-content/uploads/2023/11/Tecno-POVA-
5-Pro-5G-Silver.jpg",
},

{
id: 10,
name: "Iphone 13 Mini",
price: 87000,
quantity: 6,
link: "https://mobileguru.pk/wp-content/uploads/2022/07/Apple-iPhone-13-
mini-pakistan-mobileguru.png",
},

{
id: 11,
name: "Iphone 13 Mini",
price: 87000,
quantity: 6,
link: "https://mobileguru.pk/wp-content/uploads/2022/07/Apple-iPhone-13-
mini-pakistan-mobileguru.png",
},
]

var str = "";

products.forEach(function (data, index) {


str = str + `
<div class="col-12 col-sm-6 col-md-4">
<div class="card" style="width: 18rem;">
<img src=${data.link} class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${data.name}</h5>
<p class="card-text">Price : RS ${data.price}</p>
<p class="card-text">Stock : ${data.quantity}</p>
<a onclick='addTodo(${index} , ${data.price} , $
{JSON.stringify(data.name)} , 1)' class="btn btn-primary">Add To Cart</a>
</div>
</div>
</div>
`
})

document.getElementsByClassName("row")[0].innerHTML = str;

var cart = [];


var total = 0;

function addTodo(index, price, name, qty) {


// console.log(index , price , name ,qty)
cart = JSON.parse(localStorage.getItem("cart"));
total = JSON.parse(localStorage.getItem("total"));
var existingItem = cart.find((data) => data.name == name);
if (existingItem) {
existingItem.qty = existingItem.qty + 1;
total = total + price;
localStorage.setItem("cart", JSON.stringify(cart));
localStorage.setItem("total", total)
updateCart();
}
else {
cart.push({ name: name, price: price, qty: qty })
localStorage.setItem("cart", JSON.stringify(cart));
total = total + price;

localStorage.setItem("total", total)
updateCart();
}

var cartLen = document.getElementById("cart-len");

function updateCart() {
var str1 = "";
cart = JSON.parse(localStorage.getItem("cart"));

if (cart == null) {
cart = [];
}
total = JSON.parse(localStorage.getItem("total"))

if (total == null) {
total = 0;
}

console.log(total)
console.log(cart);
cartLen.innerHTML = cart.length;
cart.forEach(function (data, index) {
str1 = str1 + `
<li>${data.name} - (Rs : ${data.price}) <button onclick="increment(
${index} , ${data.price} , ${data.qty} )" class="btn-sm btn-primary">+</button>
<span>${data.qty}</span> <button onclick="decrement(${index} , ${data.price} , $
{data.qty})" class="btn-sm btn-primary">-</button></li>
`
})

document.getElementById("cart-body").innerHTML = str1;
document.getElementById("total").innerHTML = "Total : RS " + total;
}

updateCart();

function increment(index, price, qty) {


cart = JSON.parse(localStorage.getItem("cart"));
total = JSON.parse(localStorage.getItem("total"));
cart[index].qty = cart[index].qty + 1;
total = total + price;
localStorage.setItem("cart", JSON.stringify(cart));
localStorage.setItem("total", JSON.stringify(total))
updateCart();
}

function decrement(index, price, qty) {


cart = JSON.parse(localStorage.getItem("cart"));
total = JSON.parse(localStorage.getItem("total"));
if (cart[index].qty == 1) {
cart.splice(index, 1)
total = total - price;
localStorage.setItem("cart", JSON.stringify(cart));
localStorage.setItem("total", JSON.stringify(total))
updateCart();
}
else {
cart[index].qty = cart[index].qty - 1;
total = total - price;
localStorage.setItem("cart", JSON.stringify(cart));
localStorage.setItem("total", JSON.stringify(total))
updateCart();
}

</script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/
tWtIaxVXM"
crossorigin="anonymous"></script>
</body>

</html>

You might also like