Layered Navigation module - with priceslider component

Description
Multiselect filters in Vue Storefront with Price Slider and active filters
We created this module to make searching the catalog a better experience, there are a lot more features to come and we’ll add these features to this module when we finished development on them.

For all information, go to the GitHub page: https://github.com/GetNoticedNL/vsf-layered-navigation

Features overview
Active filters - show the currently active filters with remove functionality
Price silder - Slidercomponent for price range
Multiple selection for filteroptions
ProductsLeftCounter - option to show the number of results if this filter option is applied (note: this is an experimental feature and works at best for a catalog list with simple products only (no child products)) - we are working on a solution to support this for product with child products also.

Author: Get_Noticed - Vue Storefront Core partner of the Netherlands

Create date: 2019-04-12

Contact: daan@getnoticed.nl

Github repo: https://github.com/GetNoticedNL/vsf-layered-navigation

5 Likes

Hi @DaanKouters - great job! Is there any demo to see it live?

3 Likes

great job… please provide a demo if available… thanks

1 Like

Hi,

the project where this module is being used / developed in, is almost ready to go live. I’ll update this thread when the project is online.

2 Likes

hi,

a demo of this module is now live at the category pages of:
https://pwa.majorrum.com

The ‘Smaak’ (flavour) filter is a multiselect attribute for example.

Kind regards!

Hi Daan,

Nice work, the demo looks slick!

Can the logic of multi-selection be adapted so that it is based on the OR operator rather than AND?

Cheers

hi @abbas, i’ll look into it and let you know :+1:

1 Like

Hi @DaanKouters. Is this module still works in vsf 1.11 version?

When I installed it, this error has occured:

WARNING in ./src/modules/layered-navigation/store/product/actions.ts 68:23-37
"export 'calculateTaxes' was not found in '@vue-storefront/core/modules/catalog/helpers'
 @ ./src/modules/layered-navigation/index.ts
 @ ./src/modules/client.ts
 @ ./core/app.ts
 @ ./core/client-entry.ts
 @ multi @babel/polyfill ./core/client-entry.ts

ERROR in ./src/modules/layered-navigation/store/product/actions.ts
Module not found: Error: Can't resolve '@vue-storefront/core/store/lib/entities' in '/home/www/vuestorefront/vue-storefront/src/modules/layered-navigation/store/product'
 @ ./src/modules/layered-navigation/store/product/actions.ts 6:0-72 106:39-52
 @ ./src/modules/layered-navigation/index.ts
 @ ./src/modules/client.ts
 @ ./core/app.ts
 @ ./core/client-entry.ts
 @ multi @babel/polyfill ./core/client-entry.ts

ERROR in /home/www/vuestorefront/vue-storefront/src/modules/client.ts
[tsl] ERROR in /home/www/vuestorefront/vue-storefront/src/modules/client.ts(42,18)
      TS2345: Argument of type '{ key: string; store: { modules: ({ key: string; module: { actions: { products(context: any, { populateAggregations, filters, searchProductQuery, current, perPage, sort, includeFields, excludeFields, configuration, append, skipCache }: { populateAggregations?: boolean; filters?: any[]; searchProductQuery: any; curre...' is not assignable to parameter of type 'StorefrontModule'.
  Type '{ key: string; store: { modules: ({ key: string; module: { actions: { products(context: any, { populateAggregations, filters, searchProductQuery, current, perPage, sort, includeFields, excludeFields, configuration, append, skipCache }: { populateAggregations?: boolean; filters?: any[]; searchProductQuery: any; curre...' provides no match for the signature '(options: { app: Vue; store: Store<RootState>; router: default; moduleConfig: any; appConfig: any; }): void'.

ERROR in /home/www/vuestorefront/vue-storefront/src/modules/layered-navigation/store/product/actions.ts
[tsl] ERROR in /home/www/vuestorefront/vue-storefront/src/modules/layered-navigation/store/product/actions.ts(3,10)
      TS2305: Module '"../../../../../core/modules/catalog/helpers"' has no exported member 'calculateTaxes'.

ERROR in /home/www/vuestorefront/vue-storefront/src/modules/layered-navigation/store/product/actions.ts
[tsl] ERROR in /home/www/vuestorefront/vue-storefront/src/modules/layered-navigation/store/product/actions.ts(5,31)
      TS2307: Cannot find module '@vue-storefront/core/store/lib/entities'.

Thanks.

hi @hawaiiden

thank you for using the module.
In the develop branch: https://github.com/GetNoticedNL/vsf-layered-navigation/tree/develop are many fixes and support for VSF v1.10.5

We are testing and making things ready to release a new version (develop to master).
After this release i will check out the compatibility for 1.11. I know that in this version many things changed for the catalog module.

1 Like

hi, we released a version vor VSF v1.11.1:

Hope it helps you out, if i can help you with anything regarding this let me know