merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layouting for two pages product review and cart page has been done

This commit is contained in:
prashant-webkul 2018-08-14 19:15:11 +05:30
parent 2e4fc2f8a3
commit e9d6b93242
6 changed files with 835 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/Webkul/Shop/src/Http/routes.php
View File

@ -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');
});
});

11
packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss vendored
View File

@ -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;

424
packages/Webkul/Shop/src/Resources/assets/sass/app.scss vendored
View File

@ -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;

247
packages/Webkul/Shop/src/Resources/views/store/product/cart/index.blade.php Normal file
View File

@ -0,0 +1,247 @@
@extends('shop::store.layouts.master')
@section('content-wrapper')
<section class="cart">
<div class="title">
Shopping Cart
</div>
<div class="cart-content">
<div class="left-side">
<div class="item">
<img class="item-image" src="{{ asset('vendor/webkul/shop/assets/images/jeans_big.jpg') }}" />
<div class="item-details">
<div class="item-title">
Rainbow Creation Embroided
</div>
<div class="price">
<span class="main-price">
$24.00
</span>
<span class="real-price">
$25.00
</span>
<span class="discount">
10% Off
</span>
</div>
<div class="summary">
Color : Gray, Size : S, Sleeve type : Puffed Sleeves, Occasion : Birthday, Marriage Anniversary
</div>
<div class="misc">
<div class="qty-text">Quantity</div>
<div class="box">1</div>
<span class="remove">Remove</span>
<span class="towishlist">Move to Wishlist</span>
</div>
</div>
</div>
<div class="item">
<img class="item-image" src="{{ asset('vendor/webkul/shop/assets/images/jeans_big.jpg') }}" />
<div class="item-details">
<div class="item-title">
Rainbow Creation Embroided
</div>
<div class="price">
<span class="main-price">
$24.00
</span>
<span class="real-price">
$25.00
</span>
<span class="discount">
10% Off
</span>
</div>
<div class="summary">
Color : Gray, Size : S, Sleeve type : Puffed Sleeves, Occasion : Birthday, Marriage Anniversary
</div>
<div class="misc">
<div class="qty-text">Quantity</div>
<div class="box">1</div>
<span class="remove">Remove</span>
<span class="towishlist">Move to Wishlist</span>
</div>
</div>
</div>
<div class="misc-controls">
<span>Continue Shopping</span>
<button class="btn btn-lg btn-primary">PROCEED TO CHECKOUT</button>
</div>
</div>
<div class="right-side">
<div class="price-section">
<div class="title">
Price Detail
</div>
<div class="all-item-details">
<div class="item-details">
<span class="name">Item 1</span>
<span class="price">$25.00</span>
</div>
<div class="item-details">
<span class="name">Item 2</span>
<span class="price">$25.00</span>
</div>
<div class="item-details">
<span class="name">Item 3</span>
<span class="price">$25.00</span>
</div>
</div>
<div class="horizontal-rule"></div>
<div class="total-details">
<span class="name">Amount Payable</span>
<span class="amount">$75.00</span>
</div>
</div>
<div class="coupon-section">
<span class="title">Apply Coupon</span>
<div class="control-group">
<input type="text" class="control coupon-input" placeholder="Coupon Code" />
</div>
<button class="btn btn-md btn-primary">Apply</button>
<div class="coupon-details">
<div class="title">Coupon Used</div>
<div class="coupon">
<span class="name">Coupon 1</span>
<span class="discount">$15</span>
</div>
<div class="coupon">
<span class="name">Coupon 2</span>
<span class="discount">$5</span>
</div>
</div>
<div class="horizontal-rule"></div>
<div class="after-coupon-amount">
<span class="name">Amount Payable</span>
<span class="amount">$75.00</span>
</div>
</div>
</div>
</div>
</section>
<div class="related-products-wrapper">
<div class="title">
We found other products you might like!
</div>
<div class="horizontal-rule"></div>
<div class="related-products">
<div class="product-card">
<div class="product-image">
<img src="vendor/webkul/shop/assets/images/grid.png" />
</div>
<div class="product-name">
<span>Red Black Tees</span>
</div>
<div class="product-price">
<span>$65.00</span>
</div>
<div class="product-ratings">
<span>
<img src="vendor/webkul/shop/assets/images/5star.svg" />
</span>
</div>
<div class="cart-fav-seg">
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="vendor/webkul/shop/assets/images/grid.png" />
</div>
<div class="product-name">
<span>Red Black Tees</span>
</div>
<div class="product-price">
<span>$65.00</span>
</div>
<div class="product-ratings">
<span>
<img src="vendor/webkul/shop/assets/images/5star.svg" />
</span>
</div>
<div class="cart-fav-seg">
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="vendor/webkul/shop/assets/images/grid.png" />
</div>
<div class="product-name">
<span>Red Black Tees</span>
</div>
<div class="product-price">
<span>$65.00</span>
</div>
<div class="product-ratings">
<span>
<img src="vendor/webkul/shop/assets/images/5star.svg" />
</span>
</div>
<div class="cart-fav-seg">
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="vendor/webkul/shop/assets/images/grid.png" />
</div>
<div class="product-name">
<span>Red Black Tees</span>
</div>
<div class="product-price">
<span>$65.00</span>
</div>
<div class="product-ratings">
<span>
<img src="vendor/webkul/shop/assets/images/5star.svg" />
</span>
</div>
<div class="cart-fav-seg">
<button class="btn btn-md btn-primary addtocart">Add to Cart</button>
<span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
</div>
</div>
</div>
</div>
@endsection

