Breadcrumbs Filter and Component fixes

CHANGELOG.md

@@ -36,6 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use `defaultSortBy` for sorting category products by default @haelbichalex (#3873)
 - Fixed some potential mutations of Config object in `catalog` and `catalog-next` - @grimasod (#3843)
 - Set `null` as default value for custom option in product page -  @gibkigonzo (#3885)
+- Fixed Breadcrumb filters - apply to second category fetch  - @grimasod (#3887)
 - Fixed `config.storeViews.commonCache` being ignored - @grimasod (#3895)
 
 ### Changed / Improved

core/data-resolver/types/DataResolver.d.ts

@@ -17,7 +17,8 @@ declare namespace DataResolver {
     start?: number,
     sort?: string,
     includeFields?: string[],
-    excludeFields?: string[]
+    excludeFields?: string[],
+    reloadAll?: boolean
   }
 
   interface Customer {

core/modules/catalog-next/store/category/actions.ts

@@ -130,9 +130,9 @@ const actions: ActionTree<CategoryState, RootState> = {
   },
   async loadCategories ({ commit, getters }, categorySearchOptions: DataResolver.CategorySearchOptions): Promise<Category[]> {
     const searchingByIds = !(!categorySearchOptions || !categorySearchOptions.filters || !categorySearchOptions.filters.id)
-    const searchedIds: string[] = searchingByIds ? (categorySearchOptions.filters.id as string[]) : []
+    const searchedIds: string[] = searchingByIds ? ([...categorySearchOptions.filters.id] as string[]) : []
     const loadedCategories: Category[] = []
-    if (searchingByIds) { // removing from search query already loaded categories, they are added to returned results
+    if (searchingByIds && !categorySearchOptions.reloadAll) { // removing from search query already loaded categories, they are added to returned results
       for (const [categoryId, category] of Object.entries(getters.getCategoriesMap)) {
         if (searchedIds.includes(categoryId)) {
           loadedCategories.push(category as Category)
@@ -197,8 +197,8 @@ const actions: ActionTree<CategoryState, RootState> = {
   async loadCategoryBreadcrumbs ({ dispatch, getters }, { category, currentRouteName, omitCurrent = false }) {
     if (!category) return
     const categoryHierarchyIds = _prepareCategoryPathIds(category) // getters.getCategoriesHierarchyMap.find(categoryMapping => categoryMapping.includes(category.id))
-    const categoryFilters = { 'id': categoryHierarchyIds }
-    const categories = await dispatch('loadCategories', {filters: categoryFilters})
+    const categoryFilters = Object.assign({ 'id': categoryHierarchyIds }, cloneDeep(config.entities.category.breadcrumbFilterFields))
+    const categories = await dispatch('loadCategories', { filters: categoryFilters, reloadAll: Object.keys(config.entities.category.breadcrumbFilterFields).length > 0 })
     const sorted = []
     for (const id of categoryHierarchyIds) {
       const index = categories.findIndex(cat => cat.id.toString() === id)

core/modules/catalog/store/product/actions.ts

@@ -683,13 +683,16 @@ const actions: ActionTree<ProductState, RootState> = {
   },
   async loadProductBreadcrumbs ({ dispatch, rootGetters }, { product } = {}) {
     if (product && product.category_ids) {
-      let currentCategory = rootGetters['category-next/getCurrentCategory'] // use current category, if set
-      if (!currentCategory || !currentCategory.id || !product.category_ids.includes(currentCategory.id.toString())) {
-        const categoryFilters = Object.assign({ 'id': [...product.category_ids] }, cloneDeep(config.entities.category.breadcrumbFilterFields))
-        const categories = await dispatch('category-next/loadCategories', {filters: categoryFilters}, { root: true })
-        currentCategory = categories.sort((a, b) => (a.level > b.level) ? -1 : 1)[0] // sort starting by deepest level
+      const currentCategory = rootGetters['category-next/getCurrentCategory']
+      let breadcrumbCategory
+      const categoryFilters = Object.assign({ 'id': [...product.category_ids] }, cloneDeep(config.entities.category.breadcrumbFilterFields))
+      const categories = await dispatch('category-next/loadCategories', { filters: categoryFilters, reloadAll: Object.keys(config.entities.category.breadcrumbFilterFields).length > 0 }, { root: true })
+      if (currentCategory && currentCategory.id && (categories.findIndex(category => category.id === currentCategory.id) >= 0)) {
+        breadcrumbCategory = currentCategory // use current category if set and included in the filtered list
+      } else {
+        breadcrumbCategory = categories.sort((a, b) => (a.level > b.level) ? -1 : 1)[0] // sort starting by deepest level
       }
-      await dispatch('category-next/loadCategoryBreadcrumbs', { category: currentCategory, currentRouteName: product.name }, { root: true })
+      await dispatch('category-next/loadCategoryBreadcrumbs', { category: breadcrumbCategory, currentRouteName: product.name }, { root: true })
     }
   }
 }

src/themes/default/components/core/blocks/Checkout/ThankYouPage.vue

@@ -4,6 +4,7 @@
       <div class="container">
         <breadcrumbs
           :with-homepage="true"
+          :routes="[]"
           :active-route="this.$t('Order confirmation')"
         />
         <h2 class="category-title">

src/themes/default/pages/Compare.vue

@@ -2,7 +2,7 @@
   <div class="compare">
     <div class="bg-cl-secondary py35 pl20">
       <div class="container">
-        <breadcrumbs :with-homepage="true" active-route="Compare" />
+        <breadcrumbs :with-homepage="true" :routes="[]" active-route="Compare" />
         <h2>{{ title }}</h2>
       </div>
     </div>

src/themes/default/pages/MyAccount.vue

@@ -4,6 +4,7 @@
       <div class="container">
         <breadcrumbs
           :with-homepage="true"
+          :routes="[]"
           active-route="My Account"
         />
         <h1>

src/themes/default/pages/Static.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="bg-cl-secondary py35 pl20">
       <div class="container">
-        <breadcrumbs :with-homepage="true" :active-route="$props.title" />
+        <breadcrumbs :with-homepage="true" :routes="[]" :active-route="$props.title" />
         <h2 class="fs-big">
           {{ $props.title }}
         </h2>