feat: add groupBy prop in recommendation shelf (#282)

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- GroupBy prop in `shelf.relatedProducts`
+
 ## [1.47.4] - 2023-06-30
 
 ### Fixed

docs/README.md

@@ -61,6 +61,7 @@ Now, you can use all the blocks exported by the `shelf` app. See the full list b
 | Prop name | Type | Description | Default value |
 | -  | -  | -  | - |
 | `recommendation` | `enum` | Type of recommendations that will be displayed on the shelf. Possible values: `similars`, `suggestions`, and `accessories` (these depend on the product information given in the Admin Catalog); and `view`, `buy`, and `viewandBought` (these are automatically generated according to the activity of the store). | `similars` |
+| `groupBy` | `enum` | Defines if you are ot nog going to group your recommendations by: `PRODUCT` (only display individual products and not SKUs, limited by 12 products) or `NONE` (if you want to display all registered SKUs, limited by 50 products). | `PRODUCT` |
 | `hideOutOfStockItems` | `boolean` | Whether out of stock items should be hidden: (`true`) or (`false`). | `false` |
 | `productList` | `ProductListSchema` | Product list schema. See `ProductListSchema`. | - |
 

messages/context.json

@@ -50,6 +50,10 @@
   "admin/editor.relatedProducts.accessories": "admin/editor.relatedProducts.accessories",
   "admin/editor.relatedProducts.viewAndBought": "admin/editor.relatedProducts.viewAndBought",
   "admin/editor.relatedProducts.suggestions": "admin/editor.relatedProducts.suggestions",
+  "admin/editor.relatedProducts.groupBy.title": "admin/editor.relatedProducts.groupBy.title",
+  "admin/editor.relatedProducts.groupBy.description": "admin/editor.relatedProducts.groupBy.description",
+  "admin/editor.relatedProducts.groupBy.product": "admin/editor.relatedProducts.groupBy.product",
+  "admin/editor.relatedProducts.groupBy.none": "admin/editor.relatedProducts.groupBy.none",
   "store/shelf.title": "store/shelf.title",
   "admin/editor.tabbed-shelf.title": "Component title",
   "admin/editor.tabbed-shelf.description": "Component description",

messages/en.json

@@ -50,6 +50,10 @@
   "admin/editor.relatedProducts.accessories": "Accessories products",
   "admin/editor.relatedProducts.viewAndBought": "Who saw this, also bought...",
   "admin/editor.relatedProducts.suggestions": "Suggestions",
+  "admin/editor.relatedProducts.groupBy.title": "Group by",
+  "admin/editor.relatedProducts.groupBy.description": "Group recommendation list",
+  "admin/editor.relatedProducts.groupBy.product": "Products",
+  "admin/editor.relatedProducts.groupBy.none": "Do not group",
   "store/shelf.title": "Best Products",
   "admin/editor.tabbed-shelf.title": "Tabbed Shelf",
   "admin/editor.tabbed-shelf.description": "Tabbed Shelf featured product module",

messages/es.json

@@ -50,6 +50,10 @@
   "admin/editor.relatedProducts.accessories": "Productos de accesorios",
   "admin/editor.relatedProducts.viewAndBought": "Quien vio esto, también compró ...",
   "admin/editor.relatedProducts.suggestions": "Sugerencias",
+  "admin/editor.relatedProducts.groupBy.title": "Agrupar",
+  "admin/editor.relatedProducts.groupBy.description": "Agrupar lista de recomendaciones",
+  "admin/editor.relatedProducts.groupBy.product": "Productos",
+  "admin/editor.relatedProducts.groupBy.none": "No agrupar",
   "store/shelf.title": "Mejores Productos",
   "admin/editor.shelf-properties.title.title": "Título",
   "admin/editor.shelf-properties.title.description": "Título del estante",

messages/pt.json

@@ -50,6 +50,10 @@
   "admin/editor.relatedProducts.accessories": "Produtos de acessórios",
   "admin/editor.relatedProducts.viewAndBought": "Quem viu isto, comprou também...",
   "admin/editor.relatedProducts.suggestions": "Sugestões",
+  "admin/editor.relatedProducts.groupBy.title": "Agrupar por",
+  "admin/editor.relatedProducts.groupBy.description": "Agrupar listas de recomendações",
+  "admin/editor.relatedProducts.groupBy.product": "Produtos",
+  "admin/editor.relatedProducts.groupBy.none": "Não agrupar",
   "store/shelf.title": "Melhores Produtos",
   "admin/editor.shelf-properties.title.title": "Título",
   "admin/editor.shelf-properties.title.description": "Título da vitrine",

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,17 @@ 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',

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