Product Search with our JS SDK

Our SDK helps making requests against our API eaiser for you. It works both with strongly-typed TypeScript and with JavaScript. You can also use it direcly via a CDN provider. Read more about that here. If you do use it directly from a CDN, then all of our types are namespaced with a Relewise.-prefix. So to get the searcher you need to write new Relewise.Searcher() instead of new Searcher().

Before going any further, make sure you have read the following:

• Read about how to authenticate against our API here.
• Read about handling different types of users here.

The following shows an example on how to perform a product search with 3 selected facets.

const settings = {
    language: 'da-DK',
    currency: 'DKK',
    displayedAtLocation: 'Search Page',
    user: UserFactory.anonymous()
};

const builder = new ProductSearchBuilder(settings)
    .setSelectedProductProperties({
        displayName: true
    })
    .setSelectVariantProperties({
        displayName: true
    })
    .setTerm('shoe')
    .pagination(p => p
        .setPageSize(30)
        .setPage(1))
    .facets(f => f
        .addBrandFacet()
        .addSalesPriceRangeFacet('Product')
        .addVariantSpecificationFacet('Size')
    );

const searcher = new Searcher(RELEWISE_DATASET_ID, RELEWISE_API_KEY, {
    serverUrl: RELEWISE_SERVER_URL,
});
searcher.searchProducts(builder.build());

By using setSelectedProductProperties or setSelectedVariantProperties it is possible to select the specific properties, from Relewise, that you need for rendering a product tile, list etc.,. That way we can store fields that is needed for e.g. filtering or Merchandising, but maybe is not needed when rendering the actual product. That way we can reduce the payload on the HTTP responses, by only returning a minimum set of the information that is needed.

Using facets and selecting values.

The following code in the example will return a facet with the different brands from the products matching the search.

.addBrandFacet()

When the user selects a brand, update the code to the following:

.addBrandFacet(['HP'])

GetProductFacet

You can use GetProductFacet to easily extract the facet with the correct typings using our helper:

const facet: BrandFacetResult | null = GetProductFacet.brand(result.facets);

You can learn more about facets here.

Product Listing Pages

You can also use our Search API for category pages. When using the Search API for category pages, you leave out the setTerm() call to not filter products by search terms. Here is an advanced example of how to get products in a category by using a productCategoryIdFilter, added in the filters method

The examples also shows how to select product properties, add assortment filters, use facets and how to perform sorting - here we sort by products being in stock, but you could also sort by price or any property on the product.

const settings = {
    language: 'da-DK',
    currency: 'DKK',
    displayedAtLocation: 'Search Page',
    user: UserFactory.anonymous()
};

const builder = new ProductSearchBuilder(settings)
    .setSelectedProductProperties({
        displayName: true,
        pricing: true,
        dataKeys: ['Url', 'ShortDescription', 'ImageUrls', 'DK_*']
    })
    .pagination(p => p
        .setPageSize(30)
        .setPage(1))
    .facets(f => f
        .addBrandFacet(['HP', 'Lenovo'])
        .addSalesPriceRangeFacet('Product', 100, 500)
        .addVariantSpecificationFacet('Size', ['XL'])
    )
    .filters(f => f
        .addProductAssortmentFilter(1)
        .addVariantAssortmentFilter(1)
        .addProductCategoryIdFilter('ImmediateParent', ["category_id"])
    )
    .sorting(s => s
        .sortByProductData('InStock', 'Product', 'Descending', (n) => n
            .sortByProductRelevance()));

const searcher = new Searcher(RELEWISE_DATASET_ID, RELEWISE_API_KEY, {
    serverUrl: RELEWISE_SERVER_URL,
});
searcher.searchProducts(builder.build());

When using sorting, it is important to also sort by relevance after sorting by stock, new products, etc., so that you still get the benefit of personalized results.

Batching Search Requests in TS/JS

Similar to filtering, API requests to Relewise may be batched to reduce overall load and improve loading speed on the website.

Below is an example of a batched request:

const settings = {
    language: 'da-DK',
    currency: 'DKK',
    displayedAtLocation: 'Search Page',
    user: UserFactory.anonymous(),
};

const requestBuilder = new SearchCollectionBuilder()
    .addRequest(new ProductSearchBuilder(settings)
        .setSelectedProductProperties({
            displayName: true,
        })
        .setTerm('shoe')
        .pagination(p => p
            .setPageSize(30)
            .setPage(1))
        .facets(f => f
            .addBrandFacet()
            .addSalesPriceRangeFacet('Product')
            .addVariantSpecificationFacet('Size'),
        ).build())
    .addRequest(new ProductCategorySearchBuilder(settings)
        .setSelectedCategoryProperties({
            displayName: true,
            paths: true,
            dataKeys: ['Description', 'ImagePath'],
        })
        .setTerm('shoe')
        .filters(f => f
            .addProductCategoryAssortmentFilter(1),
        ).build());

const searcher = new Searcher(RELEWISE_DATASET_ID, RELEWISE_API_KEY, {
    serverUrl: RELEWISE_SERVER_URL,
});
searcher.batch(requestBuilder.build());