I am working on an online store. Each product has QUICK VIEW link which popup the product detail in a popup window. But am finding it difficult to make the popup show the detail of the particular product clicked. Below are my codes.
Code: Select all
$get_items = mysqli_query($my_link, "SELECT * FROM $table ORDER BY id DESC);
while($row=mysqli_fetch_array($get_items)){
$id = stripslashes($row[id]);
$category = stripslashes($row[category]);
$type = stripslashes($row[type]);
$product = stripslashes($row[name]);
echo "<a href='detail.php?id=$id'>".$product."</a>";
echo $category
<a class="preview" href="#product-preview" data-toggle="modal" ></a>
}
/* I REPLACED
<a class="preview" href="#product-preview" data-toggle="modal" ></a>
WITH
<a class="preview" href="id=$id#product-preview" data-toggle="modal" ></a>
AND ALSO
<a class="preview" href="#product-preview&id=$id" data-toggle="modal" ></a>
BUT DIDN'T WORK
*/
Code: Select all
<?php
$id = $_GET[id];
$get = mysqli_query($my_link, "SELECT * from products WHERE id='$id'");
$row = mysqli_fetch_array($get);
$id = stripslashes($row[id]);
$category = stripslashes($row[category]);
$product = stripslashes($row[name]);
?>
<div class="modal fade" id="product-preview" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content space-40">
<a aria-hidden="true" data-dismiss="modal" class="sb-close-btn close fa fa-times" href="#"></a>
<!--<button aria-hidden="true" data-dismiss="modal" class="close sb-close-btn" type="button"><i class="fa fa-times"></i></button>-->
<!-- Single Products Start -->
<div class="clearfix"></div>
<section id="product-fullwidth" class="clearfix">
<div class="single-product-wrap">
<div class="list-category-details">
<div class="col-md-7 col-sm-7">
<!-- Main Slider Start -->
<section id="main-slider1" class="carousel slide main-slider">
<!--Carousel Slide Button Start-->
<div class="slider-pagination col-md-2 col-sm-3 col-xs-3">
<ul class="product-thumbnails">
<li data-slide-to="0" data-target="#main-slider1">
<a href="#"><img class="img-responsive" alt="img" src="assets/img/product/single-thumb1.png"></a></li>
<li class="active" data-slide-to="1" data-target="#main-slider1">
<a href="#"><img class="img-responsive" alt="img" src="assets/img/product/single-thumb2.png"></a></li>
<li data-slide-to="2" data-target="#main-slider1">
<a href="#"><img class="img-responsive" alt="img" src="assets/img/product/single-thumb3.png"></a></li>
<li data-slide-to="3" data-target="#main-slider1">
<a href="#"><img class="img-responsive" alt="img" src="assets/img/product/single-thumb4.png"></a></li>
</ul>
</div>
<div class="col-md-10 col-sm-9 col-xs-9">
<div class="carousel-inner product-fullwidth light-bg slider">
<div class="item">
<img src="assets/img/product/single-prod1.png" alt="...">
</div>
<div class="item active">
<img src="assets/img/product/single-prod1.png" alt="...">
</div>
<div class="item">
<img src="assets/img/product/single-prod1.png" alt="...">
</div>
<div class="item">
<img src="assets/img/product/single-prod1.png" alt="...">
</div>
</div>
</div>
</section>
<!-- / Main Slider Ends -->
</div>
<div class="col-md-5 col-sm-5">
<div class="product-content">
<div class="rating">
<span class="star active"></span>
<span class="star active"></span>
<span class="star active"></span>
<span class="star half"></span>
<span class="star"></span>
<div class="product-review">
<ul>
<li>03 Review </li>
<li> | <a href="#"> Add Your Review </a> </li>
</ul>
</div>
</div>
<div class="product-name">
<a href="#"><?php echo $product; ?></a>
</div>
<div class="product-price">
<h4 class="pink-btn-small price-line"> $50.00 </h4>
<h4 class="blue-btn-small"> $45.00 </h4>
</div>
<div class="product-availability">
<ul class="stock-detail">
<li>Available:<strong class="green-color"> <i class="fa fa-check-circle"></i> In Stock </strong> | </li>
<li>Product Id:<?php echo $_GET[pid]; ?><strong> #201546 </strong> </li>
</ul>
<hr class="fullwidth-divider">
</div>
<div class="product-size">
<form class="product-form">
<div class="row">
<div class="form-group selectpicker-wrapper">
<label>SIZE</label>
<select title="Looking to Buy" data-toggle="tooltip" data-width="100%" data-live-search="true" class="selectpicker input-price bs-select-hidden"><option class="bs-title-option" value="">2 - 4 Years</option>
<option>4 - 6 Years</option>
<option>6 - 8 Years</option>
<option>8 - 10 Years</option>
</select>
</div>
<div class="form-group selectpicker-wrapper">
<label>QTY</label>
<select title="Looking to Buy" data-toggle="tooltip" data-width="100%" data-live-search="true" class="selectpicker input-price bs-select-hidden"><option class="bs-title-option" value="">02</option>
<option>03</option>
<option>04</option>
<option>05</option>
</select>
</div>
</div>
</form>
<div class="widget-colors">
<span>Colors:</span>
<label class="rcheckbox-inline"><input type="checkbox" value="" id="brown"> <span></span></label>
<label class="rcheckbox-inline"><input type="checkbox" value="" id="light"> <span></span></label>
<label class="rcheckbox-inline"><input type="checkbox" value="" id="dark"> <span></span></label>
<label class="rcheckbox-inline"><input type="checkbox" value="" id="orange"> <span></span></label>
<label class="rcheckbox-inline"><input type="checkbox" value="" id="blue"> <span></span></label>
<label class="rcheckbox-inline"><input type="checkbox" value="" id="yellow"> <span></span></label>
<label class="rcheckbox-inline"><input type="checkbox" value="" id="green"> <span></span></label>
<label class="rcheckbox-inline"><input type="checkbox" value="" id="white"> <span></span></label>
</div>
<hr class="fullwidth-divider">
</div>
<div class="add-to-cart">
<a class="blue-btn btn" href="#"> <i class="fa fa-shopping-cart white-color"></i> Add to Cart</a>
<a class="pink-btn btn" href="product-single-fullwidth.html"> Go To Details </a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Single Products Ends -->
</div>
</div>
</div>