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

filter & sort

This commit is contained in:
rahul shukla 2018-09-25 19:14:46 +05:30
parent 3c9153be87
commit 3b29f8d501
9 changed files with 255 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -774,8 +774,9 @@ section.slider-block {
margin-right: auto;
.content-container {
display: inline-block;
display: flex;
width: 100%;
flex-direction: row;
}
.product-grid {
@ -947,6 +948,10 @@ section.slider-block {
}
}
.reponsive-sorter-limiter {
display: none;
}
.bottom-toolbar {
display: block;
margin-top: 40px;
@ -1028,6 +1033,10 @@ section.slider-block {
.main-container-wrapper {
.content-container {
flex-direction: column-reverse;
}
.layered-filter-wrapper {
display: none;
}
@ -1112,6 +1121,19 @@ section.slider-block {
}
}
.reponsive-sorter-limiter {
display: none;
select {
background: #FFFFFF;
border: 1px solid #C7C7C7;
border-radius: 3px;
font-size: 16px;
color: $font-color;
padding: 10px;
}
}
.bottom-toolbar {
margin-bottom: 80px;
}
@ -1122,6 +1144,10 @@ section.slider-block {
.main-container-wrapper {
.content-container {
flex-direction: column-reverse;
}
.layered-filter-wrapper {
display: none;
}
@ -1206,6 +1232,19 @@ section.slider-block {
}
}
.reponsive-sorter-limiter {
display: none;
select {
background: #FFFFFF;
border: 1px solid #C7C7C7;
border-radius: 3px;
font-size: 16px;
color: $font-color;
padding: 10px;
}
}
.bottom-toolbar {
margin-bottom: 80px;
}
@ -1721,10 +1760,6 @@ section.product-detail {
display: block;
width: 100%;
border-bottom: solid 1px rgba(162, 162, 162, 0.2);
.cart-fav-seg {
display: none;
}
}
.full-description {
@ -1869,48 +1904,23 @@ section.product-detail {
img {
width: 100%;
}
.whishlist-icon {
display: none;
}
.share-icon {
display: none;
}
}
}
.cart-fav-seg {
display: none;
}
}
.details {
width: 100%;
margin-top: 20px;
border-bottom: 1px solid #e8e8e8e8;
.attributes {
border-bottom: none;
.cart-fav-seg {
display: inline;
.addtocart {
width: 49%;
background: #000000;
border-radius: 0px;
}
.buynow {
width: 49%;
border-radius: 0px;
}
}
}
}
}
}
}
}
@media all and (min-width: 481px) and (max-width: 920px) {
@ -1957,51 +1967,24 @@ section.product-detail {
img {
width: 100%;
height: 400px;
max-height: 400px;
}
.whishlist-icon {
display: none;
}
.share-icon {
display: none;
}
}
}
.cart-fav-seg {
display: none;
}
}
.details {
width: 100%;
margin-top: 20px;
border-bottom: 1px solid #e8e8e8e8;
.attributes {
border-bottom: none;
.cart-fav-seg {
display: inline;
.addtocart {
width: 49%;
background: #000000;
border-radius: 0px;
}
.buynow {
width: 49%;
border-radius: 0px;
}
}
}
}
}
}
}
}
// products responsive css end here

8
packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
View File

@ -147,14 +147,8 @@
</div>
</div>
<div class="header-bottom">
<div class="header-bottom" id="header-bottom">
@include('shop::layouts.header.nav-menu.navmenu')
</div>
</div>
@push('scripts')
<script>
</script>
@endpush

77
packages/Webkul/Shop/src/Resources/views/products/index.blade.php
View File

