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

Merge pull request #5711 from devansh-webkul/layered-navigation-without-category 

Layered Navigation With And Without Category Handled
This commit is contained in:
Jitendra Singh 2022-01-28 17:12:39 +05:30 committed by GitHub
parent 710e1515fd 39836f9a7b
commit db4047179a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/Webkul/Shop/src/Http/Controllers/ProductController.php
View File

@ -3,6 +3,7 @@
namespace Webkul\Shop\Http\Controllers;
use Illuminate\Support\Facades\Storage;
use Webkul\Attribute\Repositories\AttributeRepository;
use Webkul\Category\Repositories\CategoryRepository;
use Webkul\Product\Repositories\ProductAttributeValueRepository;
use Webkul\Product\Repositories\ProductDownloadableLinkRepository;
@ -158,18 +159,20 @@ class ProductController extends Controller
*
* @return \Illuminate\Http\Response
*/
public function getFilterAttributes($categoryId)
public function getFilterAttributes($categoryId = null, AttributeRepository $attributeRepository)
{
$category = $this->categoryRepository->find($categoryId);
$filterAttributes = [];
if ($category) {
return response()->json([
'filter_attributes' => $this->productFlatRepository->getFilterAttributes($category)
]);
if ($category = $this->categoryRepository->find($categoryId)) {
$filterAttributes = $this->productFlatRepository->getFilterAttributes($category);
}
if (! count($filterAttributes) > 0) {
$filterAttributes = $attributeRepository->getFilterAttributes();
}
return response()->json([
'filter_attributes' => []
'filter_attributes' => $filterAttributes,
]);
}
@ -178,18 +181,16 @@ class ProductController extends Controller
*
* @return \Illuminate\Http\Response
*/
public function getCategoryProductMaximumPrice($categoryId)
public function getCategoryProductMaximumPrice($categoryId = null)
{
$category = $this->categoryRepository->find($categoryId);
$maxPrice = 0;
if ($category) {
return response()->json([
'max_price' => $this->productFlatRepository->handleCategoryProductMaximumPrice($category)
]);
if ($category = $this->categoryRepository->find($categoryId)) {
$maxPrice = $this->productFlatRepository->handleCategoryProductMaximumPrice($category);
}
return response()->json([
'max_price' => 0
'max_price' => $maxPrice,
]);
}
}

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

@ -1,7 +1,10 @@
<div class="layered-filter-wrapper">
{!! view_render_event('bagisto.shop.products.list.layered-nagigation.before') !!}
<layered-navigation></layered-navigation>
<layered-navigation
attribute-src="{{ route('admin.catalog.products.get-filter-attributes', $category->id ?? null) }}"
max-price-src="{{ route('admin.catalog.products.get-category-product-maximum-price', $category->id ?? null) }}">
</layered-navigation>
{!! view_render_event('bagisto.shop.products.list.layered-nagigation.after') !!}
</div>
@ -21,6 +24,7 @@
:index="index"
:attribute="attribute"
:appliedFilterValues="appliedFilters[attribute.code]"
:max-price-src="maxPriceSrc"
@onFilterAdded="addFilters(attribute.code, $event)">
</filter-attribute-item>
</div>
@ -46,7 +50,12 @@
<ol class="items" v-if="attribute.type != 'price'">
<li class="item" v-for='(option, index) in attribute.options'>
<span class="checkbox">
<input type="checkbox" :id="option.id" v-bind:value="option.id" v-model="appliedFilters" @change="addFilter($event)"/>
<input
:id="option.id"
type="checkbox"
v-bind:value="option.id"
v-model="appliedFilters"
@change="addFilter($event)"/>
<label class="checkbox-view" :for="option.id"></label>
@ -74,11 +83,16 @@
Vue.component('layered-navigation', {
template: '#layered-navigation-template',
props: [
'attributeSrc',
'maxPriceSrc',
],
data: function() {
return {
appliedFilters: {},
attributes: [],
}
};
},
created: function () {
@ -90,7 +104,7 @@
methods: {
setFilterAttributes: function () {
axios
.get('{{ route('admin.catalog.products.get-filter-attributes', $category->id) }}')
.get(this.attributeSrc)
.then((response) => {
this.attributes = response.data.filter_attributes;
});
@ -111,7 +125,7 @@
delete this.appliedFilters[attributeCode];
}
this.applyFilter()
this.applyFilter();
},
applyFilter: function () {
@ -119,7 +133,7 @@
for(key in this.appliedFilters) {
if (key != 'page') {
params.push(key + '=' + this.appliedFilters[key].join(','))
params.push(key + '=' + this.appliedFilters[key].join(','));
}
}
@ -131,7 +145,12 @@
Vue.component('filter-attribute-item', {
template: '#filter-attribute-item-template',
props: ['index', 'attribute', 'appliedFilterValues'],
props: [
'index',
'attribute',
'appliedFilterValues',
'maxPriceSrc',
],
data: function() {
return {
@ -170,7 +189,7 @@
methods: {
setMaxPrice: function () {
axios
.get('{{ route('admin.catalog.products.get-category-product-maximum-price', $category->id) }}')
.get(this.maxPriceSrc)
.then((response) => {
let maxPrice = response.data.max_price;
@ -179,13 +198,13 @@
},
addFilter: function (e) {
this.$emit('onFilterAdded', this.appliedFilters)
this.$emit('onFilterAdded', this.appliedFilters);
},
priceRangeUpdated: function (value) {
this.appliedFilters = value;
this.$emit('onFilterAdded', this.appliedFilters)
this.$emit('onFilterAdded', this.appliedFilters);
},
clearFilters: function () {
@ -195,7 +214,7 @@
this.appliedFilters = [];
this.$emit('onFilterAdded', this.appliedFilters)
this.$emit('onFilterAdded', this.appliedFilters);
}
}
});

20
packages/Webkul/Shop/src/Routes/store-front-routes.php
View File

@ -29,8 +29,8 @@ Route::group(['middleware' => ['web', 'locale', 'theme', 'currency']], function
*/
Route::fallback(\Webkul\Shop\Http\Controllers\ProductsCategoriesProxyController::class . '@index')
->defaults('_config', [
'product_view' => 'shop::products.view',
'category_view' => 'shop::products.index'
'product_view' => 'shop::products.view',
'category_view' => 'shop::products.index',
])
->name('shop.productOrCategory.index');
});
@ -39,14 +39,14 @@ Route::group(['middleware' => ['web', 'locale', 'theme', 'currency']], function
* Store front home.
*/
Route::get('/', [HomeController::class, 'index'])->defaults('_config', [
'view' => 'shop::home.index'
'view' => 'shop::home.index',
])->name('shop.home.index');
/**
* Store front search.
*/
Route::get('/search', [SearchController::class, 'index'])->defaults('_config', [
'view' => 'shop::search.search'
'view' => 'shop::search.search',
])->name('shop.search.index');
Route::post('/upload-search-image', [HomeController::class, 'upload'])->name('shop.image.search.upload');
@ -62,24 +62,24 @@ Route::group(['middleware' => ['web', 'locale', 'theme', 'currency']], function
* Product and categories routes.
*/
Route::get('/reviews/{slug}', [ReviewController::class, 'show'])->defaults('_config', [
'view' => 'shop::products.reviews.index'
'view' => 'shop::products.reviews.index',
])->name('shop.reviews.index');
Route::get('/product/{slug}/review', [ReviewController::class, 'create'])->defaults('_config', [
'view' => 'shop::products.reviews.create'
'view' => 'shop::products.reviews.create',
])->name('shop.reviews.create');
Route::post('/product/{slug}/review', [ReviewController::class, 'store'])->defaults('_config', [
'redirect' => 'shop.home.index'
'redirect' => 'shop.home.index',
])->name('shop.reviews.store');
Route::get('/downloadable/download-sample/{type}/{id}', [ProductController::class, 'downloadSample'])->name('shop.downloadable.download_sample');
Route::get('/product/{id}/{attribute_id}', [ProductController::class, 'download'])->defaults('_config', [
'view' => 'shop.products.index'
'view' => 'shop.products.index',
])->name('shop.product.file.download');
Route::get('products/get-filter-attributes/{categoryId}', [ProductController::class, 'getFilterAttributes'])->name('admin.catalog.products.get-filter-attributes');
Route::get('products/get-filter-attributes/{categoryId?}', [ProductController::class, 'getFilterAttributes'])->name('admin.catalog.products.get-filter-attributes');
Route::get('products/get-category-product-maximum-price/{categoryId}', [ProductController::class, 'getCategoryProductMaximumPrice'])->name('admin.catalog.products.get-category-product-maximum-price');
Route::get('products/get-category-product-maximum-price/{categoryId?}', [ProductController::class, 'getCategoryProductMaximumPrice'])->name('admin.catalog.products.get-category-product-maximum-price');
});

28
packages/Webkul/Velocity/src/Resources/views/shop/products/list/layered-navigation.blade.php
View File

@ -1,7 +1,10 @@
<div class="layered-filter-wrapper left">
{!! view_render_event('bagisto.shop.products.list.layered-nagigation.before') !!}
<layered-navigation></layered-navigation>
<layered-navigation
attribute-src="{{ route('admin.catalog.products.get-filter-attributes', $category->id ?? null) }}"
max-price-src="{{ route('admin.catalog.products.get-category-product-maximum-price', $category->id ?? null) }}">
</layered-navigation>
{!! view_render_event('bagisto.shop.products.list.layered-nagigation.after') !!}
</div>
@ -22,6 +25,7 @@
:index="index"
:attribute="attribute"
:appliedFilterValues="appliedFilters[attribute.code]"
:max-price-src="maxPriceSrc"
@onFilterAdded="addFilters(attribute.code, $event)">
</filter-attribute-item>
</div>
@ -99,6 +103,11 @@
Vue.component('layered-navigation', {
template: '#layered-navigation-template',
props: [
'attributeSrc',
'maxPriceSrc',
],
data: function() {
return {
appliedFilters: {},
@ -115,7 +124,7 @@
methods: {
setFilterAttributes: function () {
axios
.get('{{ route('admin.catalog.products.get-filter-attributes', $category->id) }}')
.get(this.attributeSrc)
.then((response) => {
this.attributes = response.data.filter_attributes;
});
@ -144,7 +153,7 @@
for (key in this.appliedFilters) {
if (key != 'page') {
params.push(key + '=' + this.appliedFilters[key].join(','))
params.push(key + '=' + this.appliedFilters[key].join(','));
}
}
@ -161,6 +170,7 @@
'attribute',
'addFilters',
'appliedFilterValues',
'maxPriceSrc',
],
data: function() {
@ -204,21 +214,21 @@
methods: {
setMaxPrice: function () {
axios
.get('{{ route('admin.catalog.products.get-category-product-maximum-price', $category->id) }}')
.get(this.maxPriceSrc)
.then((response) => {
let maxPrice = response.data.max_price;
this.sliderConfig.max = maxPrice ? ((parseInt(maxPrice) !== 0 || maxPrice) ? parseInt(maxPrice) : 500) : 500;
});
},
addFilter: function (e) {
this.$emit('onFilterAdded', this.appliedFilters)
this.$emit('onFilterAdded', this.appliedFilters);
},
priceRangeUpdated: function (value) {
this.appliedFilters = value;
this.$emit('onFilterAdded', this.appliedFilters)
this.$emit('onFilterAdded', this.appliedFilters);
},
clearFilters: function () {
@ -228,7 +238,7 @@
this.appliedFilters = [];
this.$emit('onFilterAdded', this.appliedFilters)
this.$emit('onFilterAdded', this.appliedFilters);
},
optionClicked: function (id, {target}) {
@ -255,4 +265,4 @@
}
});
</script>
@endpush
@endpush