Просмотр исходного кода

feat module 1,2,4 : product list display based on menu

master
nadia 1 день назад
Родитель
Сommit
4f8981f4cf
1 измененных файлов: 27 добавлений и 7 удалений
  1. 27
    7
      src/components/ProductList/ProductList.jsx

+ 27
- 7
src/components/ProductList/ProductList.jsx Просмотреть файл

16
 import { useNavigate } from "react-router-dom";
16
 import { useNavigate } from "react-router-dom";
17
 import defaultImage from "../../assets/images/default.png"
17
 import defaultImage from "../../assets/images/default.png"
18
 import atomeLogo from "../../assets/images/atome.webp"
18
 import atomeLogo from "../../assets/images/atome.webp"
19
+import {
20
+  getAllowedCollectionTitleSet,
21
+  getRelatedProductTypes,
22
+  normalizeTitle,
23
+} from "../../config/menuCollections";
19
 
24
 
20
 //UTIL FUNCTION
25
 //UTIL FUNCTION
21
 function getAllTags(data) {
26
 function getAllTags(data) {
127
     if (products?.length > 0) {
132
     if (products?.length > 0) {
128
       let productType = sessionStorage.getItem("amber-select-product-type");
133
       let productType = sessionStorage.getItem("amber-select-product-type");
129
       const selectedCollectionTitles = getSelectedCollectionTitles();
134
       const selectedCollectionTitles = getSelectedCollectionTitles();
135
+      const normalizedSelectedCollectionTitles = selectedCollectionTitles.map(normalizeTitle);
136
+      const allowedCollectionSet = getAllowedCollectionTitleSet(products, productType);
137
+      const relatedProductTypeSet = new Set(getRelatedProductTypes(productType));
138
+      const productMatchesSelectedType = (product) =>
139
+        relatedProductTypeSet.has(normalizeTitle(product?.productType));
140
+      const productHasVisibleCollection = (product) =>
141
+        product.collections?.some((data) =>
142
+          allowedCollectionSet.has(normalizeTitle(data?.title || ""))
143
+        );
130
 
144
 
131
       let newFilteredProducts = products.filter(
145
       let newFilteredProducts = products.filter(
132
-        (product) => product.productType === productType
146
+        (product) => productMatchesSelectedType(product)
133
       );
147
       );
134
 
148
 
135
       // Tags
149
       // Tags
136
       newFilteredProducts = newFilteredProducts.filter((product) => {
150
       newFilteredProducts = newFilteredProducts.filter((product) => {
137
         if (tags == "all" || tags == "tag") {
151
         if (tags == "all" || tags == "tag") {
138
-          return product.productType === productType;
152
+          return productMatchesSelectedType(product);
139
         } else {
153
         } else {
140
           return (
154
           return (
141
-            product.productType === productType && product.tags.includes(tags)
155
+            productMatchesSelectedType(product) && product.tags.includes(tags)
142
           );
156
           );
143
         }
157
         }
144
       });
158
       });
145
 
159
 
146
       // Collection
160
       // Collection
147
       newFilteredProducts = newFilteredProducts.filter((product) => {
161
       newFilteredProducts = newFilteredProducts.filter((product) => {
162
+        // Product list now follows collections exposed by the Shopify collection
163
+        // custom.menu_group metafield. 
164
+        if (!productHasVisibleCollection(product)) return false;
165
+
148
         if (selectedCollectionTitles.length > 0) {
166
         if (selectedCollectionTitles.length > 0) {
149
           return (
167
           return (
150
-            product.productType === productType &&
151
-            product.collections.some((data) => selectedCollectionTitles.includes(data?.title))
168
+            productMatchesSelectedType(product) &&
169
+            product.collections.some((data) =>
170
+              normalizedSelectedCollectionTitles.includes(normalizeTitle(data?.title || ""))
171
+            )
152
           );
172
           );
153
         }
173
         }
154
 
174
 
155
         if (collection == "all" || collection == "collection") {
175
         if (collection == "all" || collection == "collection") {
156
-          return product.productType === productType;
176
+          return productMatchesSelectedType(product);
157
         } else {
177
         } else {
158
           return (
178
           return (
159
-            product.productType === productType &&
179
+            productMatchesSelectedType(product) &&
160
             product.collections.some((data) => data?.title === collection)
180
             product.collections.some((data) => data?.title === collection)
161
           );
181
           );
162
         }
182
         }

Загрузка…
Отмена
Сохранить