Hi Team
I have created some unique cart id for my cart-body, what is a problem now the cart is popup before the page refreshed or reload. Yet also while have second unique ID, its doing the same. How do i make each of these unique? So before page loads there are hiden and once clicked they view-details?
<div class="col-lg-4 col-md-6 col-sm-12 pb-1">
<div class="card product-item border-0 mb-4">
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<img class="img-fluid w-100" src="img/product-1.jpg" alt="">
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3">Colorful Stylish Shirt</h6>
<div class="d-flex justify-content-center">
<h6>R123.00</h6><h6 class="text-muted ml-2"><del>R123.00</del></h6>
</div>
</div>
<div class="card-footer d-flex justify-content-between bg-light border">
<a class="btn btn-sm text-dark p-0 view-details-btn">class="fas fa-eye text-primary mr-1">View Detail</a>
<a class="btn btn-sm text-dark p-0 add-to-cart-btn">^__i class="fas fa-shopping-cart text-primary mr-1">Add To Cart</a>
</div>
</div>
<!--View item details-->
<div class="card-popup-container">
<div class="card-popup" id="popup-0">
<button class="close-popup-btn">×</button>
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<img class="img-fluid w-100" src="img/product-1.jpg" alt="">
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3">Colorful Stylish Shirt</h6>
<div class="d-flex justify-content-center">
<h6>R123.00</h6><h6 class="text-muted ml-2"><del>R123.00</del></h6>
</div>
</div>
<div class="card-footer d-flex justify-content-between">
<a class="btn btn-primary add-to-cart-btn">Add to Cart</a>
<button class="close-popup-btn btn btn-secondary">Close</button>
</div>
</div>
</div>
<!---View details ends here-->
</div>
<div class="col-lg-4 col-md-6 col-sm-12 pb-1">
<div class="card product-item border-0 mb-4">
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<img class="img-fluid w-100" src="img/product-2.jpg" alt="">
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3">Colorful Stylish Shirt</h6>
<div class="d-flex justify-content-center">
<h6>R123.00</h6><h6 class="text-muted ml-2"><del>R123.00</del></h6>
</div>
</div>
<div class="card-footer d-flex justify-content-between bg-light border">
<a class="btn btn-sm text-dark p-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
<a class="btn btn-sm text-dark p-0"><i class="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
</div>
</div>
</div>
<!----View details starts here--->
<div class="card-popup-container">
<div class="card-popup" id="popup-1">
<button class="close-popup-btn">×</button>
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<img class="img-fluid w-100" src="img/product-2.jpg" alt="">
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3">Colorful Stylish Shirt</h6>
<div class="d-flex justify-content-center">
<h6>R123.00</h6><h6 class="text-muted ml-2"><del>R123.00</del></h6>
</div>
</div>
<div class="card-footer d-flex justify-content-between">
<a class="btn btn-primary add-to-cart-btn">Add to Cart</a>
<button class="close-popup-btn btn btn-secondary">Close</button>
</div>
</div>
</div>
<!--View details ends here-->
$(document).ready(function() {
$('.view-details-btn').click(function() {
var popupId = $(this).closest('.product-item').find('.card-popup').attr('id');
$('#' + popupId).show();
});
$('.add-to-cart-btn').click(function() {
var popupId = $(this).closest('.product-item').find('.card-popup').attr('id');
$('#' + popupId).find('.add-to-cart-btn').text('Added to Cart');
});
$('.close-popup-btn').click(function() {
var popupId = $(this).closest('.card-popup').attr('id');
$('#' + popupId).hide();
});
});