Server : ApacheSystem : Linux host44.registrar-servers.com 4.18.0-513.18.1.lve.2.el8.x86_64 #1 SMP Sat Mar 30 15:36:11 UTC 2024 x86_64 User : vapecompany ( 2719) PHP Version : 7.4.33 Disable Function : NONE Directory : /home/vapecompany/demo.vapecompany.com.bd/resources/views/frontend/pages/ |
Upload File : |
@extends('frontend.layouts.app')
@section('css')
<link rel="stylesheet" type="text/css" href="{{url('public/frontend/plugins/slick-1.8.0/slick.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/frontend/styles/product_styles.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/frontend/styles/product_responsive.css')}}">
@endsection
@section('content')
<!-- Single Product -->
<div class="single_product">
<div class="container">
<div class="row">
<!-- Images -->
<div class="col-lg-2 order-lg-1 order-2">
<ul class="image_list">
<li data-image="images/single_4.jpg"><img src="{{url('public/images/product/'.$product->product_image)}}" alt=""></li>
</ul>
</div>
<!-- Selected Image -->
<div class="col-lg-5 order-lg-2 order-1">
<div class="image_selected"><img src="{{url('public/images/product/'.$product->product_image)}}" alt=""></div>
</div>
<!-- Description -->
<div class="col-lg-5 order-3">
<div class="product_description">
<div class="product_category">{{$product->category->category_name}}</div>
<div class="product_name">{{$product->product_name}}</div>
<div class="rating_r rating_r_4 product_rating"><i></i><i></i><i></i><i></i><i></i></div>
<div class="product_text">
{!! $product->short_description !!}
</div>
<div class="order_info d-flex flex-row">
<form action="#">
<div class="clearfix" style="z-index: 1000;">
<!-- Product Quantity -->
<div class="product_quantity clearfix">
<span>Quantity: </span>
<input id="quantity_input" type="text" pattern="[0-9]*" value="1">
<div class="quantity_buttons">
<div id="quantity_inc_button" class="quantity_inc quantity_control"><i class="fas fa-chevron-up"></i></div>
<div id="quantity_dec_button" class="quantity_dec quantity_control"><i class="fas fa-chevron-down"></i></div>
</div>
</div>
<!-- Product Color -->
{{-- <ul class="product_color">
<li>
<span>Color: </span>
<div class="color_mark_container"><div id="selected_color" class="color_mark"></div></div>
<div class="color_dropdown_button"><i class="fas fa-chevron-down"></i></div>
<ul class="color_list">
<li><div class="color_mark" style="background: #999999;"></div></li>
<li><div class="color_mark" style="background: #b19c83;"></div></li>
<li><div class="color_mark" style="background: #000000;"></div></li>
</ul>
</li>
</ul> --}}
</div>
<div class="product_price">$2000</div>
<input type="hidden" name="" id="product_id" value="{{ $product->product_id }}">
<div class="button_container">
<button type="button" id="addTocartBtn" class="button cart_button">Add to Cart</button>
<div class="product_fav">
<a href="{{url('add_wishlist/'.$product->product_id)}}">
<i class="fas fa-heart"></i>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Description & Review -->
<div class="container" style="margin-bottom: 50px;">
<!-- Classic tabs -->
<div class="classic-tabs border rounded px-4 pt-1">
<ul class="nav tabs-primary nav-justified" id="advancedTab" role="tablist">
<li class="nav-item">
<a class="nav-link active show" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">Description</a>
</li>
<li class="nav-item">
<a class="nav-link" id="info-tab" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-selected="false">Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="reviews-tab" data-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false">Reviews (1)</a>
</li>
</ul>
<div class="tab-content" id="advancedTabContent">
<div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
<h5>Product Description</h5>
{!! $product->description !!}
</div>
<div class="tab-pane fade" id="info" role="tabpanel" aria-labelledby="info-tab">
<h5>Additional Information</h5>
<table class="table table-striped table-bordered mt-3">
<thead>
<tr>
<th scope="row" class="w-150 dark-grey-text h6">Weight</th>
<td><em>0.3 kg</em></td>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="w-150 dark-grey-text h6">Dimensions</th>
<td><em>50 × 60 cm</em></td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
<h5><span>1</span> review for <span>Fantasy T-shirt</span></h5>
<div class="media mt-3 mb-4">
<img class="d-flex mr-3 z-depth-1" src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" width="62" alt="Generic placeholder image">
<div class="media-body">
<div class="d-sm-flex justify-content-between">
<p class="mt-1 mb-2">
<strong>Marthasteward </strong>
<span>– </span><span>January 28, 2020</span>
</p>
<ul class="rating mb-sm-0">
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-primary"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary"></i>
</li>
</ul>
</div>
<p class="mb-0">Nice one, love it!</p>
</div>
</div>
<hr>
<h5 class="mt-4">Add a review</h5>
<p>Your email address will not be published.</p>
<div class="my-3">
<ul class="rating mb-0">
<li>
<a href="#!">
<i class="fas fa-star fa-sm text-primary"></i>
</a>
</li>
<li>
<a href="#!">
<i class="fas fa-star fa-sm text-primary"></i>
</a>
</li>
<li>
<a href="#!">
<i class="fas fa-star fa-sm text-primary"></i>
</a>
</li>
<li>
<a href="#!">
<i class="fas fa-star fa-sm text-primary"></i>
</a>
</li>
<li>
<a href="#!">
<i class="far fa-star fa-sm text-primary"></i>
</a>
</li>
</ul>
</div>
<div>
<!-- Your review -->
<div class="md-form md-outline">
<textarea id="form76" class="md-textarea form-control pr-6" rows="4"></textarea>
<label for="form76">Your review</label>
</div>
<!-- Name -->
<div class="md-form md-outline">
<input type="text" id="form75" class="form-control pr-6">
<label for="form75">Name</label>
</div>
<!-- Email -->
<div class="md-form md-outline">
<input type="email" id="form77" class="form-control pr-6">
<label for="form77">Email</label>
</div>
<div class="text-right pb-2">
<button type="button" class="btn btn-primary">Add a review</button>
</div>
</div>
</div>
</div>
</div>
<!-- Classic tabs -->
</div>
<!-- Description & Review -->
<!-- Recently Viewed -->
<div class="viewed">
<div class="container">
<div class="row">
<div class="col">
<div class="viewed_title_container">
<h3 class="viewed_title">Recently Viewed</h3>
<div class="viewed_nav_container">
<div class="viewed_nav viewed_prev"><i class="fas fa-chevron-left"></i></div>
<div class="viewed_nav viewed_next"><i class="fas fa-chevron-right"></i></div>
</div>
</div>
<div class="viewed_slider_container">
<!-- Recently Viewed Slider -->
<div class="owl-carousel owl-theme viewed_slider">
<!-- Recently Viewed Item -->
<div class="owl-item">
<div class="viewed_item discount d-flex flex-column align-items-center justify-content-center text-center">
<div class="viewed_image"><img src="images/view_1.jpg" alt=""></div>
<div class="viewed_content text-center">
<div class="viewed_price">$225<span>$300</span></div>
<div class="viewed_name"><a href="#">Beoplay H7</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
<!-- Recently Viewed Item -->
<div class="owl-item">
<div class="viewed_item d-flex flex-column align-items-center justify-content-center text-center">
<div class="viewed_image"><img src="images/view_2.jpg" alt=""></div>
<div class="viewed_content text-center">
<div class="viewed_price">$379</div>
<div class="viewed_name"><a href="#">LUNA Smartphone</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
<!-- Recently Viewed Item -->
<div class="owl-item">
<div class="viewed_item d-flex flex-column align-items-center justify-content-center text-center">
<div class="viewed_image"><img src="images/view_3.jpg" alt=""></div>
<div class="viewed_content text-center">
<div class="viewed_price">$225</div>
<div class="viewed_name"><a href="#">Samsung J730F...</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
<!-- Recently Viewed Item -->
<div class="owl-item">
<div class="viewed_item is_new d-flex flex-column align-items-center justify-content-center text-center">
<div class="viewed_image"><img src="images/view_4.jpg" alt=""></div>
<div class="viewed_content text-center">
<div class="viewed_price">$379</div>
<div class="viewed_name"><a href="#">Huawei MediaPad...</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
<!-- Recently Viewed Item -->
<div class="owl-item">
<div class="viewed_item discount d-flex flex-column align-items-center justify-content-center text-center">
<div class="viewed_image"><img src="images/view_5.jpg" alt=""></div>
<div class="viewed_content text-center">
<div class="viewed_price">$225<span>$300</span></div>
<div class="viewed_name"><a href="#">Sony PS4 Slim</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
<!-- Recently Viewed Item -->
<div class="owl-item">
<div class="viewed_item d-flex flex-column align-items-center justify-content-center text-center">
<div class="viewed_image"><img src="images/view_6.jpg" alt=""></div>
<div class="viewed_content text-center">
<div class="viewed_price">$375</div>
<div class="viewed_name"><a href="#">Speedlink...</a></div>
</div>
<ul class="item_marks">
<li class="item_mark item_discount">-25%</li>
<li class="item_mark item_new">new</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('js')
<script src="{{url('public/frontend/plugins/easing/easing.js')}}"></script>
<script src="{{url('public/frontend/js/product_custom.js')}}"></script>
<script>
$('#quantity_inc_button').click(function(){
var input_value = $('#quantity_input').val();
var inc_value = parseInt(input_value) + 1;
$('#quantity_input').val(inc_value);
});
$('#quantity_dec_button').click(function(){
var input_value = $('#quantity_input').val();
var inc_value = parseInt(input_value) - 1;
if(inc_value < 0){
$('#quantity_input').val(0);
}else{
$('#quantity_input').val(inc_value);
}
});
$('#addTocartBtn').click(function (e) {
e.preventDefault();
var id = $('#product_id').val();
var qty = $('#quantity_input').val();
addToCart(id, qty);
});
function addToCart(id, qty){
$.ajax({
type: "POST",
url: "{{ route('add.to.cart') }}",
data: {
qty : qty,
id : id,
},
dataType: "json",
success: function (response) {
window.location.reload();
Swal.fire({
toast: true,
position: 'top-end',
icon: 'success',
title: 'Product Added To Cart',
showConfirmButton: false,
timer: 3000
})
},
error: function (error) {
Swal.fire({
toast: true,
position: 'top-end',
icon: 'error',
title: 'Product Added To Cart Faield',
showConfirmButton: false,
timer: 3000
})
}
});
}
</script>
@endsection