@ -51,6 +51,83 @@
<script>
window.onload = function() {
var sort = document.getElementById("sort");
var filter = document.getElementById("filter");
sort.addEventListener("click", myFunction);
filter.addEventListener("click", myFunction);
function myFunction(){
let className = document.getElementById(this.id).className;
var productGrid = document.getElementsByClassName('product-grid max-3-col');
var filterLayered = document.getElementsByClassName('layered-filter-wrapper');
var sortLimiter = document.getElementsByClassName('reponsive-sorter-limiter');
if(className === 'icon filter-icon'){
for(let i=0 ; i < filterLayered.length ; i++){
filterLayered[i].style.display="block";
filterLayered[i].style.padding="20px";
filterLayered[i].style.width="100%";
filterLayered[i].style.marginTop = "-100px";
}
for(let i=0 ; i < productGrid.length ; i++){
productGrid[i].style.display = "none";
}
for(let i=0 ; i < sortLimiter.length ; i++){
sortLimiter[i].style.display = "none";
}
filter.classList.remove('icon', 'filter-icon');
filter.classList.add('icon', 'cross-icon');
sort.classList.remove('icon', 'cross-icon');
sort.classList.remove('icon', 'sort-icon');
sort.classList.add('icon', 'sort-icon');
}else if(className === 'icon sort-icon'){
for(let i=0 ; i < filterLayered.length ; i++){
filterLayered[i].style.display="none";
}
for(let i=0 ; i < productGrid.length ; i++){
productGrid[i].style.display = "none";
}
for(let i=0 ; i < sortLimiter.length ; i++){
sortLimiter[i].style.display = "flex";
sortLimiter[i].style.justifyContent = "space-between";
}
sort.classList.remove('icon', 'sort-icon');
sort.classList.add('icon', 'cross-icon');
filter.classList.remove('icon', 'cross-icon');
filter.classList.remove('icon', 'filter-icon');
filter.classList.add('icon', 'filter-icon');
}else {
for(let i=0 ; i < productGrid.length ; i++){
productGrid[i].style.display = "grid";
}
for(let i=0 ; i < filterLayered.length ; i++){
filterLayered[i].style.display="none";
}
for(let i=0 ; i < sortLimiter.length ; i++){
sortLimiter[i].style.display = "none";
}
sort.classList.remove('icon', 'cross-icon');
filter.classList.remove('icon', 'cross-icon');
sort.classList.remove('icon', 'sort-icon');
filter.classList.remove('icon', 'filter-icon');
sort.classList.add('icon', 'sort-icon');
filter.classList.add('icon', 'filter-icon');
}
}
}
</script>
@endpush

16
packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php
View File