162
packages/Webkul/Shop/src/Resources/views/store/product/review/index.blade.php Normal file
View File

@ -0,0 +1,162 @@
@extends('shop::store.layouts.master')
@section('content-wrapper')
<section class="product-review">
<div class="category-breadcrumbs">
<span class="breadcrumb">Home</span> > <span class="breadcrumb">Men</span> > <span class="breadcrumb">Slit Open Jeans</span>
</div>
<div class="layouter">
<div class="mixed-group">
<div class="single-image">
<img src="{{ asset('vendor/webkul/shop/assets/images/jeans_big.jpg') }}" />
</div>
<div class="details">
<div class="product-name">
Slit Open Jeans
</div>
<div class="price">
<span class="main-price">
$24.00
</span>
<span class="real-price">
$25.00
</span>
<span class="discount">
10% Off
</span>
</div>
</div>
</div>
<div class="rating-reviews">
<div class="title-inline">
<span>Ratings & Reviews</span>
<button class="btn btn-md btn-primary">Write Review</button>
</div>
<div class="overall">
<div class="left-side">
<span class="number">
4.3
</span>
<span class="stars">
<img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
</span>
<div class="total-reviews">
24,330 Ratings & 104 Reviews
</div>
</div>
<div class="right-side">
<div class="rater 5star">
<div class="star">5 Star</div>
<div class="line-bar">
<div class="line-value"></div>
</div>
<div class="percentage">20%</div>
</div> <br/>
<div class="rater 4star">
<div class="star">4 Star</div>
<div class="line-bar">
<div class="line-value"></div>
</div>
<div class="percentage">20%</div>
</div> <br/>
<div class="rater 3star">
<div class="star">3 Star</div>
<div class="line-bar">
<div class="line-value"></div>
</div>
<div class="percentage">20%</div>
</div> <br/>
<div class="rater 2star">
<div class="star">2 Star</div>
<div class="line-bar">
<div class="line-value"></div>
</div>
<div class="percentage">20%</div>
</div> <br/>
<div class="rater 1star">
<div class="star">1 Star</div>
<div class="line-bar">
<div class="line-value"></div>
</div>
<div class="percentage">20%</div>
</div>
</div>
</div>
<div class="reviews">
<div class="review">
<div class="title">
Awesome
</div>
<div class="stars">
<img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
</div>
<div class="message">
NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
</div>
<div class="reviewer-details">
<span class="by">
By John Doe
</span>
<span class="when">
, 25, June 2018
</span>
</div>
</div>
<div class="review">
<div class="title">
Awesome
</div>
<div class="stars">
<img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
</div>
<div class="message">
NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
</div>
<div class="reviewer-details">
<span class="by">
By John Doe
</span>
<span class="when">
, 25, June 2018
</span>
</div>
</div>
<div class="review">
<div class="title">
Awesome
</div>
<div class="stars">
<img src="{{ asset('vendor/webkul/shop/assets/images/5star.svg') }}" />
</div>
<div class="message">
NFC provides 100% independence, device compatibility and freedom of movement Ear-cup-mounted sensors for easy-access, touch-sensitive control 30mm drivers
</div>
<div class="reviewer-details">
<span class="by">
By John Doe
</span>
<span class="when">
, 25, June 2018
</span>
</div>
</div>
<div class="view-all">Load More</div>
</div>
</div>
</div>
</section>
@endsection

12
packages/Webkul/Ui/src/Resources/assets/sass/app.scss vendored
View File

@ -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;
}