quick-view initial

This commit is contained in:
shubhammehrotra.symfony@webkul.com 2020-01-07 12:51:27 +05:30
parent 09ac27a062
commit 5dca498dd8
5 changed files with 76 additions and 83 deletions

View File

@ -1022,6 +1022,7 @@
#product-card-new .product-image-container { #product-card-new .product-image-container {
height: 220px; height: 220px;
position: relative;
} }
#product-card-new .product-image-container img { #product-card-new .product-image-container img {
@ -1060,6 +1061,35 @@
vertical-align: middle; 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 { .quantity {
width: 100%; width: 100%;
padding-bottom: 10px; padding-bottom: 10px;
@ -2775,32 +2805,6 @@ header #search-form > *:focus {
font: 18px "josefin sans", arial; 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 { body::after {
/* dark overlay layer - visible when we fire .cd-quick-view */ /* dark overlay layer - visible when we fire .cd-quick-view */
position: fixed; position: fixed;

View File

@ -210,6 +210,7 @@
.product-image-container { .product-image-container {
height: 220px; height: 220px;
position: relative;
img { img {
width: 100%; 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 { .quantity {
@extend .btn-group; @extend .btn-group;

View File

@ -614,39 +614,6 @@ header #search-form > *:focus {
font: 18px "josefin sans", arial; 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 { body::after {
/* dark overlay layer - visible when we fire .cd-quick-view */ /* dark overlay layer - visible when we fire .cd-quick-view */
position: fixed; position: fixed;

View File

@ -6,13 +6,12 @@
$productPrice = $product->getTypeInstance()->getProductPrices(); $productPrice = $product->getTypeInstance()->getProductPrices();
$totalReviews = $product->reviews; $totalReviews = $product->reviews;
$avgRatings = ceil($reviewHelper->getAverageRating($product)); $avgRatings = ceil($reviewHelper->getAverageRating($product));
@endphp
<?php // @TODO
foreach ($totalReviews as $review) { // foreach ($totalReviews as $review) {
$productReview = $review; // $productReview = $review;
} // }
?> @endphp
<script type="text/x-template" id="quick-view-btn-template"> <script type="text/x-template" id="quick-view-btn-template">
@ -57,7 +56,8 @@
<h2 class="text-nowrap fw6">{{ $product->price }}</h2> <h2 class="text-nowrap fw6">{{ $product->price }}</h2>
</div> </div>
@if ($totalReviews) {{-- @TODO --}}
{{-- @if ($totalReviews)
<div class=""> <div class="">
{{ $productReview['rating'] }} Ratings {{ $productReview['rating'] }} Ratings
</div> </div>
@ -65,7 +65,7 @@
<div class=""> <div class="">
<a href="">{{ __('velocity::app.products.be-first-review') }}</a> <a href="">{{ __('velocity::app.products.be-first-review') }}</a>
</div> </div>
@endif @endif --}}
<p class="pt20"> <p class="pt20">
{!! $product->description !!} {!! $product->description !!}
@ -103,20 +103,6 @@
event.stopPropagation(); event.stopPropagation();
} }
// this.quickView
// .velocity({
// 'width': '734px',
// 'left': '200px',
// 'top': '50px',
// }, 1000, [ 500, 20 ])
// .velocity({
// 'width': '734px',
// 'left': '200px',
// }, 3000, 'ease');
this.quickViewDetails = true; this.quickViewDetails = true;
} }
} }

View File

@ -67,9 +67,9 @@
src="{{ $productBaseImage['medium_image_url'] }}" src="{{ $productBaseImage['medium_image_url'] }}"
class="card-img-top" class="card-img-top"
alt="{{ $product->name }}"> 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="card-body">
<div class="product-name"> <div class="product-name">