Layered Navigation Module is returning empty result

After installation and configurationg of Layered Navigation Module, the Category query returns empty result null. Please help!

hi,

could you please post what you exactly did?
Please show your contents of src/modules/index.ts to begin with

kind regards

hi Shanice,

do you use VSF 1.9.x by any chance?
I’m assuming, we’ll update the module ASAP to be compatible with VSF 1.9 and the URL mapper. This probably causes your problem.

1 Like

If this is an issue, as for now you could disable urlDispatcher by setting the config.seo.useUrlDispatcher=false in the config/local.json

This contents of src/modules/index.ts
VSF “version”: “1.9.2”
The config.seo.useUrlDispatcher is disabled

import { extendModule } from ‘@vue-storefront/core/lib/module’
import { VueStorefrontModule } from ‘@vue-storefront/core/lib/module’
import { Catalog } from “@vue-storefront/core/modules/catalog”
import { Cart } from ‘@vue-storefront/core/modules/cart’
import { Checkout } from ‘@vue-storefront/core/modules/checkout’
import { Compare } from ‘@vue-storefront/core/modules/compare’
import { Review } from ‘@vue-storefront/core/modules/review’
import { Mailer } from ‘@vue-storefront/core/modules/mailer’
import { Wishlist } from ‘@vue-storefront/core/modules/wishlist’
import { Mailchimp } from ‘…/modules/mailchimp’
import { Notification } from ‘@vue-storefront/core/modules/notification’
import { RecentlyViewed } from ‘@vue-storefront/core/modules/recently-viewed’
import { Url } from ‘@vue-storefront/core/modules/url’
import { Homepage } from “./homepage”
import { Claims } from ‘./claims’
import { PromotedOffers } from ‘./promoted-offers’
import { Ui } from ‘./ui-store’
// import { GoogleAnalytics } from ‘./google-analytics’;
// import { Hotjar } from ‘./hotjar’;
import { AmpRenderer } from ‘./amp-renderer’;
import { PaymentBackendMethods } from ‘./payment-backend-methods’;
import { PaymentCashOnDelivery } from ‘./payment-cash-on-delivery’;
import { RawOutputExample } from ‘./raw-output-example’
import { Magento2CMS } from ‘./magento-2-cms’
import { InstantCheckout } from ‘./instant-checkout’
import { layeredNavigationModule } from ‘./layered-navigation’
extendModule(layeredNavigationModule)

export const registerModules: VueStorefrontModule[] = [
Checkout,
Catalog,
Cart,
Compare,
Review,
Mailer,
Wishlist,
Mailchimp,
Notification,
Ui,
RecentlyViewed,
Homepage,
Claims,
PromotedOffers,
Magento2CMS,
// GoogleAnalytics,
// Hotjar,
PaymentBackendMethods,
PaymentCashOnDelivery,
RawOutputExample,
AmpRenderer,
InstantCheckout,
Url,
// Example
]

This is the script of my Category.vue

hi shanice, please post it so we can take a look

Could you also tell a bit more about what you see happening in browser?

I was trying to post my script but it didn’t work, now i understand, have to remove the script tag

import Vue from ‘vue’
import Category from ‘@vue-storefront/core/pages/Category’
// import Sidebar from ‘…/components/core/blocks/Category/Sidebar.vue’
import ProductListing from ‘…/components/core/ProductListing.vue’
import Breadcrumbs from ‘…/components/core/Breadcrumbs.vue’
import SortBy from ‘…/components/core/SortBy.vue’
// import builder from ‘bodybuilder’ //
import { buildFilterProductsQueryByFilterArray } from ‘src/modules/layered-navigation/helpers/productsQueryByFilter’
import Sidebar from ‘src/modules/layered-navigation/components/Sidebar’
import ActiveFilters from ‘src/modules/layered-navigation/components/ActiveFilters’

