I need a help of solving my below issues:
I have generated dynamically cards with javascript and try to get the id when product is clicked.The results what i Have done are:
1)when click the first product it gets the wrong id,showing the details of the last product
2)the event listener works only for the first element so i can’t show the other product.
product-list.js
let cardData = [
{
id: 1,
imgFile: 'images/products/marievi5.jpg',
heading: 'Marievi the Influencer',
body: 'this is card body',
price: 150,
},
{
id: 2,
imgFile: 'images/products/rock1.jpg',
heading: 'card 2',
body: 'this is card body',
price: 200,
},
{
id: 3,
imgFile: 'images/products/marievi5.jpg',
heading: 'card 3',
body: 'this is card body',
price: 400,
},
{
id: 4,
imgFile: 'images/products/marievi5.jpg',
heading: 'card 4',
body: 'this is card body',
price: 300,
},
];
const createCard = () => {
let cardContainer = document.querySelector('.card-container');
cardContainer.innerHTML = ''; // Clear the grid first
cardData.forEach((data) => {
//create product card
let card = document.createElement('div');
card.classList.add('card-body');
card.setAttribute('data-product-id', data.id);
// Add content inside the product card
let content = `<div class="card-container py-5">
<div class="row ">
<div class="col">
<div class="listProduct">
<div class="card-body product-card" data-product-id="${data.id}">
<img class="card-img-top " id="productImg" src="${data.imgFile}" alt="Card image cap">
<div class=" product-details" id="details-${data.id}">
<h5 class="card-title mb-3 fw-bold ">${data.heading}</h5>
<p class="card-text text-muted mb-4">${data.body}</p>
<div class="d-flex justify-content-between align-items-center">
<span class="product-price">Price:${data.price}</span>
</div>
<button class="btn btn-custom text-white px-4 py-2 rounded-pill" data-product-id="${data.id}"btn btn-primary">View Details</button>
</div>
</div>
</div>
</div>
</div>
</div>`;
cardContainer.innerHTML += content;
document.querySelector('.listProduct').addEventListener('click',function(){
let productId = data.id; // This should not be undefined
console.log(productId);
window.location.href = `ProductDetails1.html?id=${productId}`;
});
return card;
})
}
// Call the function to generate products on page load
createCard(cardData);
ProductDetails.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product Details</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1.0">
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/ce111f8d46.js" crossorigin="anonymous"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="mystyle.css">
<link rel="stylesheet" href="ProductDetails.css">
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function () {
$("#nav-placeholder").load("nav.html");
});
</script>
<div class="container my-5 pt-5">
<div class=" row mt-5">
<div class="col-sm-8 d-flex flex-column d-inline-flex p-2 bd-highlight justify-content-around ">
<div class="detail">
<figure class="ProductItem-gallery">
<div class="image1">
<img src="" alt="">
</div>
</figure>
<div class="col">
<div class="content">
<h1 class="name"></h1>
<p class="price"></p>
<p class="description"></p>
<button class="btn btn-primary">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
let products = null;
fetch('./products.json')
.then(response => response.json())
.then(data => {
products = data;
showDetail();
})
//find this product
function showDetail() {
let detail = document.querySelector('.detail');
let productId = new URLSearchParams(window.location.search).get('id');
console.log("product id "+productId);
let thisProduct = products.filter(value => {
return value.id == productId
})[0];
//if there is no product has id =productId
//=>return to home page
if (!thisProduct) {
window.location.href = "/shoplist.html";
}
//and if has,add data this product in html
detail.querySelector('.image1 img').src = thisProduct.imgFile;
detail.querySelector('.name').innerText = thisProduct.heading;
detail.querySelector('.price').innerText = '$' + thisProduct.price;
detail.querySelector('.description').innerText = thisProduct.body;
}
</script>
</body>
</html>
shoplist.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>ShopList</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1.0">
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/ce111f8d46.js" crossorigin="anonymous"></script>
<!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
<link rel="stylesheet" href="shopstyle.css">
<link rel="stylesheet" href="mystyle.css">
<script src="//code.jquery.com/jquery.min.js"></script>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function () {
$("#nav-placeholder").load("nav.html");
});
</script>
<h1 class="heading-top-op text-center">Original Paintings</h1>
<div class="card-container">
<div class="listProduct"></div>
</div>
<script src="product-list.js" defer>
</script>
<script>
let products = null;
fetch('./products.json')
.then(response => response.json())
.then(data => {
products = data;
console.log(products);
addDataToHTML();
})
let listProduct = document.querySelector('.listProduct');
function addDataToHTML() {
products.forEach(product => {
//create new element item
let newProduct = document.createElement('a');
newProduct.setAttribute("id", "clicktag");
newProduct.href = '/ProductDetails1.html?id=' + product.id;
newProduct.classList.add('item');
newProduct.innerHTML = `
<img src="${product.imgFile}"/>;
<h2>${product.heading}</h2>;
<p class="price">${product.price}</p>`;
//add this element in listProduct class
listProduct.appendChild(newProduct);
})
// end - of for
}
// end of fuction addDataToHtML
</script>
</body>
<!--footer -->
<div id="footer-placeholder">
</div>
<script>
$(function () {
$("#footer-placeholder").load("footer.html");
});
</script>
</html>
