I am working on clothing shopping website where on main page of my website has different clothing displayed. on every cloth there is add to cart button that opens popup modal on click but i am facing a problem that modal popup only display first dress details on every dress modal popup means it is displaying only first dress price and quantity on all buttons. here is the code:
<button class="update fa fa-shopping-cart " id="mpopupLink1" onclick="openModal2()" title="Add to Cart" type="image" style=" margin-top: 90px; margin-left:110px; width: 35px; height: 35px; background: white; " /></button>
// here is starting modal popup
<div id="mpopupBox1" class="mpopup1">
<!-- mPopup content -->
<div class="mpopup1-content">
<div class="mpopup1-head">
<span class="close8">×</span>
<h2 style="font-family:Cooper Black;"><center>Add to Cart</center></h2>
</div>
<div class="mpopup1-main" >
<br/>
<br/>
<p><b>Product Code: <?php echo $row['id']; ?></b></p>
<div style="margin: 30px 40px 40px 250px;">
<p id="demo"><font size="6" ><b>PKR</b></font>
<input name="price" type="number" id="price" value="<?php echo $row['price']; ?>" readonly> </font> <br/>
</p>
</div>
<div style="margin: -75px 60px 40px 0px;" >
<label><font size="4">Quantity</font></label>
</div>
<input style="margin-left: 335px; margin-top: -40px; width: 135px;" type="submit" name="add_to_cart" class="button button4 add-to-cart" value="Add to Cart">
</div>
<div class="mpopup1-foot">
<!-- <p>created by CodexWorld</p> -->
</div>
</div>
</div>
// here is javascript function
<script type="text/javascript">
var mpopup1 = document.getElementById('mpopupBox1');
// get the link that opens the mPopup
var mpLink1 = document.getElementById("mpopupLink1");
// get the close action element
var close8 = document.getElementsByClassName("close8")[0];
// open the mPopup once the link is clicked
mpLink1.onclick = function() {
mpopup1.style.display = "block";
}
var images1 = document.querySelectorAll('button[title="Add to Cart"]');
for(var i=0, len = images1.length; i < len; i++){
images1[i].addEventListener('click', openModal2);
}
function openModal2() {
mpopup1.style.display = "block";
}
// close the mPopup once close element is clicked
close8.onclick = function() {
mpopup1.style.display = "none";
}
// close the mPopup when user clicks outside of the box
</script>
You have to bind your product details to the button(input type image) as custom attributes. When the button is clicked, it will fetch the data attributes of that button.
Here's a working example below:
// your dynamic popup box
var mpopup1 = document.getElementById('mpopupBox1');
// popup box close button
var close8 = document.getElementsByClassName("close8")[0];
// open modal and update content
function openModal2(item) {
var image = item.getAttribute('data-image');
var price = item.getAttribute('data-price');
var code = item.getAttribute('data-code');
document.getElementById('price').value = price;
document.getElementById('image').src = image;
document.getElementById('code').innerHTML = code;
mpopup1.style.display = "block";
}
// close the mPopup once close element is clicked
close8.onclick = function() {
mpopup1.style.display = "none";
}<input class="update fa fa-shopping-cart" id="mpopupLink1" onclick="openModal2(this)" title="Add to Cart" type="image" style="margin-top: 90px; margin-left:110px; width: 35px; height: 35px; border: 1px solid" data-image="https://gloimg.gamcdn.com/G/pdm-product-pic/Clothing/2016/10/15/source-img/20161015092246_60853.jpg"
data-code="1122333" data-price="100" src="https://cdn4.iconfinder.com/data/icons/dress-2/60/long_dress_1-256.png" />
<input class="update fa fa-shopping-cart " id="mpopupLink1" onclick="openModal2(this)" title="Add to Cart" type="image" style=" margin-top: 90px; margin-left:110px; width: 35px; height: 35px; border: 1px solid" data-image="https://s-media-cache-ak0.pinimg.com/736x/58/bf/0c/58bf0c2eff5c91d5908480de69072e89--dresses-on-sale-a-line-dresses.jpg"
data-price="200" data-code="445566" src="https://images.vexels.com/media/users/3/131762/isolated/lists/f8bc76e174b4c43d78c962f7e6f06f07-pink-women-s-cloth.png" />
<div id="mpopupBox1" class="mpopup1" style="display:none">
<!-- mPopup content -->
<div class="mpopup1-content">
<div class="mpopup1-head">
<span class="close8">×</span>
<h2 style="font-family:Cooper Black;">
<center>Add to Cart</center>
</h2>
</div>
<div class="mpopup1-main">
<figure>
<img src="" alt="The Pulpit Rock" width="304" height="228" id="image">
</figure>
<br/>
<br/>
<p><b>Product Code: <span id="code"></span></b></p>
<div style="margin: 30px 40px 40px 250px;">
<p id="demo">
<font size="6"><b>PKR</b></font>
<input name="price" type="number" id="price" value="5000" readonly> </font> <br/>
</p>
</div>
<div style="margin: -75px 60px 40px 0px;">
<label><font size="4">Quantity</font></label>
</div>
<input style="margin-left: 335px; margin-top: -40px; width: 135px;" type="submit" name="add_to_cart" class="button button4 add-to-cart" value="Add to Cart">
</div>
<div class="mpopup1-foot">
<!-- <p>created by CodexWorld</p> -->
</div>
</div>
</div></div>