feat(cms): add navigation component

packages/shopware-6-client/__tests__/services/PageService/getPage.spec.ts

@@ -0,0 +1,23 @@
+import { getPage } from "@shopware-pwa/shopware-6-client";
+import { apiService } from "../../../src/apiService";
+
+jest.mock("../../../src/apiService");
+const mockedAxios = apiService as jest.Mocked<typeof apiService>;
+
+describe("PageService - getPage", () => {
+ beforeEach(() => {
+ jest.resetAllMocks();
+ });
+ it("should return cmsPage for given path", async () => {
+ mockedAxios.post.mockResolvedValueOnce({
+ data: { cmsPage: { id: "b218f861361042f3a58a2a9d1b3575b5" } }
+ });
+ const result = await getPage("Sports/Grocery-Garden");
+ expect(mockedAxios.post).toBeCalledTimes(1);
+ expect(mockedAxios.post).toBeCalledWith("/vsf/page", {
+ path: "Sports/Grocery-Garden"
+ });
+ expect(result).toHaveProperty("cmsPage");
+ expect(result.cmsPage.id).toEqual("b218f861361042f3a58a2a9d1b3575b5");
+ });
+});

packages/shopware-6-client/src/endpoints.ts

@@ -98,3 +98,5 @@ export const getContextSalutationEndpoint = () => `/salutation`;
 export const getNewsletterSubscribeEndpoint = () => `/newsletter/subscribe`;
 
 export const getNewsletterUnsubscribeEndpoint = () => `/newsletter/unsubscribe`;
+
+export const getNavigationEndpoint = () => `/navigation`;

packages/shopware-6-client/src/index.ts

@@ -7,7 +7,7 @@ export * from "./services/productService";
 export * from "./services/customerService";
 export * from "./services/contextService";
 export * from "./services/cartService";
-
+export * from "./services/cmsService";
 /**
  * Setup configuration. Merge default values with provided in param.
  * This method will override existing config. For config update invoke **update** method.

packages/shopware-6-client/src/interfaces/models/content/category/Category.ts

@@ -35,5 +35,6 @@ export interface Category extends Entity {
  description: string;
  id: string;
  parentVersionId: string;
+ childrenCount: number;
  afterCategoryVersionId: string;
 }

packages/shopware-6-client/src/interfaces/search/SearchCriteria.ts

@@ -1,5 +1,5 @@
 import { Pagination } from "./Pagination";
-import { SearchFilter } from "./SearchFilter";
+import { EqualsFilter, RangeFilter, MultiFilter } from "./SearchFilter";
 import { Association } from "./Association";
 import { Aggregation } from "./Aggregation";
 import { TotalCountMode } from "./TotalCountMode";
@@ -9,7 +9,7 @@ export interface Sort {
  desc?: boolean;
 }
 export interface SearchCriteria {
- filters?: SearchFilter[];
+ filters?: EqualsFilter[] | RangeFilter[] | MultiFilter[];
  pagination?: Pagination;
  sort?: Sort;
  term?: string;

packages/shopware-6-client/src/services/cmsService.ts

@@ -1 +1,50 @@
-interface cmsService {}
+import { Category } from "../interfaces/models/content/category/Category";
+import { getNavigationEndpoint } from "../endpoints";
+import { SearchResult } from "../interfaces/response/SearchResult";
+import { apiService } from "../apiService";
+import { getCategories } from "./categoryService";
+import { SearchFilterType } from "../interfaces/search/SearchFilter";
+
+export async function getNavigation(): Promise<SearchResult<Category[]>> {
+ const resp = await apiService.post(getNavigationEndpoint());
+
+ return resp.data;
+}
+/**
+ * remove when https://github.com/elkmod/SwagVueStorefront/issues/15 is done
+ */
+export async function getNavigationTemp(
+ parentId: string
+): Promise<
+ Array<{
+ header: string | null;
+ items: Array<{
+ label: string | null;
+ count: number;
+ }>;
+ }>
+> {
+ const resp = await getCategories({
+ filters: [
+ {
+ type: SearchFilterType.EQUALS,
+ field: "parentId",
+ value: parentId
+ }
+ ],
+ configuration: { associations: [{ name: "children" }] }
+ });
+
+ const navigation = resp.data.map(category => ({
+ header: category.name,
+ id: category.id,
+ items: category.children
+ ? category.children.map(child => ({
+ label: child.name,
+ count: child.childrenCount
+ }))
+ : []
+ }));
+
+ return navigation;
+}

test-page/src/components/cms/cmsNameMapper.js

@@ -3,13 +3,15 @@ const namesMap = {
  default: "SwSection",
  "product-slider": "SwSlots",
  "product-three-column": "SwSlots",
- image: "SwSlots"
+ image: "SwSlots",
+ "category-navigation": "SwSlots"
 };
 
 const slotsMap = {
  "product-box": "CmsSwProductCart",
  "product-slider": "SwProductSlider",
- image: "SwImage"
+ image: "SwImage",
+ "category-navigation": "SwCategoryNavigationSlot"
 };
 
 export function getComponentBy(content) {

test-page/src/components/cms/elements/SwCategoryNavigationSlot.vue

@@ -0,0 +1,69 @@
+<template>
+ <div class="sw-category-navigation">
+ <SfAccordion :firstOpen="true" :showChevron="false">
+ <SfAccordionItem
+ v-for="accordion in navigation"
+ :key="accordion.id"
+ :header="accordion.header"
+ >
+ <template v-if="accordion.items.length > 0 ">
+ <SfList>
+ <SfListItem v-for="(item, j) in accordion.items" :key="j">
+ <SfMenuItem :label="item.label" :count="item.count" />
+ </SfListItem>
+ </SfList>
+ </template>
+ </SfAccordionItem>
+ </SfAccordion>
+ </div>
+</template>
+
+<script>
+import {
+ SfSidebar,
+ SfButton,
+ SfList,
+ SfIcon,
+ SfMenuItem,
+ SfFilter,
+ SfProductCard,
+ SfPagination,
+ SfAccordion,
+ SfSelect,
+ SfBottomNavigation,
+ SfCircleIcon
+} from "@storefront-ui/vue";
+import { getNavigationTemp } from "@shopware-pwa/shopware-6-client";
+export default {
+
+ components: {
+ SfAccordion,
+ SfList,
+ SfMenuItem
+ },
+ data() {
+ return {
+ navigationResponse: [] 
+ }
+ },
+ props: {
+ content: {
+ type: Object,
+ default: () => ({})
+ }
+ },
+ async mounted() {
+ // TODO get the current category id from state management
+ this.navigationResponse = await getNavigationTemp("3f637f17cd9f4891a2d7625d19fb37c9")
+ },
+ computed: {
+ navigation() {
+ return this.navigationResponse
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

test-page/src/views/Home.vue

@@ -276,8 +276,8 @@ export default {
  filters: [
  {
  type: "equals",
- value: "1",
- field: "level"
+ value: "cc921c5fd5e2430ba878fb194c1aeb8a",
+ field: "id"
  }
  ],
  configuration: {