feat: add groupBy prop in recommendation shelf

vtex-apps · Mar 11, 2024 · 2c6bde8 · 2c6bde8
1 parent 164a8f1
commit 2c6bde8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/react/RelatedProducts.js b/react/RelatedProducts.js
@@ -32,6 +32,7 @@ const fixRecommendation = recommendation => {
 const RelatedProducts = ({
   productQuery,
   productList,
+  groupBy,
   recommendation: cmsRecommendation,
   trackingId: rawTrackingId,
   hideOutOfStockItems,
@@ -64,8 +65,9 @@ const RelatedProducts = ({
     return {
       identifier: { field: 'id', value: productId },
       type: recommendation,
+      groupBy
     }
-  }, [productId, recommendation])
+  }, [productId, recommendation, groupBy])
 
   if (!productId) {
     return null
@@ -128,6 +130,7 @@ RelatedProducts.defaultProps = {
     ...ProductList.defaultProps,
     titleText: 'Related Products',
   },
+  groupBy: 'PRODUCT',
   hideOutOfStockItems: false,
 }
 
@@ -158,6 +161,20 @@ RelatedProducts.schema = {
         'admin/editor.relatedProducts.suggestions',
       ],
     },
+    groupBy:{
+      title: 'admin/editor.relatedProducts.groupBy.title',
+      description: 'admin/editor.relatedProducts.groupBy.description',
+      type: 'string',
+      default: RelatedProducts.defaultProps.groupBy,
+      enum: [
+        'PRODUCT',
+        'NONE',
+      ],
+      enumNames: [
+        'admin/editor.relatedProducts.groupBy.product',
+        'admin/editor.relatedProducts.groupBy.none'
+      ],
+    },
     productList: ProductList.schema,
     hideOutOfStockItems: {
       title: 'admin/editor.shelf.hideOutOfStockItems',

diff --git a/react/queries/productRecommendations.gql b/react/queries/productRecommendations.gql
@@ -1,8 +1,9 @@
 query ProductRecommendations(
   $identifier: ProductUniqueIdentifier
   $type: CrossSelingInputEnum
+  $groupBy: CrossSelingGroupByEnum
 ) {
-  productRecommendations(identifier: $identifier, type: $type)
+  productRecommendations(identifier: $identifier, type: $type, groupBy: $groupBy)
     @context(provider: "vtex.search-graphql") {
     cacheId
     productId