From e9d6b93242148768403ba9099c79e7cb42a64ec9 Mon Sep 17 00:00:00 2001 From: prashant-webkul Date: Tue, 14 Aug 2018 19:15:11 +0530 Subject: [PATCH] layouting for two pages product review and cart page has been done --- packages/Webkul/Shop/src/Http/routes.php | 8 + .../src/Resources/assets/sass/_variables.scss | 11 +- .../Shop/src/Resources/assets/sass/app.scss | 424 +++++++++++++++++- .../views/store/product/cart/index.blade.php | 247 ++++++++++ .../store/product/review/index.blade.php | 162 +++++++ .../Ui/src/Resources/assets/sass/app.scss | 12 +- 6 files changed, 835 insertions(+), 29 deletions(-) create mode 100644 packages/Webkul/Shop/src/Resources/views/store/product/cart/index.blade.php create mode 100644 packages/Webkul/Shop/src/Resources/views/store/product/review/index.blade.php diff --git a/packages/Webkul/Shop/src/Http/routes.php b/packages/Webkul/Shop/src/Http/routes.php index 1e01e5df9..0e058027a 100644 --- a/packages/Webkul/Shop/src/Http/routes.php +++ b/packages/Webkul/Shop/src/Http/routes.php @@ -10,6 +10,14 @@ Route::group(['middleware' => ['web']], function () { 'view' => 'shop::store.product.index' ]); + Route::get('/product-review', function() { + return view('shop::store.product.review.index'); + }); + + Route::get('/cart', function() { + return view('shop::store.product.cart.index'); + }); + }); diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss index 33ed12732..cbea7f1fd 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss @@ -1,6 +1,7 @@ //shop variables $font-name: "Montserrat", sans-serif; $background-color: #f2f2f2; +$footer-back: #f2f2f2; $list-heading-color: rgba(165, 165, 165, 1); $list-color: #242424; $subscribe-btn-color: black; @@ -10,8 +11,6 @@ $offer-color: #ff6472; //shop variables ends here //customer variables -$product-font-color: #242424; -$product-price-color: #FF6472; $sign-up-text-color: #5e5e5e; $login-text: #3a3a3a; $background-color: #ffffff; @@ -20,3 +19,11 @@ $forgot-password-color: #0031f0; $profile-content-color: #5e5e5e; $horizontal-rule-color: #E8E8E8; //customer variables ends here + +//product +$real-price:#A5A5A5; +$product-font-color: #242424; +$product-price-color: #FF6472; +$dark-blue-shade: #0031F0; +$bar-color: #D8D8D8; +$gray-shade: #5E5E5E; \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss index b1843f12f..e4367398d 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss @@ -460,7 +460,7 @@ section.slider-block { } .footer { - background-color: $background-color; + background-color: $footer-back; padding-left: 10%; padding-right: 10%; @@ -740,8 +740,9 @@ section.slider-block { // product pages css starts here -section.product-detail { +section.product-detail, section.product-review { font-size: 16px; + color: $product-font-color; div.category-breadcrumbs { display: inline; @@ -750,7 +751,129 @@ section.product-detail { div.layouter { display:flex; flex-flow: row; - margin-top: 2%; + margin-top: 21px; + + .mixed-group { + + .single-image { + padding: 2px; + + img { + height: 280px; + width: 280px; + } + } + + .details { + + .product-name { + margin-top: 20px; + font-size: 24px; + margin-bottom: 20px; + } + + .price { + margin-bottom: 14px; + + .main-price { + font-size: 24px; + color: $product-price-color; + } + + .real-price { + color: $real-price; + text-decoration-line: line-through; + } + } + } + } + + .rating-reviews { + margin-top: 30px; + + .title-inline { + display: inline-block; + vertical-align: middle; + margin-bottom: 20px; + width: 100%; + + button { + float: right; + border-radius: 0px !important; + } + } + + .overall { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + height: 150px; + + .left-side { + margin-bottom: 20px; + + .number{ + font-size: 34px; + } + } + + .right-side { + display: block; + + .rater { + display: inline-flex; + align-items: center; + + .star { + width: 50px; + height: 20px; + padding: 1px; + margin-right: 8px; + } + + .line-bar { + height: 4px; + width: 158px; + margin-right: 12px; + background: $bar-color; + + .line-value { + height: 4px; + width: 100px; + background-color: $dark-blue-shade; + } + } + } + } + + } + + .reviews { + margin-top: 34px; + margin-bottom: 90px; + + .review { + margin-bottom: 25px; + + .title { + margin-bottom: 5px; + } + + .stars { + margin-bottom: 15px; + } + .message { + margin-bottom: 10px; + } + } + .view-all { + margin-top:15px; + color: $logo-color; + margin-bottom:15px; + } + } + } div.product-image-group { display:flex; @@ -946,32 +1069,287 @@ section.product-detail { } - .related-products-wrapper { - margin-bottom: 80px; + // .related-products-wrapper { + // margin-bottom: 80px; - .title{ - margin-bottom: 22px; - text-align: center; - } + // .title{ + // margin-bottom: 22px; + // text-align: center; + // } - .horizontal-rule { - height: 1px; - background: $horizontal-rule-color; - width: 148px; - margin-bottom: 24px; - margin-left:auto; - margin-right:auto; - } + // .horizontal-rule { + // height: 1px; + // background: $horizontal-rule-color; + // width: 148px; + // margin-bottom: 24px; + // margin-left:auto; + // margin-right:auto; + // } - .related-products { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - grid-gap: 10px; - } + // .related-products { + // display: grid; + // grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + // grid-gap: 10px; + // } - } + // } } +/* cart pages and elements css begins here */ + +section.cart { + color: $product-font-color; + font-size: 16px; + margin-bottom: 80px; + + .title { + font-size: 24px; + } + + .cart-content { + margin-top: 21px; + padding: 1px; + display: flex; + flex-direction: row; + + .left-side { + width: 68.6%; + margin-right: 2.4%; + + .item { + padding: 1.1%; + margin-bottom: 20px; + display: flex; + flex-direction: row; + + .item-image { + height: 160px; + width: 160px; + } + + .item-details { + display: flex; + flex-direction: column; + + .item-title { + font-size: 18px; + margin-bottom: 10px; + } + + .price { + margin-bottom: 10px; + + .main-price { + font-size: 18px; + margin-right: 4px; + } + + .real-price { + margin-right: 4px; + text-decoration-line: line-through; + } + + .discount { + color: $product-price-color; + } + } + + .summary { + margin-bottom: 17px; + } + + .misc { + display: inline-flex; + align-items: center; + justify-content: flex-start; + + div.qty-text { + color: $gray-shade; + margin-right: 10px; + } + + div.box { + height: 38px; + width: 60px; + text-align: center; + line-height: 38px; + border: 1px solid $border-color; + border-radius: 3px; + margin-right: 30px; + } + + .remove { + color: $dark-blue-shade; + margin-right: 30px; + } + + .towishlist { + color : $dark-blue-shade; + } + + } + } + } + + .misc-controls { + float: right; + + span { + margin-right: 15px; + } + + button { + border-radius: 0px; + } + } + } + + .right-side { + width: 29%; + display: block; + + .price-section { + width: 100%; + padding: 10px 10px 18px 18px; + margin-bottom: 20px; + + .title { + font-size: 16px; + font-weight: bold; + padding-bottom: 8px; + margin-bottom: 10px; + } + + .all-item-details { + margin-bottom: 17px; + + .item-details { + margin-bottom: 10px; + + .name { + } + + .price { + float: right; + } + } + } + .horizontal-rule { + width: 100%; + height: 1px; + vertical-align: middle; + background: #e8e8e8; + } + + .total-details { + margin-top: 10px; + + .amount { + float: right; + } + } + } + + .coupon-section { + padding: 10px 10px 18px 18px; + + .title { + font-size: 16px; + font-weight: bold; + margin-bottom: 10px; + } + + .control-group { + margin-bottom: 12px !important; + + input.coupon-input::-moz-placeholder { + font-family: "montserrat", sans-serif; + font-size: 16px; + color: $product-font-color; + } + + input.coupon-input::-webkit-input-placeholder { + font-family: "montserrat", sans-serif; + font-size: 16px; + color: $product-font-color; + } + + } + + button { + margin-bottom: 10px; + background-color: $color-black; + border-radius: 0px; + } + + .coupon-details { + + .coupon { + margin-bottom: 8px; + + .discount { + float: right; + } + } + } + + .horizontal-rule { + width: 100%; + height: 1px; + vertical-align: middle; + background: #e8e8e8; + margin-bottom: 9px; + } + + .after-coupon-amount { + + .name { + font-weight: bold; + } + + .amount { + float: right; + font-weight: bold; + } + + } + + } + + } + } + +} + +.related-products-wrapper { + margin-bottom: 80px; + + .title{ + margin-bottom: 22px; + font-size: 18px; + color: $product-font-color; + text-align: center; + } + + .horizontal-rule { + height: 1px; + background: $horizontal-rule-color; + width: 148px; + margin-bottom: 24px; + margin-left:auto; + margin-right:auto; + } + + .related-products { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-gap: 10px; + } + +} + +/* cart pages and elements css ends here */ + @media all and (max-width: 480px) { .header { // border: 1px solid black; diff --git a/packages/Webkul/Shop/src/Resources/views/store/product/cart/index.blade.php b/packages/Webkul/Shop/src/Resources/views/store/product/cart/index.blade.php new file mode 100644 index 000000000..5018cf67b --- /dev/null +++ b/packages/Webkul/Shop/src/Resources/views/store/product/cart/index.blade.php @@ -0,0 +1,247 @@ +@extends('shop::store.layouts.master') +@section('content-wrapper') +
+
+ Shopping Cart +
+ +
+ +
+ +
+ + +
+ +
+ Rainbow Creation Embroided +
+ +
+ + $24.00 + + + $25.00 + + + 10% Off + +
+ +
+ Color : Gray, Size : S, Sleeve type : Puffed Sleeves, Occasion : Birthday, Marriage Anniversary +
+ +
+
Quantity
+
1
+ Remove + Move to Wishlist +
+
+ +
+
+ + +
+ +
+ Rainbow Creation Embroided +
+ +
+ + $24.00 + + + $25.00 + + + 10% Off + +
+ +
+ Color : Gray, Size : S, Sleeve type : Puffed Sleeves, Occasion : Birthday, Marriage Anniversary +
+ +
+
Quantity
+
1
+ Remove + Move to Wishlist +
+
+ +
+ +
+ Continue Shopping + +
+
+ +
+
+
+ Price Detail +
+
+ +
+ Item 1 + $25.00 +
+ +
+ Item 2 + $25.00 +
+ +
+ Item 3 + $25.00 +
+ +
+ +
+ +
+ Amount Payable + $75.00 +
+ +
+
+ + Apply Coupon + +
+ +
+ + + +
+
Coupon Used
+
+ Coupon 1 + $15 +
+
+ Coupon 2 + $5 +
+
+ +
+ +
+ Amount Payable + $75.00 +
+ +
+ +
+ +
+
+ +
+ +
+ We found other products you might like! +
+ +
+ +
+ +
+
+ +
+
+ Red Black Tees +
+
+ $65.00 +
+
+ + + +
+
+ + +
+
+
+
+ +
+
+ Red Black Tees +
+
+ $65.00 +
+
+ + + +
+
+ + +
+
+
+
+ +
+
+ Red Black Tees +
+
+ $65.00 +
+
+ + + +
+
+ + +
+
+
+
+ +
+
+ Red Black Tees +
+
+ $65.00 +
+
+ + + +
+
+ + +
+
+
+
+@endsection \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/views/store/product/review/index.blade.php b/packages/Webkul/Shop/src/Resources/views/store/product/review/index.blade.php new file mode 100644 index 000000000..90012b534 --- /dev/null +++ b/packages/Webkul/Shop/src/Resources/views/store/product/review/index.blade.php @@ -0,0 +1,162 @@ +@extends('shop::store.layouts.master') +@section('content-wrapper') +
+
+ + Home > Men > Slit Open Jeans + +
+
+ +
+ +
+ +
+ +
+ +
+ Slit Open Jeans +
+ +
+ + $24.00 + + + $25.00 + + + 10% Off + +
+
+ +
+ +
+ +
+ Ratings & Reviews + +
+ +
+
+ + 4.3 + + + + + +
+ 24,330 Ratings & 104 Reviews +
+
+
+ +
+
5 Star
+
+
+
+
20%
+

+
+
4 Star
+
+
+
+
20%
+

+
+
3 Star
+
+
+
+
20%
+

+
+
2 Star
+
+
+
+
20%
+

+
+
1 Star
+
+
+
+
20%
+
+ +
+ +
+
+
+
+ Awesome +
+
+ +
+
+ NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers +
+
+ + By John Doe + + + , 25, June 2018 + +
+
+
+
+ Awesome +
+
+ +
+
+ NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers +
+
+ + By John Doe + + + , 25, June 2018 + +
+
+
+
+ Awesome +
+
+ +
+
+ NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers +
+
+ + By John Doe + + + , 25, June 2018 + +
+
+
Load More
+
+
+
+
+@endsection diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss index f11967d58..56f31d6ec 100644 --- a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss @@ -867,13 +867,17 @@ h2 { } } - td.action { - a:first-child { - margin-right:8px; - } + } + } + + tbody { + td.action { + a:first-child { + margin-right: 10px; } } } + .pagination { margin-top:20px; }