Allow adding elements after/between product list items (e.g. banners)

graphcommerce-org · Dec 2, 2024 · 673bf7c · 673bf7c
1 parent cb8d2f0
commit 673bf7c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/.changeset/ten-camels-repeat.md b/.changeset/ten-camels-repeat.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-product': patch
+---
+
+Allow adding elements after/between product list items (e.g. banners)
diff --git a/packages/magento-product/components/ProductListItems/ProductListItemsBase.tsx b/packages/magento-product/components/ProductListItems/ProductListItemsBase.tsx
@@ -38,6 +38,7 @@ export type ProductItemsGridProps = ProductListItemsFragment & {
   sx?: BoxProps['sx']
   columns?: ((theme: Theme) => ColumnsConfig) | ColumnsConfig
   containerRef?: React.Ref<HTMLDivElement>
+  children?: React.ReactNode
 } & Pick<ProductListItemProps, 'onClick' | 'titleComponent'> &
   ComponentState
 
@@ -57,6 +58,7 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
     titleComponent,
     onClick,
     columns,
+    children,
   } = props
 
   const theme = useTheme()
@@ -124,6 +126,7 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
             </LazyHydrate>
           ) : null,
         )}
+        {children}
       </Box>
     </AddProductsToCartForm>
   )