Initialise

The SDK provides two methods for fetching initial data, optimized for each Next.js routing pattern:

App Router (app/ directory)
Pages Router (pages/ directory)

Initial Data Fetching for App Router

Initial data fetching for App Router

Initial Data Fetching for Pages Router

Initial data fetching for Page Router

Arguments for initialise function

siteKey

string

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.

apiKey

string

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.

currentPath

string

required

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

Default Value: "".
Example Usage :

// This is a sample example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
import { headers } from "next/headers";
 
 
const SearchComponent = ()=>{
	const headerList = headers();
	const currentPath = headerList.get("x-path-name") || "";
	
	return <UnbxdSearchSSRWrapper currentPath={currentPath}> .... </UnbxdSearchSSRWrapper>
}

defaultValues

object

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

Config	Datatype	Default value	Example value
query	string	""	"pants"
currentPage	number	1	5
pageSize	number	12	24
view	string	""	"GRID"
sort	string	""	"price asc"

Example Usage:

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

webUrlConfig

object

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.

Config	Datatype	Default value	Description
hashMode	boolean	`false`	Turn this flag on if you want the URL to use `hash` (`#`) instead of using regular query string delimiter (`?`).
queryParamSeperator	string	`&`	Seperator used to seperate out each query param in the url.
keySeperator	string	`=`	Seperator used to seperate each param key and value.
orderOfParams	array	`[]`	Add the keys in the order you want them to appear in the url.
query	object	`{ addToUrl: true, key: "query" }`	- `addToUrl` : Turn to `true/false` to remove query param from the url. - `key` : Pass this to customize the query param key in the url.
imageQuery	object	`{ addToUrl: true, key: "image" }`	- `addToUrl` : Turn to `true/false` to remove image query param from the url. - `key` : Pass this to customize the image query param key in the url.
category	object	`{ addToUrl: true, key: "p" }`	- `addToUrl` : Turn to `true/false` to add/remove category page info from the url. - `key` : Whatever passed in here, is used as a key for the browse query param in the url.
sort	object	`{ addToUrl: true, key: "sort", values: {} }`	- `addToUrl`: Turn to `true/false` to add/remove the sort param from the url. - `key`: Whatever passed in here, is used as a key for the sort in the url. - `values`: This works as a replacer for the values of sort.
view	object	`{ addToUrl: false, key: "view", values: {} }`	- `addToUrl`: Turn to `true/false` to add/remove the view (`view`) param from the url. - `key`: Whatever passed in here, is used as a key for the view in the url. - `values`: This works as a replacer for the values of view
pageSize	object	`{ addToUrl: true, key: "rows" }`	- `addToUrl`: Turn to `true/false` to add/remove the pagesize (`rows`) param from the url. - `key`: Whatever passed in here, is used as a key for the pagesize in the url.
pagination	object	`{ addToUrl: true, key: "start", usePageNo: true}`	- `addToUrl` - Turn to `true/false` to add/remove the page (`page/start`) param from the url. - `key` - Whatever passed in here, is used as a key for the page in the url. - `usePageNo`: Indicates whether to use page numbers (1,2,3 etc) or indices (0,12,24 etc) in the url.
facets	object	`{ addToUrl: true, valuesSeparator: ",", keys: {}, values: {}}`	- `addToUrl`: When turned off, the filter string would not be added to the url. - `valuesSeparator`: Pass in the character which you would like to use as a seperator between the values for same facet. - `keys`: Replace the facet actual names with some custom names in the url . - `values`: Replace the facet actual values with some custom values in the url .
externalParams	object	null	These are the params other than what unbxd appends, that user wants to add and retain in the url . This can have either of three values : `null`, `[]`, `["location", "test_param"]`. (`null`: No external params will be considered, `[]`: All external params other than unbxd will be considered, `["location"]`: Whatever passed in here, for eg: location here will only be retained.)
rangeFacets	array	`[]`	Mention all the range facets names that you would be using.This would help sdk to render facets better.
categoryFacets	array	`[]`	Mention all the category facets names that you would be using.This would help sdk to render facets better.

Usage:

// This is a sample example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
webUrlConfig = {
	hashMode: false
	queryParamSeperator: "&"
	keySeperator: "="
	orderOfParams: []
	query: {
		addToUrl: true,
		key: "query",
	},
	imageQuery: {
		addToUrl: true,
		key: "image",
	},
	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: []
}

apiUrlConfig

object

This config allows you to pass some cutomization and additional features that are present to make in API URL.

Config	Datatype	Default value	Description
searchEndPoint	string	`"https://search.unbxd.io"`	- `searchEndPoint`: This is the endpoint that will be used to make the search api call.
category	object	`{browseQueryParam: 'p', page: '', page_type: '' }`	- `browseQueryParam` : parameter that will go in the api url . Values can be `p` or `p-id`. - `page`: Category page path needs to be passed in here.If left empty, page will be considered as a SEARCH page. - `page_type`: Type of the category page . Value can be `boolean`.
products	object	`{fields: []}`	- `fields`: Pass in the name of fields that needs to be extracted in the search response.
variants	object	`{enabled: false, count: 5, attributes: ["title", "v_imageUrl"], mapping: {"image_url": v_imageUrl}}`	- `enabled`: Determines whether the variants should be made available for the products or not. - `count`: Refers to the number of variants that needs to be shown for a product. - `attributes`: List of fields you need for each variant.
spellCheck	object	`{enabled: false}`	- `enabled`: This determines whether the spellcheck should be made available or not.
facetMultiSelect	boolean	`true`	Allows a user to select multiple values within a single facet .
uc_param	string	`""`
extraParams	object	`{}`	Allows to pass some extra params which are needed to be in the search api call. For the values it can be anything including `function`.
headers	object	`{}`	Headers is an object that takes in search api headers and passes it to the Search Api. For the User id and Device type pass it in as `Unbxd-User-Id` and `Unbxd-Device-Type`. Values can be anything including a `function`

💡

Note:

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.

Usage:

// This is a sample example. 
// Please go through the entire documentation for understanding different usecases and update as per your needs.
apiUrlConfig = {
	searchEndPoint: "https://search.unbxd.io",
	category: {
		browseQueryParam: "p",
		page: "",
		page_type: "boolean",
	},
	variants: {
		enabled: true,
		count: 6,
		attributes: ["title", "v_imageUrl"],
		mapping: { image_url: "v_imageUrl" },
	},
	spellCheck: {
		enabled: true,
	},
	facetMultiSelect: true,
	uc_param: "",
	extraParams: { test: "abc", key2: ()=>{
		return "value"
	} },
};

UnbxdSearchCSRWrapper Initialise Data For App Router