From b667070571fc7b96c995e59a90f6037cf3100335 Mon Sep 17 00:00:00 2001 From: prateek srivastava Date: Sat, 4 Jan 2020 20:23:23 +0530 Subject: [PATCH 1/2] WIP quick view --- .../assets/sass/components/home.scss | 8 ++- .../views/UI/product-quick-view.blade.php | 56 ++++++++++++------- .../views/products/list/card.blade.php | 4 +- 3 files changed, 44 insertions(+), 24 deletions(-) diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss index a94719122..8ddc2a84e 100644 --- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss +++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss @@ -578,13 +578,13 @@ header #search-form > *:focus { } .quick-view-btn-container { - display: none; position: relative; + margin: 48px 1px 0px -18px; span { left: 32%; top: -26px; - z-index: 1000; + z-index: 1; font-size: 16px; color: #FFFFFF; position: absolute; @@ -598,6 +598,7 @@ header #search-form > *:focus { font-size: 16px; padding: 5px 10px 7px 24px; position: absolute; + opacity: 0.8; background-color: #0D2438; } } @@ -678,3 +679,6 @@ body::after { padding: 0px !important; } +.demo { + border: 1px solid red; +} \ No newline at end of file diff --git a/packages/Webkul/Velocity/src/Resources/views/UI/product-quick-view.blade.php b/packages/Webkul/Velocity/src/Resources/views/UI/product-quick-view.blade.php index 1b24ae3e8..58534a1af 100644 --- a/packages/Webkul/Velocity/src/Resources/views/UI/product-quick-view.blade.php +++ b/packages/Webkul/Velocity/src/Resources/views/UI/product-quick-view.blade.php @@ -1,26 +1,34 @@ @inject ('productImageHelper', 'Webkul\Product\Helpers\ProductImage') +@inject ('reviewHelper', 'Webkul\Product\Helpers\Review') @php $productBaseImage = $productImageHelper->getProductBaseImage($product); $productPrice = $product->getTypeInstance()->getProductPrices(); - + $totalReviews = $product->reviews; + $avgRatings = ceil($reviewHelper->getAverageRating($product)); @endphp + + @@ -42,28 +50,36 @@ -
-

+
+

{{ $product->name }}

-

{{ $productPrice['final_price']['formated_price'] }}

+
+

{{ $product->price }}

+
- - - 25 ratings + @if ($totalReviews) +
+ {{ $productReview['rating'] }} Ratings +
+ @else +
+ {{ __('velocity::app.products.be-first-review') }} +
+ @endif

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + {!! $product->description !!}

-
-
- - - + +
+
+ +
@@ -101,7 +117,7 @@ // 'left': '200px', // }, 3000, 'ease'); - this.quickViewDetails = details; + this.quickViewDetails = true; } } }) @@ -114,8 +130,6 @@ // backgroud blur let body = $('body'); - // body.addClass('body-blur'); - return { body: body, currentlyActiveImage: 0, @@ -124,13 +138,13 @@ }, mounted: function () { + // console.log(this.quickViewDetails, this.quickView); }, methods: { closeQuickView: function () { - // this.body.removeClass('body-blur'); this.quickView = false; - this.$parent.quickViewDetails = false; + this.quickViewDetails = false; }, changeImage: function (imageIndex) { diff --git a/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php index 3d2efc2f9..60d2e0114 100644 --- a/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php +++ b/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php @@ -1,6 +1,7 @@ @inject ('productImageHelper', 'Webkul\Product\Helpers\ProductImage') @inject ('reviewHelper', 'Webkul\Product\Helpers\Review') @inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar') +@include('shop::UI.product-quick-view') @php if (isset($checkmode) && $checkmode && $toolbarHelper->getCurrentMode() == "list") { @@ -68,6 +69,8 @@ alt="{{ $product->name }}"> + +