Product details page layout is fixed

This commit is contained in:
prashant-webkul 2018-09-15 13:39:56 +05:30
parent 9cea4133f7
commit 477dded06e
7 changed files with 348 additions and 516 deletions

View File

@ -292,7 +292,8 @@ class Cart {
* and sync the cookies products
* with the existing data of cart
* in the cart tables;
*/
*/
public function mergeCart() {
if(Cookie::has('cart_session_id')) {

View File

@ -71,6 +71,9 @@ class SessionController extends Controller
public function destroy($id)
{
auth()->guard('customer')->logout();
Event::fire('customer.after.logout', 1);
return redirect()->route($this->_config['redirect']);
}
}

View File

@ -30,6 +30,10 @@ class CustomerEventsHandler {
Cart::mergeCart();
}
//use this when there is very uttermost need to use it.
public function onCustomerLogout($event) {
}
/**
* Register the listeners for the subscriber.
*
@ -39,5 +43,7 @@ class CustomerEventsHandler {
public function subscribe($events)
{
$events->listen('customer.after.login', 'Webkul\Customer\Http\Listeners\CustomerEventsHandler@onCustomerLogin');
$events->listen('customer.after.logout', 'Webkul\Customer\Http\Listeners\CustomerEventsHandler@onCustomerLogout');
}
}

View File

@ -23,9 +23,9 @@ Route::group(['middleware' => ['web']], function () {
// //Routes for product cart
Route::post('products/guest/cart/add/{id}', 'Webkul\Cart\Http\Controllers\CartController@add')->name('cart.add');
Route::post('products/add/{id}', 'Webkul\Cart\Http\Controllers\CartController@add')->name('cart.add');
Route::post('product/guest/cart/remove/{id}', 'Webkul\Cart\Http\Controllers\CartController@remove')->name('cart.remove');
Route::post('product/remove/{id}', 'Webkul\Cart\Http\Controllers\CartController@remove')->name('cart.remove');
// Route::post('product/customer/cart/add/{id}', 'Webkul\Cart\Http\Controllers\CartController@add')->name('cart.customer.add');

View File

@ -1313,347 +1313,337 @@ section.product-detail {
}
div.layouter {
display: block;
margin-top: 20px;
margin-bottom: 20px;
display: inline-block;
width: 100%;
.mixed-group {
form {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
.single-image {
padding: 2px;
div.product-image-group {
margin-right: 36px;
img {
height: 280px;
width: 280px;
div {
display: flex;
flex-direction: row;
.thumb-list {
display: flex;
flex-direction: column;
margin-right: 4px;
height: 480px;
width: 120px;
overflow: hidden;
position: relative;
justify-content: flex-start;
.thumb-frame {
border: 2px solid transparent;
background: #F2F2F2;
max-width: 120px;
width: auto;
height: 120px;
&.active {
border-color: #979797;
}
img {
width: 100%;
height: 100%;
}
}
.gallery-control {
width: 100%;
position: absolute;
text-align: center;
cursor: pointer;
z-index: 1;
.overlay {
opacity: 0.3;
background: #000000;
width: 100%;
height: 18px;
position: absolute;
left: 0;
z-index: -1;
}
.icon {
z-index: 2;
}
&.top {
top: 0;
}
&.bottom {
bottom: 0;
}
}
}
.product-hero-image {
display: block;
position: relative;
background: #F2F2F2;
width: 480px;
max-height: 480px;
.wishlist {
position: absolute;
top: 10px;
right: 12px;
}
.share {
position: absolute;
top: 10px;
right: 45px;
}
}
}
.cart-fav-seg {
display: block;
float: right;
}
}
.details {
.product-name {
margin-top: 20px;
font-size: 24px;
margin-bottom: 20px;
}
width: 50%;
.product-price {
margin-bottom: 14px;
}
}
}
.rating-reviews {
margin-top: 0px;
width: 50%;
margin-left: 20px;
.title-inline {
display: inline-flex;
align-items: center;
justify-content: space-between;
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 {
.product-ratings {
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 {
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 {
width: 43%;
float: left;
min-height: 1px;
position: relative;
.thumb-list {
display: flex;
flex-direction: column;
margin-right: 4px;
height: 480px;
overflow: hidden;
position: relative;
float: left;
.thumb-frame {
border: 2px solid transparent;
background: #F2F2F2;
width: 120px;
height: 120px;
&.active {
border-color: #979797;
}
img {
width: 100%;
height: 100%;
}
}
.gallery-control {
width: 100%;
position: absolute;
text-align: center;
cursor: pointer;
z-index: 1;
.overlay {
opacity: 0.3;
background: #000000;
width: 100%;
height: 18px;
position: absolute;
left: 0;
z-index: -1;
}
.icon {
z-index: 2;
width: 16px;
height: 16px;
}
&.top {
top: 0;
}
&.bottom {
bottom: 0;
.total-reviews {
display: inline-block;
margin-left: 15px;
}
}
}
.product-hero-image {
display: block;
position: relative;
background: #F2F2F2;
width: 480px;
max-height: 480px;
float: left;
.wishlist {
position: absolute;
top: 10px;
right: 12px;
}
.share {
position: absolute;
top: 10px;
right: 45px;
}
}
}
.details {
width: 57%;
float: left;
.product-price {
margin-bottom: 14px;
}
.product-ratings {
margin-bottom: 20px;
.icon {
width: 16px;
height: 16px;
}
.total-reviews {
display: inline-block;
margin-left: 15px;
}
}
.product-heading {
font-size: 24px;
color: $product-font-color;
margin-bottom: 15px;
}
.product-price {
margin-bottom: 15px;
font-size: 24px;
.special-price {
.product-heading {
font-size: 24px;
color: $product-font-color;
margin-bottom: 15px;
}
}
.stock-status {
margin-bottom: 15px;
}
.product-price {
margin-bottom: 15px;
font-size: 24px;
.description {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: solid 1px rgba(162, 162, 162, 0.2)
}
.full-specifications {
td {
padding: 10px 0;
color: #5E5E5E;
&:first-child {
padding-right: 40px;
.special-price {
font-size: 24px;
}
}
.stock-status {
margin-bottom: 15px;
}
.description {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: solid 1px rgba(162, 162, 162, 0.2)
}
.full-specifications {
td {
padding: 10px 0;
color: #5E5E5E;
&:first-child {
padding-right: 40px;
}
}
}
.accordian .accordian-header {
font-size: 16px;
padding-left: 0;
font-weight: 600;
}
.attributes {
display: block;
width: 100%;
border-bottom: solid 1px rgba(162, 162, 162, 0.2);
}
.full-description {
font-size: 16px;
}
}
.accordian .accordian-header {
font-size: 16px;
padding-left: 0;
font-weight: 600;
}
// .rating-reviews {
// margin-top: 0px;
// width: 50%;
// margin-left: 20px;
// .title-inline {
// display: inline-flex;
// align-items: center;
// justify-content: space-between;
// 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 {
// 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;
// }
// }
// }
.attributes {
display: block;
width: 100%;
border-bottom: solid 1px rgba(162, 162, 162, 0.2);
}
.full-description {
font-size: 16px;
}
}
}
}
.rating-reviews {
// .rating-reviews {
.rating-header {
font-weight: 600;
padding: 20px 0;
}
// .rating-header {
// font-weight: 600;
// padding: 20px 0;
// }
.stars {
.icon {
width: 16px;
height: 16px;
}
}
// .stars {
// .icon {
// width: 16px;
// height: 16px;
// }
// }
.overall {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
// .overall {
// display: flex;
// flex-direction: row;
// align-items: center;
// justify-content: space-between;
.review-info {
.number {
font-size: 34px;
}
// .review-info {
// .number {
// font-size: 34px;
// }
.total-reviews {
margin-top: 10px;
}
}
}
// .total-reviews {
// margin-top: 10px;
// }
// }
// }
.reviews {
margin-top: 40px;
margin-bottom: 40px;
// .reviews {
// margin-top: 40px;
// margin-bottom: 40px;
.review {
margin-bottom: 25px;
// .review {
// margin-bottom: 25px;
.title {
margin-bottom: 5px;
}
// .title {
// margin-bottom: 5px;
// }
.stars {
margin-bottom: 15px;
display: inline-block;
}
// .stars {
// margin-bottom: 15px;
// display: inline-block;
// }
.message {
margin-bottom: 10px;
}
// .message {
// margin-bottom: 10px;
// }
.reviewer-details {
color: #5E5E5E;
}
}
// .reviewer-details {
// color: #5E5E5E;
// }
// }
.view-all {
margin-top:15px;
color: $logo-color;
margin-bottom:15px;
}
}
}
// .view-all {
// margin-top:15px;
// color: $logo-color;
// margin-bottom:15px;
// }
// }
// }
/* cart pages and elements css begins here */
section.cart {

View File

@ -5,9 +5,7 @@
<div class="product-image-group">
<product-gallery></product-gallery>
@include ('shop::products.add-to')
</div>
@push('scripts')

View File

@ -1378,57 +1378,12 @@ section.product-detail div.category-breadcrumbs {
}
section.product-detail div.layouter {
display: block;
margin-top: 20px;
margin-bottom: 20px;
display: inline-block;
width: 100%;
}
section.product-detail div.layouter .mixed-group .single-image {
padding: 2px;
}
section.product-detail div.layouter .mixed-group .single-image img {
height: 280px;
width: 280px;
}
section.product-detail div.layouter .mixed-group .details .product-name {
margin-top: 20px;
font-size: 24px;
margin-bottom: 20px;
}
section.product-detail div.layouter .mixed-group .details .product-price {
margin-bottom: 14px;
}
section.product-detail div.layouter .rating-reviews {
margin-top: 0px;
width: 50%;
margin-left: 20px;
}
section.product-detail div.layouter .rating-reviews .title-inline {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 20px;
width: 100%;
}
section.product-detail div.layouter .rating-reviews .title-inline button {
float: right;
border-radius: 0px !important;
}
section.product-detail div.layouter .rating-reviews .overall {
section.product-detail div.layouter form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -1436,89 +1391,27 @@ section.product-detail div.layouter .rating-reviews .overall {
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 150px;
width: 100%;
}
section.product-detail div.layouter .rating-reviews .overall .left-side {
margin-bottom: 20px;
section.product-detail div.layouter form div.product-image-group {
margin-right: 36px;
}
section.product-detail div.layouter .rating-reviews .overall .left-side .number {
font-size: 34px;
section.product-detail div.layouter form div.product-image-group div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
section.product-detail div.layouter .rating-reviews .overall .right-side {
display: block;
}
section.product-detail div.layouter .rating-reviews .overall .right-side .rater {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
section.product-detail div.layouter .rating-reviews .overall .right-side .rater .star {
width: 50px;
height: 20px;
padding: 1px;
margin-right: 8px;
}
section.product-detail div.layouter .rating-reviews .overall .right-side .rater .line-bar {
height: 4px;
width: 158px;
margin-right: 12px;
background: #D8D8D8;
}
section.product-detail div.layouter .rating-reviews .overall .right-side .rater .line-bar .line-value {
background-color: #0031F0;
}
section.product-detail div.layouter .rating-reviews .reviews {
margin-top: 34px;
margin-bottom: 90px;
}
section.product-detail div.layouter .rating-reviews .reviews .review {
margin-bottom: 25px;
}
section.product-detail div.layouter .rating-reviews .reviews .review .title {
margin-bottom: 5px;
}
section.product-detail div.layouter .rating-reviews .reviews .review .stars {
margin-bottom: 15px;
}
section.product-detail div.layouter .rating-reviews .reviews .review .message {
margin-bottom: 10px;
}
section.product-detail div.layouter .rating-reviews .reviews .view-all {
margin-top: 15px;
color: #0031f0;
margin-bottom: 15px;
}
section.product-detail div.layouter div.product-image-group {
width: 43%;
float: left;
min-height: 1px;
position: relative;
}
section.product-detail div.layouter div.product-image-group .thumb-list {
section.product-detail div.layouter form div.product-image-group div .thumb-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -1528,28 +1421,32 @@ section.product-detail div.layouter div.product-image-group .thumb-list {
flex-direction: column;
margin-right: 4px;
height: 480px;
width: 120px;
overflow: hidden;
position: relative;
float: left;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
section.product-detail div.layouter div.product-image-group .thumb-list .thumb-frame {
section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame {
border: 2px solid transparent;
background: #F2F2F2;
width: 120px;
max-width: 120px;
width: auto;
height: 120px;
}
section.product-detail div.layouter div.product-image-group .thumb-list .thumb-frame.active {
section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame.active {
border-color: #979797;
}
section.product-detail div.layouter div.product-image-group .thumb-list .thumb-frame img {
section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame img {
width: 100%;
height: 100%;
}
section.product-detail div.layouter div.product-image-group .thumb-list .gallery-control {
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control {
width: 100%;
position: absolute;
text-align: center;
@ -1557,7 +1454,7 @@ section.product-detail div.layouter div.product-image-group .thumb-list .gallery
z-index: 1;
}
section.product-detail div.layouter div.product-image-group .thumb-list .gallery-control .overlay {
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control .overlay {
opacity: 0.3;
background: #000000;
width: 100%;
@ -1567,178 +1464,115 @@ section.product-detail div.layouter div.product-image-group .thumb-list .gallery
z-index: -1;
}
section.product-detail div.layouter div.product-image-group .thumb-list .gallery-control .icon {
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control .icon {
z-index: 2;
}
section.product-detail div.layouter div.product-image-group .thumb-list .gallery-control.top {
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control.top {
top: 0;
}
section.product-detail div.layouter div.product-image-group .thumb-list .gallery-control.bottom {
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control.bottom {
bottom: 0;
}
section.product-detail div.layouter div.product-image-group .product-hero-image {
section.product-detail div.layouter form div.product-image-group div .product-hero-image {
display: block;
position: relative;
background: #F2F2F2;
width: 480px;
max-height: 480px;
float: left;
}
section.product-detail div.layouter div.product-image-group .product-hero-image .wishlist {
section.product-detail div.layouter form div.product-image-group div .product-hero-image .wishlist {
position: absolute;
top: 10px;
right: 12px;
}
section.product-detail div.layouter div.product-image-group .product-hero-image .share {
section.product-detail div.layouter form div.product-image-group div .product-hero-image .share {
position: absolute;
top: 10px;
right: 45px;
}
section.product-detail div.layouter .details {
width: 57%;
float: left;
section.product-detail div.layouter form div.product-image-group .cart-fav-seg {
display: block;
float: right;
}
section.product-detail div.layouter .details .product-price {
section.product-detail div.layouter form .details {
width: 50%;
}
section.product-detail div.layouter form .details .product-price {
margin-bottom: 14px;
}
section.product-detail div.layouter .details .product-ratings {
section.product-detail div.layouter form .details .product-ratings {
margin-bottom: 20px;
}
section.product-detail div.layouter .details .product-ratings .icon {
section.product-detail div.layouter form .details .product-ratings .icon {
width: 16px;
height: 16px;
}
section.product-detail div.layouter .details .product-ratings .total-reviews {
section.product-detail div.layouter form .details .product-ratings .total-reviews {
display: inline-block;
margin-left: 15px;
}
section.product-detail div.layouter .details .product-heading {
section.product-detail div.layouter form .details .product-heading {
font-size: 24px;
color: #242424;
margin-bottom: 15px;
}
section.product-detail div.layouter .details .product-price {
section.product-detail div.layouter form .details .product-price {
margin-bottom: 15px;
font-size: 24px;
}
section.product-detail div.layouter .details .product-price .special-price {
section.product-detail div.layouter form .details .product-price .special-price {
font-size: 24px;
}
section.product-detail div.layouter .details .stock-status {
section.product-detail div.layouter form .details .stock-status {
margin-bottom: 15px;
}
section.product-detail div.layouter .details .description {
section.product-detail div.layouter form .details .description {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: solid 1px rgba(162, 162, 162, 0.2);
}
section.product-detail div.layouter .details .full-specifications td {
section.product-detail div.layouter form .details .full-specifications td {
padding: 10px 0;
color: #5E5E5E;
}
section.product-detail div.layouter .details .full-specifications td:first-child {
section.product-detail div.layouter form .details .full-specifications td:first-child {
padding-right: 40px;
}
section.product-detail div.layouter .details .accordian .accordian-header {
section.product-detail div.layouter form .details .accordian .accordian-header {
font-size: 16px;
padding-left: 0;
font-weight: 600;
}
section.product-detail div.layouter .details .attributes {
section.product-detail div.layouter form .details .attributes {
display: block;
width: 100%;
border-bottom: solid 1px rgba(162, 162, 162, 0.2);
}
section.product-detail div.layouter .details .full-description {
section.product-detail div.layouter form .details .full-description {
font-size: 16px;
}
.rating-reviews .rating-header {
font-weight: 600;
padding: 20px 0;
}
.rating-reviews .stars .icon {
width: 16px;
height: 16px;
}
.rating-reviews .overall {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.rating-reviews .overall .review-info .number {
font-size: 34px;
}
.rating-reviews .overall .review-info .total-reviews {
margin-top: 10px;
}
.rating-reviews .reviews {
margin-top: 40px;
margin-bottom: 40px;
}
.rating-reviews .reviews .review {
margin-bottom: 25px;
}
.rating-reviews .reviews .review .title {
margin-bottom: 5px;
}
.rating-reviews .reviews .review .stars {
margin-bottom: 15px;
display: inline-block;
}
.rating-reviews .reviews .review .message {
margin-bottom: 10px;
}
.rating-reviews .reviews .review .reviewer-details {
color: #5E5E5E;
}
.rating-reviews .reviews .view-all {
margin-top: 15px;
color: #0031f0;
margin-bottom: 15px;
}
/* cart pages and elements css begins here */
section.cart {
color: #242424;