Products Component

Basic Setup & Configuration

1. How do I import and use the Products component?

You can import the Products component from @unbxd-ui/react-search-components:

import { Products } from "@unbxd-ui/react-search-components";
 
// Basic usage
<Products ProductComponent={MyProductCard} LoaderComponent={MyLoader} NoResultsComponent={MyNoResults} />;

2. What hooks does the Products component internally use?

The Products component internally uses useProducts hook from @unbxd-ui/react-search-hooks .

3. What are the required props for the Products component?

The Products component requires a ProductComponent prop to render individual products:

// Minimum required setup
<Products ProductComponent={ProductCard} />

Product Rendering & Data Flow

1. Can I customize my product card to show multiple images as a carousel?

Yes, you can create a custom ProductComponent that uses the Carousel component exported from @unbxd-ui/react-search-components. Click here to view the use case.

2. Do we have variants support by default in product card?

No, the Products component doesn't include built-in variant support. However, you can easily implement variants in your custom ProductComponent using the Carousel component from @unbxd-ui/react-search-components. Click here to view the use case.

Loading States & Error Handling

1. How does the Products component handle loading states?

The Products component shows different content based on loading state and product availability:

// Loading with products (additional products loading)
if (numberOfProducts > 0 && loading) {
	return (
		<div>
			{/* Existing products shown */}
			<LoaderComponent /> {/* Loading indicator for additional products */}
		</div>
	);
}
 
// Loading without products (initial load)
if (numberOfProducts === 0 && loading) {
	return <LoaderComponent />;
}
 
// No results (not loading, no products)
if (numberOfProducts === 0 && !loading) {
	return <NoResultsComponent />;
}

2. What happens when there are no search results?

The Products component renders the NoResultsComponent when no products .

Advanced Features & Styling

1. How does the Products component handle infinite scroll pagination?

The Products component uses IntersectionObserver to automatically update the page URL when products come into view. Based on the pre-loader or post-loader, the previous set of products or the next set of products is loaded to the existing set of products.

2. What is the onProductLoad callback used for?

The onProductLoad callback is triggered whenever products are loaded, useful for analytics and custom logic:

<Products
	ProductComponent={ProductCard}
	onProductLoad={() => {
		// Analytics tracking
		analytics.track("products_loaded", {
			count: products.length,
			page: currentPage,
			timestamp: new Date(),
		});
 
		// Custom logic after products load
		console.log("Products have been loaded and rendered");
	}}
/>

3. How can I customize the styling of the Products component?

You can use the styles props to override the default CSS classes. Click here to view the styles documentation.