UnbxdSearchWrapper

Overview

The UnbxdSearchWrapper is a top-level wrapper component that encapsulates all Client-Side Rendering (CSR) components or hooks used in the application. It acts as the foundational layer for the SDK's functionality, ensuring that any necessary configuration or setup is applied globally. The component accepts a set of props that allow users to customize the behavior of the SDK to suit their specific needs.

Usage

import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
 
<UnbxdSearchWrapper
	siteKey="TEST_SITEKEY"
	apiKey="TEST_APIKEY"
	defaultValues={{...}}
	webUrlConfig={{
		...
		setWebUrl: (newUrl, redirect, replace) => { /* custom logic */ }
	}}
	apiUrlConfig={{ ... }}
	onEvent={({type, message, value, state}) => { }}
>
	...
</UnbxdSearchWrapper>

Configuring Search vs Category

1. Search: A page is considered a search page by default unless configured differently.
   
2. Category: To designate a page as a category page, users should pass the browse configurations within the wrapper. For details on how to set this up, refer to the apiUrlConfig > category configurations.

Props

• This is the unique Site Key assigned by Unbxd to every site created in the console dashboard.
• 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.
• Refer to this section for steps on how to get the API Key for your account.

• This takes in the default values for query, pageSize, view, sort, currentPage.

• Usage:

defaultValues = { pageSize: 4, query: "pants", currentPage: 3, view: "", sort: "" };

• Allows you to pass various settings related to the URL to make it more user-friendly. These configurations can include adjustments such as cleaner URL structures, more readable query parameters, or optimized links, enhancing the overall user experience and improving navigation clarity. Below is the usage with each config having default values.

• Usage:

webUrlConfig = {
	hashMode: false,
	queryParamSeperator: "&",
	keySeperator: "=",
	orderOfParams: [],
	query: {
		addToUrl: true,
		key: "query",
	},
	category: {
		addToUrl: true,
		key: "browse",
	},
	sort: {
		addToUrl: true,
		key: "sort",
		values: {},
	},
	view: {
		addToUrl: false,
		key: "view",
		values: {},
	},
	pageSize: {
		addToUrl: true,
		key: "rows",
	},
	pagination: {
		addToUrl: true,
		key: "start",
		usePageNo: true,
	},
	facets: {
		addToUrl: true,
		valuesSeparator: ",",
		keys: {},
		values: {},
	},
	externalParams: null,
	rangeFacets: [],
	categoryFacets: [],
	setWebUrl: (newUrl, redirect, replace) => {
		window.history.pushState({}, "", newUrl);
	}
};

setWebUrl (inside webUrlConfig)

• This function provides flexibility to customize how URL changes are handled in the application. You can push new entries to the browser's history stack or replace the current entry, or use router functions for more control.
• Parameters:
  • newUrl: The new URL to be set.
  • redirect: A boolean indicating whether to redirect.
  • replace: A boolean indicating whether to replace the current entry.
• Default Value:

setWebUrl: (newUrl, redirect, replace) => {
	window.history.pushState({}, "", newUrl);
}

• If you are using React Router, you can customize the behavior as follows:

const navigate = useNavigate();
 
const webUrlConfig = {
	setWebUrl: (newUrl) => {
		navigate(newUrl);
	}
}

• This config allows you to pass some cutomization and additional features that are present to make in api url .

• Usage:

apiUrlConfig = {
	category: {
		browseQueryParam: "p",
		page: "",
		page_type: "boolean",
	},
	variants: {
		enabled: true,
		count: 6,
		groupBy: "v_colour",
		attributes: ["title", "v_imageUrl"],
		mapping: { image_url: v_imageUrl },
	},
	spellCheck: {
		enabled: true,
	},
	facetMultiSelect: true,
	uc_param: "",
	extraParams: { test: "abc" },
};

• A function which helps in capturing events and errors. Users can further run additional pieces of code like error handling or event tracking.
• Default Value:

const onEvent = ({ type, message, value, state }) => {
	if (message) console.log(`${type}:`, message, value);
	else console.log(type);
};

• In parameters it receives :
  • type: Which is the type of event like BEFORE_API_CALL, AFTER_API_CALL etc.
  • message:
  • state : Current state values like current page , current selected pagesize , current query etc.
  • value:
• Checkout the full list of events below :