@ -3,13 +3,13 @@
<div class="layered-filter-wrapper">
<layered-navigation></layered-navigation>
</div>
@push('scripts')
<script type="text/x-template" id="layered-navigation-template">
<div>
<div class="filter-title">
{{ __('shop::app.products.layered-nav-title') }}
</div>
@ -17,7 +17,7 @@
<div class="filter-content">
<div class="filter-attributes">
<filter-attribute-item v-for='(attribute, index) in attributes' :attribute="attribute" :key="index" :index="index" @onFilterAdded="addFilters(attribute.code, $event)" :appliedFilterValues="appliedFilters[attribute.code]">
</filter-attribute-item>
@ -58,7 +58,7 @@
</ol>
<div class="price-range-wrapper" v-if="attribute.type == 'price'">
<vue-slider
<vue-slider
ref="slider"
v-model="sliderConfig.value"
:process-style="sliderConfig.processStyle"
@ -86,9 +86,9 @@
created () {
var urlParams = new URLSearchParams(window.location.search);
var entries = urlParams.entries();
for(pair of entries) {
this.appliedFilters[pair[0]] = pair[1].split(',');
}
@ -99,7 +99,7 @@
if(filters.length) {
this.appliedFilters[attributeCode] = filters;
} else {
delete this.appliedFilters[attributeCode];
delete this.appliedFilters[attributeCode];
}
this.applyFilter()
@ -107,7 +107,7 @@
applyFilter () {
var params = [];
for(key in this.appliedFilters) {
params.push(key + '=' + this.appliedFilters[key].join(','))
}

41
packages/Webkul/Shop/src/Resources/views/products/list/toolbar.blade.php
View File

@ -35,9 +35,9 @@
<div class="sort-filter">
<i class="icon sort-icon"></i>
<i class="icon sort-icon" id="sort" ></i>
<i class="icon filter-icon"></i>
<i class="icon filter-icon" id="filter"></i>
</div>
@ -77,4 +77,41 @@
</div>
</div>
<div class="reponsive-sorter-limiter">
<div class="sorter">
<label>{{ __('shop::app.products.sort-by') }}</label>
<select onchange="window.location.href = this.value">
@foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
<option value="{{ $toolbarHelper->getOrderUrl($key) }}" {{ $toolbarHelper->isOrderCurrent($key) ? 'selected' : '' }}>
{{ __('shop::app.products.' . $order) }}
</option>
@endforeach
</select>
</div>
<div class="limiter">
<label>{{ __('shop::app.products.show') }}</label>
<select onchange="window.location.href = this.value">
@foreach ($toolbarHelper->getAvailableLimits() as $limit)
<option value="{{ $toolbarHelper->getLimitUrl($limit) }}" {{ $toolbarHelper->isLimitCurrent($limit) ? 'selected' : '' }}>
{{ $limit }}
</option>
@endforeach
</select>
</div>
</div>

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

@ -78,4 +78,42 @@
@endsection
<style>
.header {
position: sticky;
top: 16px;
}
</style>
@push('scripts')
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var scrollTop = window.pageYOffset
var elems = document.getElementById("header-bottom");
if(scrollTop > 200){
elems.style.display = "none";
}else {
elems.style.display = "block";
}
console.log(scrollTop);
}
</script>
@endpush

2
packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
View File

@ -38,8 +38,6 @@
</span>
</div>
@include ('shop::products.product-add')
</div>
</script>

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

@ -851,8 +851,14 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
}
.main-container-wrapper .content-container {
display: inline-block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.main-container-wrapper .product-grid {
@ -1024,6 +1030,10 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
display: inline-block;
}
.main-container-wrapper .reponsive-sorter-limiter {
display: none;
}
.main-container-wrapper .bottom-toolbar {
display: block;
margin-top: 40px;
@ -1106,6 +1116,12 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
}
@media all and (max-width: 480px) {
.main-container-wrapper .content-container {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.main-container-wrapper .layered-filter-wrapper {
display: none;
}
@ -1158,12 +1174,29 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
.main-container-wrapper .top-toolbar .pager .limiter {
display: none;
}
.main-container-wrapper .reponsive-sorter-limiter {
display: none;
}
.main-container-wrapper .reponsive-sorter-limiter select {
background: #FFFFFF;
border: 1px solid #C7C7C7;
border-radius: 3px;
font-size: 16px;
color: #242424;
padding: 10px;
}
.main-container-wrapper .bottom-toolbar {
margin-bottom: 80px;
}
}
@media all and (min-width: 481px) and (max-width: 920px) {
.main-container-wrapper .content-container {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.main-container-wrapper .layered-filter-wrapper {
display: none;
}
@ -1216,6 +1249,17 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
.main-container-wrapper .top-toolbar .pager .limiter {
display: none;
}
.main-container-wrapper .reponsive-sorter-limiter {
display: none;
}
.main-container-wrapper .reponsive-sorter-limiter select {
background: #FFFFFF;
border: 1px solid #C7C7C7;
border-radius: 3px;
font-size: 16px;
color: #242424;
padding: 10px;
}
.main-container-wrapper .bottom-toolbar {
margin-bottom: 80px;
}
@ -1764,10 +1808,6 @@ 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;
}
@ -1811,34 +1851,14 @@ section.product-detail div.layouter form .details .full-description {
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%;
margin-top: 20px;
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;
border-radius: 0px;
}
section.product-detail div.layouter form .details .attributes .cart-fav-seg .buynow {
width: 49%;
border-radius: 0px;
}
}
@media all and (min-width: 481px) and (max-width: 920px) {
@ -1879,37 +1899,15 @@ section.product-detail div.layouter form .details .full-description {
}
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%;
margin-top: 20px;
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;
border-radius: 0px;
}
section.product-detail div.layouter form .details .attributes .cart-fav-seg .buynow {
width: 49%;
border-radius: 0px;
}
}
.rating-reviews .rating-header {