quick-view initial
This commit is contained in:
parent
09ac27a062
commit
5dca498dd8
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue