diff --git a/.changeset/smart-mangos-notice.md b/.changeset/smart-mangos-notice.md new file mode 100644 index 000000000..99e8721f4 --- /dev/null +++ b/.changeset/smart-mangos-notice.md @@ -0,0 +1,39 @@ +--- +"@shopware-pwa/composables-next": minor +--- + +# Fix setCurrentFilters + +Body **before** when you use setCurrentFilters: + +``` +{ + "limit":10, + "search":"", + "p":"1", + "navigationId":"018db20234207be8948e3a4b46501435", + "manufacturer":"", + "price": {"min":0,"max":0}, + "rating": null, + "shipping-free":false, + "properties":"", + "code":"manufacturer", // 👈 Not like this + "value":"018d35f5b5757076adea38044bb96937" // 👈 Not like this +} +``` + +Body **after** the code changes with fixed setCurrentFilters: + +``` +{ + "limit":10, + "search":"", + "p":"1", + "navigationId":"018db20234207be8948e3a4b46501435", + "manufacturer":"018d35f5b5757076adea38044bb96937", // 👈 where the filter value should go + "price": {"min":0,"max":0}, + "rating": null, + "shipping-free":false, + "properties":"", +} +``` diff --git a/packages/composables/src/useListing/useListing.test.ts b/packages/composables/src/useListing/useListing.test.ts index c98386fae..dbf6ad912 100644 --- a/packages/composables/src/useListing/useListing.test.ts +++ b/packages/composables/src/useListing/useListing.test.ts @@ -79,17 +79,16 @@ describe("useListing", () => { ); injections.apiClient.invoke.mockResolvedValue({ data: {} }); - vm.setCurrentFilters({ code: "test", value: "test" }); + vm.setCurrentFilters([{ code: "shipping-free", value: true }]); expect(injections.apiClient.invoke).toHaveBeenCalledWith( expect.stringContaining("readProductListing"), expect.objectContaining({ body: { - code: "test", manufacturer: undefined, properties: undefined, query: undefined, - value: "test", + "shipping-free": true, }, headers: { "sw-include-seo-urls": true, diff --git a/packages/composables/src/useListing/useListing.ts b/packages/composables/src/useListing/useListing.ts index dbd82cbe8..79c1c8ed2 100644 --- a/packages/composables/src/useListing/useListing.ts +++ b/packages/composables/src/useListing/useListing.ts @@ -36,6 +36,14 @@ function merge( export type ListingType = "productSearchListing" | "categoryListing"; +export type ShortcutFilterParam< + T extends + keyof Schemas["ProductListingCriteria"] = keyof Schemas["ProductListingCriteria"], +> = { + code: T; + value: Schemas["ProductListingCriteria"][T]; +}; + export type UseListingReturn = { /** * Listing that is currently set @@ -146,7 +154,7 @@ export type UseListingReturn = { * @param filters * @returns */ - setCurrentFilters(filters: { code: string; value: unknown }): Promise; + setCurrentFilters(filters: ShortcutFilterParam[]): Promise; /** * Indicates if the listing is being fetched */ @@ -490,20 +498,33 @@ export function createListingComposable({ ?.currentFilters as Schemas["ProductListingResult"]["currentFilters"]; }); - const setCurrentFilters = (filter: { code: string; value: unknown }) => { - const appliedFilters: operations["searchPage post /search"]["body"] = - Object.assign({}, getCurrentFilters.value, filter, { + // this function sets the current filters as shortcut filters @see https://shopware.stoplight.io/docs/store-api/b56ebe18277c6-searching-for-products#product-listing-criteria + // the downside is that this does not filter the aggregations, so the aggregations are not reduced by the filter (!) + const setCurrentFilters = (filters: ShortcutFilterParam[]) => { + const newFilters = {}; + for (const filter of filters) { + Object.assign(newFilters, { [filter.code]: filter.value }); + } + + const appliedFilters = Object.assign( + {}, + getCurrentFilters.value, + { query: getCurrentFilters.value?.search, manufacturer: getCurrentFilters.value?.manufacturer?.join("|"), properties: getCurrentFilters.value?.properties?.join("|"), - }); + }, + { ...newFilters }, + ); + if (_storeAppliedListing.value) { _storeAppliedListing.value.currentFilters = { ...appliedFilters, - manufacturer: appliedFilters.manufacturer?.split("|") || [], - properties: appliedFilters.properties?.split("|") || [], - } as unknown as Schemas["ProductListingResult"]["currentFilters"]; + manufacturer: appliedFilters.manufacturer?.split("|"), + properties: appliedFilters.properties?.split("|"), + }; } + return search(appliedFilters); };