Changed filters of aggregations query in PLP

magento · Dec 11, 2024 · 5aa7ef9 · 5aa7ef9
1 parent 8087fe0
commit 5aa7ef9
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 9 deletions.
diff --git a/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js b/packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js
@@ -2,9 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductFiltersByCategory(
-        $categoryIdFilter: FilterEqualTypeInput!
+        $filters: ProductAttributeFilterInput!
     ) {
-        products(filter: { category_uid: $categoryIdFilter }) {
+        products(filter: $filters) {
             aggregations {
                 label
                 count

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
@@ -39,6 +39,30 @@ export const useCategoryContent = props => {
         }
     );
 
+    const [filterOptions, setFilterOptions] = useState();
+
+    const availableFilterData = filterData
+        ? filterData.products?.aggregations
+        : null;
+    const availableFilters = availableFilterData
+        ?.map(eachitem => eachitem.attribute_code)
+        ?.sort();
+    const selectedFilters = {};
+
+    if (filterOptions) {
+        for (const [group, items] of filterOptions) {
+            availableFilters?.map(eachitem => {
+                if (eachitem === group) {
+                    const sampleArray = [];
+                    for (const item of items) {
+                        sampleArray.push(item.value);
+                    }
+                    selectedFilters[group] = sampleArray;
+                }
+            });
+        }
+    }
+
     const [getSortMethods, { data: sortData }] = useLazyQuery(
         getCategoryAvailableSortMethodsQuery,
         {
@@ -63,11 +87,22 @@ export const useCategoryContent = props => {
 
     useEffect(() => {
         if (categoryId) {
+            let dynamicFilters = {
+                category_uid: { eq: categoryId }
+            };
+            Object.keys(selectedFilters).forEach(key => {
+                let filter = {};
+                if (key === 'price') {
+                    let [from, to] = selectedFilters[key][0].split('_');
+                    filter = { [key]: { from: from, to: to }};
+                } else  {
+                    filter = { [key]: { in: selectedFilters[key]}};
+                }
+                dynamicFilters = { ...dynamicFilters, ...filter };
+              });
             getFilters({
                 variables: {
-                    categoryIdFilter: {
-                        eq: categoryId
-                    }
+                    filters: dynamicFilters
                 }
             });
         }
@@ -122,6 +157,7 @@ export const useCategoryContent = props => {
         categoryName,
         categoryDescription,
         filters,
+        setFilterOptions,
         items,
         totalCount,
         totalPagesFromData

diff --git a/packages/venia-ui/lib/RootComponents/Category/categoryContent.js b/packages/venia-ui/lib/RootComponents/Category/categoryContent.js
@@ -50,6 +50,7 @@ const CategoryContent = props => {
         categoryName,
         categoryDescription,
         filters,
+        setFilterOptions,
         items,
         totalCount,
         totalPagesFromData
@@ -79,7 +80,7 @@ const CategoryContent = props => {
     ) : null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar filters={filters} />
+        <FilterSidebar filters={filters} setFilterOptions={setFilterOptions} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;

diff --git a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useRef } from 'react';
+import React, { useMemo, useCallback, useRef, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, arrayOf, shape, string, number } from 'prop-types';
 import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
@@ -17,7 +17,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen } = props;
+    const { filters, filterCountToOpen, setFilterOptions } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -50,6 +50,12 @@ const FilterSidebar = props => {
         [handleApply, filterRef]
     );
 
+    useEffect(() => {
+        if (filterState) {
+            setFilterOptions(filterState);
+        }
+    }, [filterState, setFilterOptions]);
+
     const filtersList = useMemo(
         () =>
             Array.from(filterItems, ([group, items], iteration) => {