I am coding a website for a school project and decided to add a merchandise page. I wanted to include a product view so that people can see more details (like a description) when they click on a product.
I initially used this idea from a CodePen I found and it works really well but the only problem is it brings up the same lightbox no matter what product you click on. I want a design that is product specific. I tried simply adding more light boxes but it didn't change anything. I think this has something to do with the Javascript but I am not sure as I have not learned the basics of that language yet.
Here is the HTML:
<body>
<div class="lightbox-blanket">
<div class="pop-up-container">
<div class="pop-up-container-vertical">
<div class="pop-up-wrapper">
<div class="go-back" onclick="GoBack();"><i class="fa fa-arrow-left"></i>
</div>
<div class="product-details">
<div class="product-left">
<div class="product-info">
<div class="product-manufacturer">NOOK
</div>
<div class="product-title">
LOUNGE CHAIR
</div>
<div class="product-price" price-data="320.03">
$320<span class="product-price-cents">03</span>
</div>
</div>
<div class="product-image">
<img src="https://via.placeholder.com/300" />
</div>
</div>
<div class="product-right">
<div class="product-description">
Designer Karim Rashid continues to put his signature spin on all genres of design through various collaborations with top-notch companies. Another one to add to the win column is his work with Italian manufacturer Chateau d’Ax.
</div>
<div class="product-available">
In stock. <span class="product-extended"><a href="#">Buy Extended Warranty</a></span>
</div>
<div class="product-rating">
<i class="fa fa-star rating" star-data="1"></i>
<i class="fa fa-star rating" star-data="2"></i>
<i class="fa fa-star rating" star-data="3"></i>
<i class="fa fa-star" star-data="4"></i>
<i class="fa fa-star" star-data="5"></i>
<div class="product-rating-details">(3.1 - <span class="rating-count">1203</span> reviews)
</div>
</div>
<div class="product-quantity">
<label for="product-quantity-input" class="product-quantity-label">Quantity</label>
<div class="product-quantity-subtract">
<i class="fa fa-chevron-left"></i>
</div>
<div>
<input type="text" id="product-quantity-input" placeholder="0" value="0" />
</div>
<div class="product-quantity-add">
<i class="fa fa-chevron-right"></i>
</div>
</div>
</div>
<div class="product-bottom">
<div class="product-checkout">
Total Price
<div class="product-checkout-total">
<i class="fa fa-usd"></i>
<div class="product-checkout-total-amount">
0.00
</div>
</div>
</div>
<div class="product-checkout-actions">
<a class="add-to-cart" href="#" onclick="AddToCart(event);">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="random-background">
<div class="itemlist">
<div class="itemlist-item-wrapper" onclick="OpenProduct(1);">
<div class="product-details">
<div class="">
<div class="product-info">
<div class="product-title" item-data="1">
LOUNGE CHAIR
</div>
<div class="product-price" price-data="320.03" item-data="1">
$320<span class="product-price-cents">03</span>
</div>
</div>
<div class="product-image" item-data="1">
<img src="https://via.placeholder.com/300" />
</div>
</div>
</div>
</div>
<div class="itemlist-item-wrapper" onclick="OpenProduct(2);">
<div class="product-details">
<div class="">
<div class="product-info">
<div class="product-title" item-data="2">
LOUNGE CHAIR
</div>
<div class="product-price" price-data="320.03" item-data="2">
$320<span class="product-price-cents">03</span>
</div>
</div>
<div class="product-image" item-data="2">
<img src="https://via.placeholder.com/300" />
</div>
</div>
</div>
</div>
<div class="itemlist-item-wrapper" onclick="OpenProduct(3);">
<div class="product-details">
<div class="">
<div class="product-info">
<div class="product-title" item-data="3">
LOUNGE CHAIR
</div>
<div class="product-price" price-data="320.03" item-data="3">
$320<span class="product-price-cents">03</span>
</div>
</div>
<div class="product-image" item-data="3">
<img src="https://via.placeholder.com/300" />
</div>
</div>
</div>
</div>
<div class="itemlist-item-wrapper" onclick="OpenProduct(4);">
<div class="product-details">
<div class="">
<div class="product-info">
<div class="product-title" item-data="4">
LOUNGE CHAIR
</div>
<div class="product-price" price-data="320.03" item-data="4">
$320<span class="product-price-cents">03</span>
</div>
</div>
<div class="product-image" item-data="4">
<img src="https://via.placeholder.com/300" />
</div>
</div>
</div>
</div>
<div class="itemlist-item-wrapper" onclick="OpenProduct(5);">
<div class="product-details">
<div class="">
<div class="product-info">
<div class="product-title" item-data="5">
LOUNGE CHAIR
</div>
<div class="product-price" price-data="169.49" item-data="5">
$<span class="product-price-dollar">169</span><span class="product-price-cents">49</span>
</div>
</div>
<div class="product-image" item-data="5">
<img src="https://via.placeholder.com/300" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
And Javascript:
//Go Back
function OpenProduct(i){
var i = $('.product-image[item-data="'+i+'"] img');
var lbi = $('.lightbox-blanket .product-image img');
console.log($(i).attr("src"));
$(lbi).attr("src", $(i).attr("src"));
$(".lightbox-blanket").toggle();
$("#product-quantity-input").val("0");
CalcPrice (0);
}
function GoBack(){
$(".lightbox-blanket").toggle();
}
//Calculate new total when the quantity changes.
function CalcPrice (qty){
var price = $(".product-price").attr("price-data");
var total = parseFloat((price * qty)).toFixed(2);
$(".product-checkout-total-amount").text(total);
}
//Reduce quantity by 1 if clicked
$(document).on("click", ".product-quantity-subtract", function(e){
var value = $("#product-quantity-input").val();
//console.log(value);
var newValue = parseInt(value) - 1;
if(newValue < 0) newValue=0;
$("#product-quantity-input").val(newValue);
CalcPrice(newValue);
});
//Increase quantity by 1 if clicked
$(document).on("click", ".product-quantity-add", function(e){
var value = $("#product-quantity-input").val();
//console.log(value);
var newValue = parseInt(value) + 1;
$("#product-quantity-input").val(newValue);
CalcPrice(newValue);
});
$(document).on("blur", "#product-quantity-input", function(e){
var value = $("#product-quantity-input").val();
//console.log(value);
CalcPrice(value);
});
function AddToCart(e){
e.preventDefault();
var qty = $("#product-quantity-input").val();
if(qty === '0'){return;}
var toast = '<div class="toast toast-success">Added '+ qty +' to cart.</div>';
$("body").append(toast);
setTimeout(function(){
$(".toast").addClass("toast-transition");
}, 100);
setTimeout(function(){
$(".toast").remove();
}, 3500);
}