UnbxdRecsCSRWrapper

Overview

The UnbxdRecsCSRWrapper is a foundational wrapper component that provides context and state management for all Recommendations functionality. It acts as the core provider that enables product recommendation features by managing API communication, recommendation state, and user interactions. All Recommendations components and hooks must be wrapped within this component to function properly.

Usage

// This is a sample example. 
// Please go through the entire documentation for understanding different use cases and update as per your needs.
import { UnbxdRecsCSRWrapper } from "@unbxd-ui/react-recs-hooks";
 
<UnbxdRecsCSRWrapper
	sitekey="YOUR_SITE_KEY"
	apikey="YOUR_API_KEY"
	headers={{
		"Unbxd-User-Id": "user123",
		"Unbxd-Device-Type": "desktop"
	}}
	extraParams={{
		pageType: "HOME",
		uid: "user123"
	}}
	onEvent={({ type, message, value, state }) => {
		console.log("Recs event:", type, message);
	}}
>
	<RecommendationsComponent />
</UnbxdRecsCSRWrapper>

Props

• This is the unique Site Key assigned by Unbxd to every site created in the console dashboard.
• Required for authenticating API requests to the Recommendations service.
• Refer to this section for steps on how to get the Site Key for your account.

• This is the unique API Key assigned to every site created in the console dashboard.
• Used for authenticating Recommendations API calls.
• Refer to this section for steps on how to get the API Key for your account.

• Additional parameters to be included in Recommendations API requests.
• These parameters define the context for recommendations (page type, product ID, category, etc.).
• pageType and uid are commonly used parameters.
• Default value:: { pageType: "HOME", uid: undefined }

Common extraParams:

//For homepage recommendations
extraParams={{
	pageType: "HOME",
	uid: "user123"
}}
 
//For product detail page recommendations
extraParams={{
	pageType: "PRODUCT",
	id: "product123",
	uid: "user123"
}}
 
//For category page recommendations
extraParams={{
	pageType: "CATEGORY",
	category: ["Electronics", "Laptops"],
	uid: "user123"
}}
 
//For cart page recommendations
extraParams={{
	pageType: "CART",
	uid: "user123"
}}

• Custom headers to be sent with Recommendations API requests.
• Can include both static values and dynamic functions that return values.
• Useful for passing user identification, device type, or other custom headers.
• Default value:: {}

//Example implementation
headers={{
	"Unbxd-User-Id": "user123",
	"Unbxd-Device-Type": "desktop",
	sessionId: () => getSessionId(), // Dynamic function
	customHeader: "value"
}}

• Determines whether cookies should be included in Recommendations API requests.
• When set to true, the credentials: "include" option is added to fetch requests, allowing cookies to be sent with cross-origin requests.
• Useful for maintaining session state or authentication across domains.
• Default value:: false

//Example implementation
<UnbxdRecsCSRWrapper
	sitekey="YOUR_SITE_KEY"
	apikey="YOUR_API_KEY"
	allowCookies={true}
	// ... other props
>
	<RecommendationsComponent />
</UnbxdRecsCSRWrapper>

• A function which helps in capturing events and errors during recommendations interactions. Users can further run additional pieces of code like error handling, event tracking, or analytics.

• In parameters it receives:

  • type: The type of event like API_CALL_STARTED, API_CALL_SUCCESS, API_CALL_ERROR etc.
  • message: The message for the corresponding event.
  • value: The value for the corresponding event (response data, error details, etc.).
  • state: Current state values like loading state, API response, error state etc.

• Default Value:

const onEvent = ({ type, message, value, state }) => {
	// Default: no-op function
};

• Example Usage:

// This is sample code, update it according to your requirement.
const onEvent = ({ type, message, value, state }) => {
	switch (type) {
		case 'API_CALL_STARTED':
			console.log('Fetching recommendations...');
			// Track API call start in analytics
			analytics.track('recs_api_started');
			break;
 
		case 'API_CALL_SUCCESS':
			console.log('Recommendations loaded:', value);
			// Track successful recommendations load
			analytics.track('recs_loaded', { widgetCount: value?.length });
			break;
 
		case 'API_CALL_ERROR':
			console.error('Recommendations error:', value);
			// Send error to monitoring service
			errorTracking.captureException(value);
			break;
 
		default:
			console.log(`Event: ${type}`, { message, value });
	}
};