feat: show category title below breadcrumbs

M2-427
vuestorefront · Apr 20, 2022 · 9b46174 · 9b46174
1 parent ade286a
commit 9b46174
Showing 1 changed file with 29 additions and 7 deletions.
diff --git a/packages/theme/modules/catalog/pages/category.vue b/packages/theme/modules/catalog/pages/category.vue
@@ -5,9 +5,14 @@
       :content="cmsContent"
     />
     <CategoryBreadcrumbs
-      v-bind="{ categoryAncestors }"
+      :category-ancestors="categoryAncestorsWithoutActiveCategory"
       class="breadcrumbs"
     />
+    <SfHeading
+      :level="2"
+      :title="activeCategoryLabel"
+      class="category-title"
+    />
     <CategoryNavbar
       v-if="isShowProducts"
       :sort-by="sortBy"
@@ -218,6 +223,7 @@ import {
   SfProperty,
   SfSelect,
   SfPrice,
+  SfHeading,
 } from '@storefront-ui/vue';
 import {
   computed,
@@ -244,9 +250,9 @@ import { useCategoryContent } from '~/modules/catalog/category/components/cms/us
 import { usePrice } from '~/modules/catalog/pricing/usePrice';
 import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
 import CategoryNavbar from '~/modules/catalog/category/components/navbar/CategoryNavbar.vue';
+import type { ProductInterface, EntityUrl } from '~/modules/GraphQL/types';
 import CategoryBreadcrumbs from '../category/components/breadcrumbs/CategoryBreadcrumbs.vue';
 import { useCategoryLogic } from '../category/helpers';
-import type { ProductInterface, EntityUrl } from '~/modules/GraphQL/types';
 // TODO(addToCart qty, horizontal): https://github.com/vuestorefront/storefront-ui/issues/1606
 export default defineComponent({
   name: 'CategoryPage',
@@ -266,6 +272,7 @@ export default defineComponent({
     SfSelect,
     SfProperty,
     LazyHydrate,
+    SfHeading,
   },
   transition: 'fade',
   setup() {
@@ -311,7 +318,12 @@ export default defineComponent({
       });
     };
 
-    const { categoryAncestors, isCategoryTreeLoaded, loadCategoryTree } = useCategoryLogic();
+    const {
+      categoryAncestors, isCategoryTreeLoaded, loadCategoryTree, activeCategory,
+    } = useCategoryLogic();
+    const activeCategoryLabel = computed(() => activeCategory.value?.label ?? '');
+    const categoryAncestorsWithoutActiveCategory = computed(() => categoryAncestors.value.slice(0, -1));
+
     const routeData = ref<EntityUrl>({});
 
     const { fetch } = useFetch(async () => {
@@ -393,7 +405,8 @@ export default defineComponent({
       isShowCms,
       isShowProducts,
       cmsContent,
-      categoryAncestors,
+      categoryAncestorsWithoutActiveCategory,
+      activeCategoryLabel,
       routeData,
       doChangeItemsPerPage,
       fetch,
@@ -425,9 +438,18 @@ export default defineComponent({
   display: flex;
 }
 
- .breadcrumbs {
-   padding: var(--spacer-sm);
- }
+.breadcrumbs {
+  margin-left: var(--spacer-sm);
+
+  @include for-mobile {
+    margin-top: var(--spacer-lg)
+  }
+}
+
+.category-title  {
+  margin-left: var(--spacer-sm);
+  text-align: left;
+}
 
 .sidebar {
   flex: 0 0 15%;