export default {
components: {
ProductListing,
Breadcrumbs,
Sidebar,
SortBy,
ActiveFilters
},
data () {
return {
mobileFilters: false
}
},
asyncData ({ store, route }) { // this is for SSR purposes to prefetch data - and it’s always executed before parent component methods
return new Promise((resolve, reject) => {
store.dispatch(‘category/mergeSearchOptions’, { // this is just an example how can you modify the search criteria in child components
sort: ‘updated_at:desc’
// searchProductQuery: builder().query(‘range’, ‘price’, { ‘gt’: 0 }).andFilter(‘range’, ‘visibility’, { ‘gte’: 2, ‘lte’: 4 }) // this is an example on how to modify the ES query, please take a look at the @vue-storefront/core/helpers for refernce on how to build valid query
})
resolve()
})
},
preAsyncData ({ store, route }) {
store.dispatch(‘category/setSearchOptions’, {
populateAggregations: true,
store: store,
route: route,
current: 0,
perPage: store.state.config.layeredNavigation.pagePortionSize,
sort: store.state.config.entities.productList.sort,
filters: store.state.config.products.defaultFilters,
includeFields: store.state.config.entities.optimize && Vue.prototype.$isServer ? store.state.config.entities.productList.includeFields : null,
excludeFields: store.state.config.entities.optimize && Vue.prototype.$isServer ? store.state.config.entities.productList.excludeFields : null,
append: false
})
},
methods: {
openFilters () {
this.mobileFilters = true
},
closeFilters () {
this.mobileFilters = false
},
notify () {
this.$store.dispatch(‘notification/spawnNotification’, {
type: ‘error’,
message: this.$t(‘Please select the field which You like to sort by’),
action1: { label: this.$t(‘OK’) }
})
},
onFilterChanged (filterOption) {
this.pagination.current = 0
let filterData = []
let filter = filterOption.attribute_code
let OptionId = filterOption.id

  filterData = Object.assign([], this.filters.chosen[filter])

  if (filterData.filter(option => option.id === OptionId).length === 0) {
    filterData.push(filterOption)
  } else {
    let index = filterData.map((option) => option.id).indexOf(OptionId)
    if (index > -1) {
      filterData.splice(index, 1)
    }
  }
  this.filters.chosen[filter] = filterData
  let filterQr = buildFilterProductsQueryByFilterArray(this.category, this.filters.chosen)

  const filtersConfig = Object.assign({}, this.filters.chosen) // create a copy because it will be used asynchronously (take a look below)
  this.mergeSearchOptions({
    populateAggregations: false,
    searchProductQuery: filterQr,
    current: this.pagination.current,
    perPage: this.$store.state.config.layeredNavigation.pagePortionSize,
    configuration: filtersConfig,
    append: false,
    includeFields: null,
    excludeFields: null
  })
  this.$store.dispatch('category/products', this.getCurrentCategoryProductQuery).then((res) => {
  }) // because already aggregated
},
onSortOrderChanged (param) {
  this.pagination.current = 0
  if (param.attribute) {
    const filtersConfig = Object.assign({}, this.filters.chosen) // create a copy because it will be used asynchronously (take a look below)
    let filterQr = buildFilterProductsQueryByFilterArray(this.category, this.filters.chosen)
    this.mergeSearchOptions({
      sort: param.attribute,
      searchProductQuery: filterQr,
      current: this.pagination.current,
      perPage: this.$store.state.config.layeredNavigation.pagePortionSize,
      configuration: filtersConfig,
      append: false,
      includeFields: null,
      excludeFields: null
    })
    this.$store.dispatch('category/products', this.getCurrentCategoryProductQuery).then((res) => {
    })
  } else {
    this.notify()
  }
}

},
mixins: [Category]
}

inspector-console message

The alert on the browser is telling me, there are no product for this category to be synchronized. Please try it again when you are online

hi,

could you please make sure that you added also the config settings?
In the category query the module depends on the layeredNavigation.pageportionsize config setting.

@shanice do you have an update about this issue? :slightly_smiling_face:

Does the backend of Layered Navigation look like this

I am also facing the same issue, Category query returned empty result. Please help me out on this. I am using VSF 1.10.0

hi @Sathish_Lohadhas,

i can help you with this
Did you add all the proper config properties?

Yeah i have added all the config properties mentioned by you. Getting the same error

Do you use mage2vs or the magento vs-bridge indexer?

hi,

i figure this one out by running into it myself in a project.
This pops up when an attribute that is defined in defaultFilters config property in config, is actually not an attribute listed in the app state, in attribute list by code.

I have a fix ready i’ll push it asap, for now you can edit the defaultFilters config property with attributes you know for sure are available in your backend.