UnbxdSearchWrapperSSR

Overview

The UnbxdSearchWrapperSSR is a top-level wrapper component that encapsulates all Server-Side Rendering (SSR) 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 wrapper accepts a set of props that allow users to customize the behavior of the SDK to suit their specific needs.

Usage

import { headers } from "next/headers";
import { UnbxdSearchWrapperSSR } from "@unbxd-ui/react-search-hooks";
 
const headerList = headers();
const currentPath = headerList.get("x-path-name");
 
<UnbxdSearchWrapperSSR
	siteKey="TEST_SITEKEY" 
	apiKey="TEST_APIKEY" 
	defaultValues={{ ... }}
	webUrlConfig={{
		...,
		setWebUrl: (newUrl) => { window.history.pushState({}, "", newUrl); }
	}}
	apiUrlConfig={{ ... }}
	onEvent={({type, message, value, state}) => { }}
	currentPath={currentPath}
	>
	... 
</UnbxdSearchWrapperSSR>

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.

Middlewares

To manage headers during the first render in SSR, use Middlewares. Middleware can capture headers like Authorization for authenticated requests, User-Agent for device-specific content, or Accept-Language for localization etc. The captured headers can be passed to the server-side rendering process, where the initial render will customize content based on these headers.

export function middleware(request: NextRequest) {
	const headers = new Headers(request.headers);
	headers.set("x-path-name", request.nextUrl.href);
	return NextResponse.next({ headers });
}

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) => {
		window.history.pushState({}, "", newUrl);
	}
}

• If you are using React router below can be the code for customizing the behaviour of the url.

const navigate = useNavigate();
 
const webUrlConfig = {
	// ... other configs ...
	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 capture 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 :

Send the current web url here, this helps sdk to maintain the state of the application.

• Default Value: "".