quick-view initial
This commit is contained in:
shubhammehrotra.symfony@webkul.com
parent
09ac27a062
commit
5dca498dd8
|
|
@ -1022,6 +1022,7 @@
|
|||
|
||||
#product-card-new .product-image-container {
|
||||
height: 220px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#product-card-new .product-image-container img {
|
||||
|
|
@ -1060,6 +1061,35 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.quick-view-btn-container {
|
||||
left: -12px;
|
||||
width: 100%;
|
||||
bottom: 10px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.quick-view-btn-container span {
|
||||
left: 32%;
|
||||
top: -26px;
|
||||
z-index: 1;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.quick-view-btn-container button {
|
||||
left: 30%;
|
||||
top: -36px;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px 7px 24px;
|
||||
position: absolute;
|
||||
opacity: 0.8;
|
||||
background-color: #0D2438;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
width: 100%;
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -2775,32 +2805,6 @@ header #search-form > *:focus {
|
|||
font: 18px "josefin sans", arial;
|
||||
}
|
||||
|
||||
.quick-view-btn-container {
|
||||
position: relative;
|
||||
margin: 48px 1px 0px -18px;
|
||||
}
|
||||
|
||||
.quick-view-btn-container span {
|
||||
left: 32%;
|
||||
top: -26px;
|
||||
z-index: 1;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.quick-view-btn-container button {
|
||||
left: 30%;
|
||||
top: -36px;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px 7px 24px;
|
||||
position: absolute;
|
||||
opacity: 0.8;
|
||||
background-color: #0D2438;
|
||||
}
|
||||
|
||||
body::after {
|
||||
/* dark overlay layer - visible when we fire .cd-quick-view */
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -210,6 +210,7 @@
|
|||
|
||||
.product-image-container {
|
||||
height: 220px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
@ -259,6 +260,41 @@
|
|||
}
|
||||
}
|
||||
|
||||
.quick-view-btn-container {
|
||||
left: -12px;
|
||||
width: 100%;
|
||||
bottom: 10px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
span {
|
||||
left: 32%;
|
||||
top: -26px;
|
||||
z-index: 1;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
button {
|
||||
left: 30%;
|
||||
top: -36px;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px 7px 24px;
|
||||
position: absolute;
|
||||
opacity: 0.8;
|
||||
background-color: #0D2438;
|
||||
}
|
||||
}
|
||||
|
||||
#product-card-new:hover {
|
||||
#quick-view-btn-container {
|
||||
// display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.quantity {
|
||||
@extend .btn-group;
|
||||
|
||||
|
|
|
|||
|
|
@ -614,39 +614,6 @@ header #search-form > *:focus {
|
|||
font: 18px "josefin sans", arial;
|
||||
}
|
||||
|
||||
.quick-view-btn-container {
|
||||
position: relative;
|
||||
margin: 48px 1px 0px -18px;
|
||||
|
||||
span {
|
||||
left: 32%;
|
||||
top: -26px;
|
||||
z-index: 1;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
button {
|
||||
left: 30%;
|
||||
top: -36px;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px 7px 24px;
|
||||
position: absolute;
|
||||
opacity: 0.8;
|
||||
background-color: #0D2438;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
body::after {
|
||||
/* dark overlay layer - visible when we fire .cd-quick-view */
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -6,13 +6,12 @@
|
|||
$productPrice = $product->getTypeInstance()->getProductPrices();
|
||||
$totalReviews = $product->reviews;
|
||||
$avgRatings = ceil($reviewHelper->getAverageRating($product));
|
||||
@endphp
|
||||
|
||||
<?php
|
||||
foreach ($totalReviews as $review) {
|
||||
$productReview = $review;
|
||||
}
|
||||
?>
|
||||
// @TODO
|
||||
// foreach ($totalReviews as $review) {
|
||||
// $productReview = $review;
|
||||
// }
|
||||
@endphp
|
||||
|
||||
<script type="text/x-template" id="quick-view-btn-template">
|
||||
|
||||
|
|
@ -57,7 +56,8 @@
|
|||
<h2 class="text-nowrap fw6">{{ $product->price }}</h2>
|
||||
</div>
|
||||
|
||||
@if ($totalReviews)
|
||||
{{-- @TODO --}}
|
||||
{{-- @if ($totalReviews)
|
||||
<div class="">
|
||||
{{ $productReview['rating'] }} Ratings
|
||||
</div>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<div class="">
|
||||
<a href="">{{ __('velocity::app.products.be-first-review') }}</a>
|
||||
</div>
|
||||
@endif
|
||||
@endif --}}
|
||||
|
||||
<p class="pt20">
|
||||
{!! $product->description !!}
|
||||
|
|
@ -103,20 +103,6 @@
|
|||
event.stopPropagation();
|
||||
}
|
||||
|
||||
// this.quickView
|
||||
|
||||
// .velocity({
|
||||
|
||||
// 'width': '734px',
|
||||
// 'left': '200px',
|
||||
// 'top': '50px',
|
||||
// }, 1000, [ 500, 20 ])
|
||||
|
||||
// .velocity({
|
||||
// 'width': '734px',
|
||||
// 'left': '200px',
|
||||
// }, 3000, 'ease');
|
||||
|
||||
this.quickViewDetails = true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,9 +67,9 @@
|
|||
src="{{ $productBaseImage['medium_image_url'] }}"
|
||||
class="card-img-top"
|
||||
alt="{{ $product->name }}">
|
||||
</a>
|
||||
|
||||
<quick-view-btn details="{{ $product }}"></quick-view-btn>
|
||||
<quick-view-btn details="{{ $product }}"></quick-view-btn>
|
||||
</a>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="product-name">
|
||||
|
|
|
|||
Loading…
Reference in New Issue