@unbxd-ui/unbxd-search-core

search-JS-core

Core library for Search JS

Getting started

this library is the dependancy for search-JS-library and react-search-JS-SDK, provides the api for interacting with search api.

Prerequisites

Install npm

Setting Up

• use node 14.15.0

Install the npm packages & start the dev server using following commands

npm install
npm run start

ES6

Install @unbxd-ui/unbxd-search-core using npm.

npm install @unbxd-ui/unbxd-search-core --save

Import the UnbxdSearchCore function in your project

import  UnbxdSearchCore  from  "@unbxd-ui/unbxd-search-core";

Basic Implementation

      const unbxdCore =  new UnbxdSearch({
          siteKey: "demo-unbxd700181503576558",
          apiKey: "fb853e3332f2645fac9d71dc63e09ec1",
          searchEndPoint:"https://search.unbxd.io/",
          productType:"SEARCH",
          searchQueryParam:"q",
          browseQueryParam:"p",
          updateUrls:true,
          productAttributes: ['title','uniqueId'],
          platform: "IO",
          onEvent:unbxdCallback,
          facetMultiSelect: true,
          defaultFilters :null,
          spellCheck: true,
          pageSize: 5,
          sortOptions : [
              {
                  value:"price desc",
                  text:"Price High to Low"
              },
              {
                  value:"price asc",
                  text:" Price Low to High"
              }
          ],
          variants:{
            enabled:false,
            count:1,
            groupBy:'',
            attributes:[],
            mapping:{
                "image_url":"v_image_url"
            }
        },
          facetMultilevel: true,
          facetMultilevelName: 'category',
          multiLevelFacetSelector:"bucketFacetElem",
          extraParams :{
              "version":"V2",
              "facet.multilevel":"categoryPath",
              "f.categoryPath.displayName":"category",
              "f.categoryPath.max.depth":"4",
              "f.categoryPath.facet.limit":"100"
          },
          facetDepth:4,
          breadcrumb:true,
          showSwatches:false,
          swatchMap:{
              "swatchList":"colours",
              "swatchImgs":"variant_metadata",
              "swatchColors":"unbxd_parentcolours"
          },
          hashMode:false,
          applyMultipleFilters:false,
          getCategoryId:()=>{
              return encodeURIComponent(window.UnbxdAnalyticsConf["page"])
          },
          setCategoryId:(param, self)=>{
            //you can set your category page ids
          },
              onQueryRedirect:(self, redirect, urlBeforeRedirect)=>{
    if(redirect) {
        const {
            value,
            type
        } = redirect;
        if(type === "url") {
            /** If opening in same tab */
            if(history.state && history.state.replace) {
                history.replaceState(null,"",urlBeforeRedirect);
            }
            
            location.href =  value;  

            /** If opening redirect in new tab (rare scenario), 
             * then browser back + history push on search should be handled by client 
             * (especially switching betsween category to search page scenarios)
             * Note: This is not recommended */                                                       
        }
        return false;
    }
},
onBackFromRedirect: (hashMode) => {
    let urlSearchParam = new URLSearchParams(hashMode ? location.hash.substring(1) : location.search);
    let backFromRedirect = urlSearchParam.get("redirected");
    if(backFromRedirect) {
        history.go(-1);
    }
},
      onNoUnbxdKeyRouting:() => {
            history.go();
      },
      
        setRoutingStrategies:(locationParam, newUrl, productType, isUnbxdKey, replace) => {
            if (locationParam === newUrl) {
                return;
            } else if (productType === "CATEGORY") {
                /** Do not navigate to base category page  */
                if (!isUnbxdKey) {
                    history.replaceState(null, "", newUrl);
                } else {
                    history.pushState(null, "", newUrl);
                }
            } else {
                if ((history.state && history.state.replace) || replace) {
                    history.replaceState(null, "", newUrl);
                } else {
                    history.pushState(null, "", newUrl);
                }
            }
        }
  });

  

SDK Apis

The available apis are listed here.