diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index d8ca4c43b..c66961d76 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -889,6 +889,14 @@ section.slider-block {
float: left;
color: $font-color;
line-height: 45px;
+
+ span:first-child {
+ display: inline;
+ }
+
+ span:last-child {
+ display: none;
+ }
}
.pager {
@@ -920,6 +928,10 @@ section.slider-block {
margin-right: 10px;
}
}
+
+ .sort-filter {
+ display: none;
+ }
}
.sorter {
@@ -1617,15 +1629,12 @@ section.product-detail {
margin-right: 40px;
}
-
.wishlist {
position: absolute;
top: 10px;
right: 12px;
}
-
-
.share {
position: absolute;
top: 10px;
@@ -1717,6 +1726,10 @@ section.product-detail {
display: block;
width: 100%;
border-bottom: solid 1px rgba(162, 162, 162, 0.2);
+
+ .cart-fav-seg {
+ display: none;
+ }
}
.full-description {
@@ -1814,69 +1827,249 @@ section.product-detail {
}
}
-// .rating-reviews {
+// products responsive css start here
-// .rating-header {
-// font-weight: 600;
-// padding: 20px 0;
-// }
+@media all and (max-width: 480px) {
-// .stars {
-// .icon {
-// width: 16px;
-// height: 16px;
-// }
-// }
+ section.product-detail {
-// .overall {
-// display: flex;
-// flex-direction: row;
-// align-items: center;
-// justify-content: space-between;
+ div.category-breadcrumbs {
+ display: none;
+ }
-// .review-info {
-// .number {
-// font-size: 34px;
-// }
+ div.layouter {
-// .total-reviews {
-// margin-top: 10px;
-// }
-// }
-// }
+ form {
+ display: block;
-// .reviews {
-// margin-top: 40px;
-// margin-bottom: 40px;
+ div.product-image-group {
+ margin-right: 0px;
-// .review {
-// margin-bottom: 25px;
+ div {
+ flex-direction: column-reverse;
-// .title {
-// margin-bottom: 5px;
-// }
+ .thumb-list {
+ height: 140px;
+ margin-top: 5px;
+ width:100%;
+ flex-direction: row;
+ overflow-x: scroll;
-// .stars {
-// margin-bottom: 15px;
-// display: inline-block;
-// }
+ .thumb-frame {
-// .message {
-// margin-bottom: 10px;
-// }
+ img {
+ height: 100%;
+ width: auto;
+ }
+ }
-// .reviewer-details {
-// color: #5E5E5E;
-// }
-// }
+ .gallery-control {
+ display: none;
+ }
+ }
-// .view-all {
-// margin-top:15px;
-// color: $logo-color;
-// margin-bottom:15px;
-// }
-// }
-// }
+ .product-hero-image {
+ width: 100%;
+
+ img {
+ width: 100%;
+ }
+
+ .whishlist-icon {
+ display: none;
+ }
+
+ .share-icon {
+ display: none;
+ }
+ }
+ }
+
+ .cart-fav-seg {
+ display: none;
+ }
+ }
+
+ .details {
+ width: 100%;
+ border-bottom: 1px solid #e8e8e8e8;
+
+ .attributes {
+ border-bottom: none;
+
+ .cart-fav-seg {
+ display: inline;
+
+ .addtocart {
+ width: 49%;
+ background: #000000;
+ }
+
+ .buynow {
+ width: 49%;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+
+ section.product-detail {
+
+ div.category-breadcrumbs {
+ display: none;
+ }
+
+ div.layouter {
+
+ form {
+ display: block;
+
+ div.product-image-group {
+ margin-right: 0px;
+
+ div {
+ flex-direction: column-reverse;
+
+ .thumb-list {
+ height: 140px;
+ margin-top: 5px;
+ width:100%;
+ flex-direction: row;
+ overflow-x: scroll;
+
+ .thumb-frame {
+
+ img {
+ height: 100%;
+ width: auto;
+ }
+ }
+
+ .gallery-control {
+ display: none;
+ }
+ }
+
+ .product-hero-image {
+ width: 100%;
+
+ img {
+ width: 100%;
+ height: 400px;
+ max-height: 400px;
+ }
+
+ .whishlist-icon {
+ display: none;
+ }
+
+ .share-icon {
+ display: none;
+ }
+ }
+ }
+
+ .cart-fav-seg {
+ display: none;
+ }
+ }
+
+ .details {
+ width: 100%;
+ border-bottom: 1px solid #e8e8e8e8;
+
+ .attributes {
+ border-bottom: none;
+
+ .cart-fav-seg {
+ display: inline;
+
+ .addtocart {
+ width: 49%;
+ background: #000000;
+ }
+
+ .buynow {
+ width: 49%;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+// products responsive css end here
+
+.rating-reviews {
+
+ .rating-header {
+ font-weight: 600;
+ padding: 20px 0;
+ }
+
+ .stars {
+ .icon {
+ width: 16px;
+ height: 16px;
+ }
+ }
+
+ .overall {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+
+ .review-info {
+ .number {
+ font-size: 34px;
+ }
+
+ .total-reviews {
+ margin-top: 10px;
+ }
+ }
+ }
+
+ .reviews {
+ margin-top: 40px;
+ margin-bottom: 40px;
+
+ .review {
+ margin-bottom: 25px;
+
+ .title {
+ margin-bottom: 5px;
+ }
+
+ .stars {
+ margin-bottom: 15px;
+ display: inline-block;
+ }
+
+ .message {
+ margin-bottom: 10px;
+ }
+
+ .reviewer-details {
+ color: #5E5E5E;
+ }
+ }
+
+ .view-all {
+ margin-top:15px;
+ color: $logo-color;
+ margin-bottom:15px;
+ }
+ }
+}
/* cart pages and elements css begins here */
section.cart {
@@ -2134,6 +2327,45 @@ section.cart {
}
}
+@media all and (max-width: 480px){
+
+ .attached-products-wrapper {
+
+ .title {
+
+ .border-bottom {
+ border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+ display: inline-block;
+ width: 100%;
+ position: initial;
+ top: 40px;
+ left: 0%;
+ margin-left: 0px;
+ }
+ }
+ }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+
+ .attached-products-wrapper {
+
+ .title {
+
+ .border-bottom {
+ border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+ display: inline-block;
+ width: 100%;
+ position: initial;
+ top: 40px;
+ left: 0%;
+ margin-left: 0px;
+ }
+ }
+ }
+}
+
+
// order page css start here
.order {
diff --git a/packages/Webkul/Shop/src/Resources/views/products/product-add.blade.php b/packages/Webkul/Shop/src/Resources/views/products/product-add.blade.php
new file mode 100644
index 000000000..584070fbf
--- /dev/null
+++ b/packages/Webkul/Shop/src/Resources/views/products/product-add.blade.php
@@ -0,0 +1,7 @@
+
+
+ @include ('shop::products.add-to-cart', ['product' => $product])
+
+ @include ('shop::products.buy-now')
+
+
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/sharelinks.blade.php b/packages/Webkul/Shop/src/Resources/views/products/sharelinks.blade.php
index cd10d066f..c23ab4214 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/sharelinks.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/sharelinks.blade.php
@@ -1,3 +1,4 @@
-
-
-
\ No newline at end of file
+
+
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
index be56c2611..1707ffc30 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
@@ -25,6 +25,8 @@
+ @include ('shop::products.product-add')
+
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
index adca8549e..a86573466 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
@@ -5,7 +5,7 @@
- @include ('shop::products.add-to')
+ @include ('shop::products.product-add')
@push('scripts')
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index ff4d9bc37..5a38cd9c2 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -959,6 +959,14 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
line-height: 45px;
}
+.main-container-wrapper .top-toolbar .page-info span:first-child {
+ display: inline;
+}
+
+.main-container-wrapper .top-toolbar .page-info span:last-child {
+ display: none;
+}
+
.main-container-wrapper .top-toolbar .pager {
float: right;
}
@@ -991,6 +999,10 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
margin-right: 10px;
}
+.main-container-wrapper .top-toolbar .pager .view-mode .sort-filter {
+ display: none;
+}
+
.main-container-wrapper .top-toolbar .pager .sorter {
display: inline-block;
margin-right: 10px;
@@ -1745,10 +1757,216 @@ section.product-detail div.layouter form .details .attributes {
border-bottom: solid 1px rgba(162, 162, 162, 0.2);
}
+section.product-detail div.layouter form .details .attributes .cart-fav-seg {
+ display: none;
+}
+
section.product-detail div.layouter form .details .full-description {
font-size: 16px;
}
+@media all and (max-width: 480px) {
+ section.product-detail div.category-breadcrumbs {
+ display: none;
+ }
+ section.product-detail div.layouter form {
+ display: block;
+ }
+ section.product-detail div.layouter form div.product-image-group {
+ margin-right: 0px;
+ }
+ section.product-detail div.layouter form div.product-image-group div {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: column-reverse;
+ flex-direction: column-reverse;
+ }
+ section.product-detail div.layouter form div.product-image-group div .thumb-list {
+ height: 140px;
+ margin-top: 5px;
+ width: 100%;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ overflow-x: scroll;
+ }
+ section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame img {
+ height: 100%;
+ width: auto;
+ }
+ section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control {
+ display: none;
+ }
+ section.product-detail div.layouter form div.product-image-group div .product-hero-image {
+ width: 100%;
+ }
+ section.product-detail div.layouter form div.product-image-group div .product-hero-image img {
+ width: 100%;
+ }
+ section.product-detail div.layouter form div.product-image-group div .product-hero-image .whishlist-icon {
+ display: none;
+ }
+ section.product-detail div.layouter form div.product-image-group div .product-hero-image .share-icon {
+ display: none;
+ }
+ section.product-detail div.layouter form div.product-image-group .cart-fav-seg {
+ display: none;
+ }
+ section.product-detail div.layouter form .details {
+ width: 100%;
+ border-bottom: 1px solid #e8e8e8e8;
+ }
+ section.product-detail div.layouter form .details .attributes {
+ border-bottom: none;
+ }
+ section.product-detail div.layouter form .details .attributes .cart-fav-seg {
+ display: inline;
+ }
+ section.product-detail div.layouter form .details .attributes .cart-fav-seg .addtocart {
+ width: 49%;
+ background: #000000;
+ }
+ section.product-detail div.layouter form .details .attributes .cart-fav-seg .buynow {
+ width: 49%;
+ }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+ section.product-detail div.category-breadcrumbs {
+ display: none;
+ }
+ section.product-detail div.layouter form {
+ display: block;
+ }
+ section.product-detail div.layouter form div.product-image-group {
+ margin-right: 0px;
+ }
+ section.product-detail div.layouter form div.product-image-group div {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: column-reverse;
+ flex-direction: column-reverse;
+ }
+ section.product-detail div.layouter form div.product-image-group div .thumb-list {
+ height: 140px;
+ margin-top: 5px;
+ width: 100%;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ overflow-x: scroll;
+ }
+ section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame img {
+ height: 100%;
+ width: auto;
+ }
+ section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control {
+ display: none;
+ }
+ section.product-detail div.layouter form div.product-image-group div .product-hero-image {
+ width: 100%;
+ }
+ section.product-detail div.layouter form div.product-image-group div .product-hero-image img {
+ width: 100%;
+ height: 400px;
+ max-height: 400px;
+ }
+ section.product-detail div.layouter form div.product-image-group div .product-hero-image .whishlist-icon {
+ display: none;
+ }
+ section.product-detail div.layouter form div.product-image-group div .product-hero-image .share-icon {
+ display: none;
+ }
+ section.product-detail div.layouter form div.product-image-group .cart-fav-seg {
+ display: none;
+ }
+ section.product-detail div.layouter form .details {
+ width: 100%;
+ border-bottom: 1px solid #e8e8e8e8;
+ }
+ section.product-detail div.layouter form .details .attributes {
+ border-bottom: none;
+ }
+ section.product-detail div.layouter form .details .attributes .cart-fav-seg {
+ display: inline;
+ }
+ section.product-detail div.layouter form .details .attributes .cart-fav-seg .addtocart {
+ width: 49%;
+ background: #000000;
+ }
+ section.product-detail div.layouter form .details .attributes .cart-fav-seg .buynow {
+ width: 49%;
+ }
+}
+
+.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;
@@ -2013,6 +2231,30 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
margin-right: auto;
}
+@media all and (max-width: 480px) {
+ .attached-products-wrapper .title .border-bottom {
+ border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+ display: inline-block;
+ width: 100%;
+ position: initial;
+ top: 40px;
+ left: 0%;
+ margin-left: 0px;
+ }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+ .attached-products-wrapper .title .border-bottom {
+ border-bottom: 1px solid rgba(162, 162, 162, 0.2);
+ display: inline-block;
+ width: 100%;
+ position: initial;
+ top: 40px;
+ left: 0%;
+ margin-left: 0px;
+ }
+}
+
.order {
margin-left: 5.5%;
margin-top: 1%;