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

product-detail

This commit is contained in:
rahul shukla 2018-09-15 15:19:58 +05:30
parent 477dded06e
commit 94eb52389e
11 changed files with 801 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/Webkul/Core/src/Core.php
View File

@ -140,8 +140,8 @@ class Core
$channel = $this->getCurrentChannel();
// $currencyCode = $channel->base_currency->code;
$currencyCode = $channel->base_currency;
$currencyCode = $channel->base_currency->code;
// $currencyCode = $channel->base_currency;
return currency($price, $currencyCode);
}

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

@ -1007,6 +1007,216 @@ section.slider-block {
}
}
// responsive category css start here
@media all and (max-width: 480px) {
.main-container-wrapper {
.layered-filter-wrapper {
display: none;
}
.main {
width: 92%;
margin-left: 4%;
}
.product-grid {
&.max-2-col {
grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) );
}
&.max-3-col {
grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) );
}
&.max-4-col {
grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) );
}
}
.product-card {
.product-name {
font-size: 12px;
}
.product-description {
font-size: 12px;
}
.product-ratings {
.total-reviews {
display: none;
}
}
.cart-fav-seg {
.addtocart {
white-space: nowrap;
font-size: 12px;
}
}
}
.top-toolbar {
border-bottom: 1px solid #E8E8E8;
margin-bottom: 10px;
.page-info {
span:first-child {
display: none;
}
span:last-child {
display: inline;
font-size: 18px;
}
}
.pager {
.view-mode {
margin-right: 0px;
a, span {
display: none;
&.grid-view {
display: none;
}
}
.sort-filter {
margin-top: 15px;
display: inline-block;
}
}
.sorter {
display: none;
}
.limiter {
display: none;
}
}
}
.bottom-toolbar {
margin-bottom: 80px;
}
}
}
@media all and (min-width: 481px) and (max-width: 920px) {
.main-container-wrapper {
.layered-filter-wrapper {
display: none;
}
.main {
width: 92%;
margin-left: 4%;
}
.product-grid {
&.max-2-col {
grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) );
}
&.max-3-col {
grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) );
}
&.max-4-col {
grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) );
}
}
.product-card {
.product-name {
font-size: 12px;
}
.product-description {
font-size: 12px;
}
.product-ratings {
.total-reviews {
display: none;
}
}
.cart-fav-seg {
.addtocart {
white-space: nowrap;
font-size: 12px;
}
}
}
.top-toolbar {
border-bottom: 1px solid #E8E8E8;
margin-bottom: 10px;
.page-info {
span:first-child {
display: none;
}
span:last-child {
display: inline;
font-size: 18px;
}
}
.pager {
.view-mode {
margin-right: 0px;
a, span {
display: none;
&.grid-view {
display: none;
}
}
.sort-filter {
margin-top: 15px;
display: inline-block;
}
}
.sorter {
display: none;
}
.limiter {
display: none;
}
}
}
.bottom-toolbar {
margin-bottom: 80px;
}
}
}
// responsive category css end here
.product-price {
font-size: 16px;
margin-bottom: 14px;
@ -1395,12 +1605,27 @@ section.product-detail {
width: 480px;
max-height: 480px;
.whishlist-icon {
margin-top: -475px;
float: right;
margin-right: 10px;
}
.share-icon {
margin-top: -475px;
float: right;
margin-right: 40px;
}
.wishlist {
position: absolute;
top: 10px;
right: 12px;
}
.share {
position: absolute;
top: 10px;
@ -1411,7 +1636,17 @@ section.product-detail {
.cart-fav-seg {
display: block;
float: right;
margin-top: 10px;
.addtocart {
width: 295px;
background: black;
}
.buynow {
width: 295px;
float: right;
}
}
}
@ -1581,6 +1816,201 @@ section.product-detail {
}
}
// product page responsive css start here
@media all and (max-width: 480px) {
section.product-detail {
font-size: 16px;
color: $product-font-color;
div.category-breadcrumbs {
display: inline;
}
div.layouter {
display: block;
margin-top: 20px;
margin-bottom: 20px;
form {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
div.product-image-group {
margin-right: 36px;
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 {
width: 50%;
.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 {
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;
}
}
}
}
}
}
// product page responsive css end here
// .rating-reviews {
// .rating-header {

12
packages/Webkul/Shop/src/Resources/assets/sass/icons.scss vendored
View File

@ -21,4 +21,16 @@
background-image:URL('../images/icon-list-view.svg');
width: 24px;
height: 24px;
}
.whishlist-icon {
background-image:URL('../images/wishlist.svg');
width: 24px;
height: 24px;
}
.share-icon {
background-image:URL('../images/icon-share.svg');
width: 24px;
height: 24px;
}

2
packages/Webkul/Shop/src/Resources/views/products/add-to-cart.blade.php
View File

@ -1 +1 @@
<button class="btn btn-lg btn-primary addtocart">Add to Cart</button>
<button class="btn btn-lg btn-primary addtocart">ADD TO CART</button>

8
packages/Webkul/Shop/src/Resources/views/products/add-to.blade.php
View File

@ -1,7 +1,9 @@
<div class="cart-fav-seg">
@include ('shop::products.add-to-cart', ['product' => $product])
<span><img src="{{ bagisto_asset('images/wishlist.svg') }}" /></span>
@include ('shop::products.buy-now')
{{-- <span><img src="{{ bagisto_asset('images/wishlist.svg') }}" /></span> --}}
</div>

1
packages/Webkul/Shop/src/Resources/views/products/buy-now.blade.php Normal file
View File

@ -0,0 +1 @@
<button class="btn btn-lg btn-primary buynow">BUY NOW!</button>

3
packages/Webkul/Shop/src/Resources/views/products/sharelinks.blade.php Normal file
View File

@ -0,0 +1,3 @@
<a href="#">
<div class="icon share-icon"> </div>
</a>

4
packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
View File

@ -32,6 +32,10 @@
<img :src="currentLargeImageUrl" />
<div class="icon whishlist-icon"> </div>
@include ('shop::products.sharelinks')
</div>
</div>

338
public/themes/default/assets/css/shop.css vendored
View File

@ -23,6 +23,18 @@
height: 24px;
}
.whishlist-icon {
background-image: URL("../images/wishlist.svg");
width: 24px;
height: 24px;
}
.share-icon {
background-image: URL("../images/icon-share.svg");
width: 24px;
height: 24px;
}
body {
margin: 0;
padding: 0;
@ -1057,6 +1069,136 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
width: 100%;
}
@media all and (max-width: 480px) {
.main-container-wrapper .layered-filter-wrapper {
display: none;
}
.main-container-wrapper .main {
width: 92%;
margin-left: 4%;
}
.main-container-wrapper .product-grid.max-2-col {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.main-container-wrapper .product-grid.max-3-col {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.main-container-wrapper .product-grid.max-4-col {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.main-container-wrapper .product-card .product-name {
font-size: 12px;
}
.main-container-wrapper .product-card .product-description {
font-size: 12px;
}
.main-container-wrapper .product-card .product-ratings .total-reviews {
display: none;
}
.main-container-wrapper .product-card .cart-fav-seg .addtocart {
white-space: nowrap;
font-size: 12px;
}
.main-container-wrapper .top-toolbar {
border-bottom: 1px solid #E8E8E8;
margin-bottom: 10px;
}
.main-container-wrapper .top-toolbar .page-info span:first-child {
display: none;
}
.main-container-wrapper .top-toolbar .page-info span:last-child {
display: inline;
font-size: 18px;
}
.main-container-wrapper .top-toolbar .pager .view-mode {
margin-right: 0px;
}
.main-container-wrapper .top-toolbar .pager .view-mode a, .main-container-wrapper .top-toolbar .pager .view-mode span {
display: none;
}
.main-container-wrapper .top-toolbar .pager .view-mode a.grid-view, .main-container-wrapper .top-toolbar .pager .view-mode span.grid-view {
display: none;
}
.main-container-wrapper .top-toolbar .pager .view-mode .sort-filter {
margin-top: 15px;
display: inline-block;
}
.main-container-wrapper .top-toolbar .pager .sorter {
display: none;
}
.main-container-wrapper .top-toolbar .pager .limiter {
display: none;
}
.main-container-wrapper .bottom-toolbar {
margin-bottom: 80px;
}
}
@media all and (min-width: 481px) and (max-width: 920px) {
.main-container-wrapper .layered-filter-wrapper {
display: none;
}
.main-container-wrapper .main {
width: 92%;
margin-left: 4%;
}
.main-container-wrapper .product-grid.max-2-col {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.main-container-wrapper .product-grid.max-3-col {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.main-container-wrapper .product-grid.max-4-col {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.main-container-wrapper .product-card .product-name {
font-size: 12px;
}
.main-container-wrapper .product-card .product-description {
font-size: 12px;
}
.main-container-wrapper .product-card .product-ratings .total-reviews {
display: none;
}
.main-container-wrapper .product-card .cart-fav-seg .addtocart {
white-space: nowrap;
font-size: 12px;
}
.main-container-wrapper .top-toolbar {
border-bottom: 1px solid #E8E8E8;
margin-bottom: 10px;
}
.main-container-wrapper .top-toolbar .page-info span:first-child {
display: none;
}
.main-container-wrapper .top-toolbar .page-info span:last-child {
display: inline;
font-size: 18px;
}
.main-container-wrapper .top-toolbar .pager .view-mode {
margin-right: 0px;
}
.main-container-wrapper .top-toolbar .pager .view-mode a, .main-container-wrapper .top-toolbar .pager .view-mode span {
display: none;
}
.main-container-wrapper .top-toolbar .pager .view-mode a.grid-view, .main-container-wrapper .top-toolbar .pager .view-mode span.grid-view {
display: none;
}
.main-container-wrapper .top-toolbar .pager .view-mode .sort-filter {
margin-top: 15px;
display: inline-block;
}
.main-container-wrapper .top-toolbar .pager .sorter {
display: none;
}
.main-container-wrapper .top-toolbar .pager .limiter {
display: none;
}
.main-container-wrapper .bottom-toolbar {
margin-bottom: 80px;
}
}
.product-price {
font-size: 16px;
margin-bottom: 14px;
@ -1484,6 +1626,18 @@ section.product-detail div.layouter form div.product-image-group div .product-he
max-height: 480px;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image .whishlist-icon {
margin-top: -475px;
float: right;
margin-right: 10px;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image .share-icon {
margin-top: -475px;
float: right;
margin-right: 40px;
}
section.product-detail div.layouter form div.product-image-group div .product-hero-image .wishlist {
position: absolute;
top: 10px;
@ -1498,6 +1652,16 @@ section.product-detail div.layouter form div.product-image-group div .product-he
section.product-detail div.layouter form div.product-image-group .cart-fav-seg {
display: block;
margin-top: 10px;
}
section.product-detail div.layouter form div.product-image-group .cart-fav-seg .addtocart {
width: 295px;
background: black;
}
section.product-detail div.layouter form div.product-image-group .cart-fav-seg .buynow {
width: 295px;
float: right;
}
@ -1573,6 +1737,180 @@ section.product-detail div.layouter form .details .full-description {
font-size: 16px;
}
@media all and (max-width: 480px) {
section.product-detail {
font-size: 16px;
color: #242424;
}
section.product-detail div.category-breadcrumbs {
display: inline;
}
section.product-detail div.layouter {
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
section.product-detail div.layouter form {
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-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
}
section.product-detail div.layouter form div.product-image-group {
margin-right: 36px;
}
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 form div.product-image-group div .thumb-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-right: 4px;
height: 480px;
width: 120px;
overflow: hidden;
position: relative;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame {
border: 2px solid transparent;
background: #F2F2F2;
max-width: 120px;
width: auto;
height: 120px;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .thumb-frame.active {
border-color: #979797;
}
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 form div.product-image-group div .thumb-list .gallery-control {
width: 100%;
position: absolute;
text-align: center;
cursor: pointer;
z-index: 1;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control .overlay {
opacity: 0.3;
background: #000000;
width: 100%;
height: 18px;
position: absolute;
left: 0;
z-index: -1;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control .icon {
z-index: 2;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control.top {
top: 0;
}
section.product-detail div.layouter form div.product-image-group div .thumb-list .gallery-control.bottom {
bottom: 0;
}
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;
}
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 form div.product-image-group div .product-hero-image .share {
position: absolute;
top: 10px;
right: 45px;
}
section.product-detail div.layouter form div.product-image-group .cart-fav-seg {
display: block;
float: right;
}
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 form .details .product-ratings {
margin-bottom: 20px;
}
section.product-detail div.layouter form .details .product-ratings .icon {
width: 16px;
height: 16px;
}
section.product-detail div.layouter form .details .product-ratings .total-reviews {
display: inline-block;
margin-left: 15px;
}
section.product-detail div.layouter form .details .product-heading {
font-size: 24px;
color: #242424;
margin-bottom: 15px;
}
section.product-detail div.layouter form .details .product-price {
margin-bottom: 15px;
font-size: 24px;
}
section.product-detail div.layouter form .details .product-price .special-price {
font-size: 24px;
}
section.product-detail div.layouter form .details .stock-status {
margin-bottom: 15px;
}
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 form .details .full-specifications td {
padding: 10px 0;
color: #5E5E5E;
}
section.product-detail div.layouter form .details .full-specifications td:first-child {
padding-right: 40px;
}
section.product-detail div.layouter form .details .accordian .accordian-header {
font-size: 16px;
padding-left: 0;
font-weight: 600;
}
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 form .details .full-description {
font-size: 16px;
}
}
/* cart pages and elements css begins here */
section.cart {
color: #242424;

6
public/themes/default/assets/js/shop.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/themes/default/assets/mix-manifest.json
View File

@ -1,4 +1,4 @@
{
"/js/shop.js": "/js/shop.js",
"/css/shop.css": "/css/shop.css"
}
}