Product Search with our JS SDK

Our SDK helps making requests against our API easier for you. It works both with strongly-typed TypeScript and with JavaScript. You can also use it directly 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
    })
    .setSelectedVariantProperties({
        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, you can select the specific properties from Relewise that you need for rendering a product tile or list. That way we can store fields that are needed for filtering or merchandising but may not be needed when rendering the actual product. This reduces the payload on the HTTP responses by returning only the information that is required.

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 example 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.

Control Facet Values Limit and Sorting

You can configure the maximum number of facet values returned for a single facet. When you set a limit, you can also sort these values by the number of hits, this will sort the facet values by the number of hits from highest to lowest. It's also possible to specify the sorting, even without setting a take limit.

.facets(f => f.addCategoryFacet(
    "ImmediateParent", 
    [], // selected values go here
    b => b.take(50).sortByHits())
);

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());