|
DIR: /home/magicrsz/public_html /home/magicrsz/public_html/ |
| Current File : /home/magicrsz/public_html/product-detail.php |
<?php
include("header.php");
if(isset($_GET['id']))
{
$product_id=$_GET['id'];
$query = "SELECT * from product where id='$product_id'";
$product = db::getRecord($query);
}
else
{
$query="SELECT * from product limit 1";
$product=db::getRecord($query);
}
?>
<!--Page Header Start-->
<section class="page-header">
<div class="page-header-bg" style="background-image: url(assets/images/backgrounds/checkout.jpg)">
</div>
<div class="container">
<div class="page-header__inner">
<ul class="thm-breadcrumb list-unstyled">
<li><a href="index.php">Home</a></li>
<li><span>/</span></li>
<li>Shop</li>
</ul>
<h2>Product Details</h2>
</div>
</div>
</section>
<!--Page Header End-->
<style>
.my_col p{
color: #fff!important
}
.my_col ul li{
color: #fff!important
}
</style>
<?php
if($product!=NULL)
{
$id = $product['id'];
$query = "SELECT * from product_image where product_id='$id'";
$product_images = db::getRecords($query);
?>
<section class="organic-only">
<div class="organic-only__wrap">
<div class="organic-only__left">
<div class="organic-only__bg" style="background-image: url(<?php echo "admin/product/images/".$product['image_name']; ?>);"></div>
</div>
<div class="organic-only__right" style="min-height: 641px;">
<div class="organic-only__bg-shape float-bob-x">
<img src="assets/images/shapes/organic-only-bg-shape-1.png" alt="">
</div>
<div class="organic-only__icon">
<img src="assets/images/icon/organic-only-icon.png" alt="">
</div>
<div class="organic-only__content">
<div class="section-title text-left">
<span class="section-title__tagline">Ingredients & Nutritions</span>
<h2 class="section-title__title">Benefits</h2>
<div class="section-title__icon">
<img src="assets/images/icon/section-title-icon-1.png" alt="">
</div>
</div>
<div class="organic-only__text my_col">
<?php echo $product['benefit']; ?>
</div>
</div>
</div>
</div>
</section>
<!--Product Details Start-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
.card-wrapper{
max-width: 1100px;
margin: 0 auto;
}
img{
width: 100%;
display: block;
}
.img-display{
overflow: hidden;
}
.img-showcase{
display: flex;
width: 100%;
transition: all 0.5s ease;
}
.img-showcase img{
min-width: 100%;
}
.img-select{
display: flex;
}
.img-item{
margin: 0.3rem;
}
.img-item:nth-child(1),
.img-item:nth-child(2),
.img-item:nth-child(3){
margin-right: 0;
}
.img-item:hover{
opacity: 0.8;
}
.product-content{
padding: 2rem 1rem;
}
.product-title{
font-size: 3rem;
text-transform: capitalize;
font-weight: 700;
position: relative;
color: #12263a;
margin: 1rem 0;
}
.product-title::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 80px;
background: #12263a;
}
.product-link{
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 0.9rem;
display: inline-block;
margin-bottom: 0.5rem;
background: #256eff;
color: #fff;
padding: 0 0.3rem;
transition: all 0.5s ease;
}
.product-link:hover{
opacity: 0.9;
}
.product-rating{
color: #ffc107;
}
.product-rating span{
font-weight: 600;
color: #252525;
}
.product-price{
margin: 1rem 0;
font-size: 1rem;
font-weight: 700;
}
.product-price span{
font-weight: 400;
}
.last-price span{
color: #f64749;
text-decoration: line-through;
}
.new-price span{
color: #256eff;
}
.product-detail h2{
text-transform: capitalize;
color: #12263a;
padding-bottom: 0.6rem;
}
.product-detail p{
font-size: 0.9rem;
padding: 0.3rem;
opacity: 0.8;
}
.product-detail ul{
margin: 1rem 0;
font-size: 0.9rem;
}
.product-detail ul li{
margin: 0;
list-style: none;
background: url(https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/checked.png) left center no-repeat;
background-size: 18px;
padding-left: 1.7rem;
margin: 0.4rem 0;
font-weight: 600;
opacity: 0.9;
}
.product-detail ul li span{
font-weight: 400;
}
.purchase-info{
margin: 1.5rem 0;
}
.purchase-info input,
.purchase-info .btn{
border: 1.5px solid #ddd;
border-radius: 25px;
text-align: center;
padding: 0.45rem 0.8rem;
outline: 0;
margin-right: 0.2rem;
margin-bottom: 1rem;
}
.purchase-info input{
width: 60px;
}
.purchase-info .btn{
cursor: pointer;
color: #fff;
}
.purchase-info .btn:first-of-type{
background: #256eff;
}
.purchase-info .btn:last-of-type{
background: #f64749;
}
.purchase-info .btn:hover{
opacity: 0.9;
}
.social-links{
display: flex;
align-items: center;
}
.social-links a{
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: #000;
border: 1px solid #000;
margin: 0 0.2rem;
border-radius: 50%;
text-decoration: none;
font-size: 0.8rem;
transition: all 0.5s ease;
}
.social-links a:hover{
background: #000;
border-color: transparent;
color: #fff;
}
@media screen and (min-width: 992px){
.card-wrapper{
display: flex;
justify-content: center;
align-items: center;
}
.product-imgs{
display: flex;
flex-direction: column;
justify-content: center;
}
.product-content{
padding-top: 0;
}
}
</style>
<section class="product-details">
<div class="container">
<div class="row">
<div class="col-lg-6 col-xl-6">
<div class = "card-wrapper" id="hide_img" style="">
<div class = "card">
<!-- card left -->
<div class = "product-imgs">
<div class = "img-display">
<div class = "img-showcase">
<?php
if($product_images!=NULL)
{
foreach($product_images as $product_image)
{
?>
<img src = "<?php echo "admin/product/images/".$product_image['image_name']; ?>" alt = "shoe image" >
<?php
}
}
?>
</div>
</div>
</div>
<!-- card right -->
</div>
</div>
<div id="show_img">
</div>
</div>
<div class="col-lg-6 col-xl-6">
<div class="product-details__top">
<h3 class="product-details__title"><?php echo $product['name']; ?>
<?php
$product_id=$product['id'];
$query = "SELECT * from sizes where product_id='$product_id'";
$package_detail = db::getRecord($query);
if($package_detail!=NULL){
?>
<span><span class="ms-0" id="price_show"><?php echo $package_detail['price']; ?></span></span>
<input type="text" id="getprice" value="<?php echo $package_detail['price']; ?>" hidden>
<?php } ?> </h3>
</div>
<ul class="about-two__points list-unstyled d-none d-lg-flex">
<li>
<div class="about-two__icon">
<span class="fa fa-check"></span>
</div>
<div class="about-two__title">
<h3>Best Quality
<br> Standards</h3>
</div>
</li>
<li>
<div class="about-two__icon">
<span class="fa fa-check"></span>
</div>
<div class="about-two__title">
<h3>Natural Healthy
<br>Products</h3>
</div>
</li>
<li>
<div class="about-two__icon">
<span class="fa fa-check"></span>
</div>
<div class="about-two__title">
<h3>The Smart
<br> Choice</h3>
</div>
</li>
</ul>
<div class="product-details__content d-none d-lg-block">
<?php
$s_desc=$product['description'];
echo substr($s_desc,0,500);?>...
<a href="#read_more">read more</a>
</div>
<style>
.app-time {
border: 1px solid #fff;
padding: 20px 30px;
box-shadow: 2px 4px 10px 0px #c7cacce3;
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 5px;
right: 0;
bottom: 0;
left: 40px;
height: 20px;
width: 20px;
transition: all 0.15s ease-out 0s;
background: #fff;
border: 1px solid #999;
color: #fff;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
}
.option-input:hover {
background: #e5e7eb;
}
.option-input:checked {
border: 1px solid #fff;
}
.option-input:checked::before {
color: #d9486d;
height: 40px;
width: 40px;
position: absolute;
content: "✔";
display: inline-block;
font-size: 12px;
left: 4px;
line-height: 20px;
}
.option-input:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: #40e0d0;
content: "";
display: block;
position: relative;
z-index: 100;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
.app-check {
display: flex;
}
.app-border {
border: 1px solid #ece9e9;
border-radius: 7px;
min-height: 30px;
}
.option-input.radio:checked+.app-border {
background: #198754;
color: white;
}
.option-input.radio:disabled,
.option-input.radio:disabled+.app-border {
cursor: not-allowed;
opacity: 0.6;
}
.app-label {
position: relative;
top: 5px;
margin-right: 10px;
padding: 16px;
font-weight: 700;
}
@media screen and (max-width: 500px) {
.app-check {
display: flex;
flex-direction: column;
}
}
</style>
<?php
$query= "SELECT * from sizes where product_id='$id'";
$check_sizes= db::getRecords($query);
if($check_sizes!=NULL){
?>
<div class="row justify-content-center my-3">
<div class="col-12 col-md-12 col-xl-12">
<h4 class="mb-4">Choose Juice Size:</h4>
</div>
<?php
if($check_sizes!=NULL){
foreach($check_sizes as $check_size){
?>
<div class="col-12 col-md-4 col-xl-4 text-center">
<input type="radio" class="option-input radio" value="<?php echo $check_size['size']; ?>" name="your_radiobutton" hidden id="premium<?php echo $check_size['id']; ?>" <?php if($check_size['quantity'] == 0) { ?> disabled <?php } ?>/>
<div class="app-border mr-3 my-2 my-md-0" onclick="add_price(<?php echo $check_size['id']; ?>)">
<label for="premium<?php echo $check_size['id']; ?>" class="app-label "><?php echo $check_size['size']; ?><br><span><?php echo $check_size['price']; ?></span></label>
</div>
<?php if($check_size['quantity'] == 0) { ?>
<span style="color:#d9486d; font-weight:500; font-size:18px;">Out of stock</span>
<?php } ?>
</div>
<?php
}
}
?>
</div>
<?php
}
?>
<div class="product-details__quantity">
<h3 class="product-details__quantity-title">Choose Quantity</h3>
<div class="quantity-box">
<button type="button" class="sub"><i class="fa fa-minus"></i></button>
<input type="number" id="quantity" min="1" value="1" />
<button type="button" class="add"><i class="fa fa-plus"></i></button>
</div>
</div>
<style>
@media screen and (min-width: 320px) and (max-width: 425px) {
.fnt{
margin-bottom:20px;
}
}
</style>
<div class="product-details__buttons">
<div class="product-details__buttons-1">
<a id="product" onclick="call_product_ids(<?php echo $product['id']; ?>)" class="thm-btn fnt" style="padding-right: 50px;padding-top: 17px;margin-right: 20px;" href="#">Add to Cart</a>
<a href="checkout.php" class="thm-btn" style="padding-right: 50px;padding-top: 17px;" >Proceed To Checkout</a>
<a href="cart.php" class="thm-btn" style="padding-right: 50px;margin-top:10px;" >Go to Cart</a>
</div>
</div>
</div>
<div class="col-lg-10 col-xl-10">
<ul class="about-two__points list-unstyled d-block d-lg-none">
<li>
<div class="about-two__icon">
<span class="fa fa-check"></span>
</div>
<div class="about-two__title">
<h3>Best Quality
<br> Standards</h3>
</div>
</li>
<li>
<div class="about-two__icon">
<span class="fa fa-check"></span>
</div>
<div class="about-two__title">
<h3>Natural Healthy
<br>Products</h3>
</div>
</li>
<li>
<div class="about-two__icon">
<span class="fa fa-check"></span>
</div>
<div class="about-two__title">
<h3>Smart Oragnic
<br> Services</h3>
</div>
</li>
</ul>
<div id="read_more">
<?php echo $product['description']; ?>
</div>
</div>
</div>
</div>
</section>
<!--Product Details End-->
<?php
}
?>
<script>
const imgs = document.querySelectorAll('.img-select a');
const imgBtns = [...imgs];
let imgId = 1;
imgBtns.forEach((imgItem) => {
imgItem.addEventListener('click', (event) => {
event.preventDefault();
imgId = imgItem.dataset.id;
slideImage();
});
});
function slideImage(){
const displayWidth = document.querySelector('.img-showcase img:first-child').clientWidth;
document.querySelector('.img-showcase').style.transform = `translateX(${- (imgId - 1) * displayWidth}px)`;
}
window.addEventListener('resize', slideImage);
</script>
<?php
include("footer.php");
?>
<script>
function add_price(id) {
var id=id;
$.ajax({
url: "actions/size_price.php",
type: "POST",
data: {
'id': id,
},
success: function(response) {
$('#price_show').html(response);
$('#getprice').val(response);
},
});
$.ajax({
url: "actions/size_image.php",
type: "POST",
data: {
'id': id,
},
success: function(response) {
$('#show_img').html(response);
$('#hide_img').hide();
},
});
}
</script>
<script type="text/javascript">
function call_product_ids(id) {
var product_id = id;
var quantity = document.getElementById("quantity").value;
var size = $('input[name="your_radiobutton"]:checked').val();
if(size!=null){
var getprice = $('#getprice').val();
$.ajax({
url: "actions/add_product_id.php",
type: "POST",
data: {
'product_id': product_id,
'quantity' : quantity,
'size':size,
'getprice':getprice,
},
success: function(response)
{
$("#add_product_id").html(response);
if(response == "Product out of stock") {
swal({
title: response,
timer: 3000,
type:'warning',
showConfirmButton: true
});
}
else {
swal({
title: response,
timer: 3000,
type:'success',
showConfirmButton: true
});
}
},
});
}else{
swal({
title: "Please Select Size!",
timer: 3000,
type:'warning',
showConfirmButton: true
});
}
}
</script> |