Appearance
Filtering products in search or recommendations with our TS/JS client
Looking for setup prerequisites, authentication details, and package references? Start with the TypeScript / JavaScript SDK landing page.
In the examples we will be performing filtering on a Search request, but you can use filters for recommendation requests as well. You will need an instance of our Searcher:
ts
const searcher = new Searcher(RELEWISE_DATASET_ID, RELEWISE_API_KEY, {
serverUrl: RELEWISE_SERVER_URL,
});Before going any further, read about handling different types of users here.
It is recommended that you start by reading about product search.
Different assortments
A common scenario is handling different assortments. You might have products that are unique to specific markets or specific customers on the same website using Relewise. Here the assortments might be overlapping but not identical, so we need some way of only showing the products that are available in the given context. There are 2 different ways of handling this.
The first option is to use our Assortment feature, and specify an Assortment value for each market/customer (these have to be numbers) on all products.
ts
const product = new ProductUpdateBuilder({
id: 'productId',
productUpdateKind: 'ReplaceProvidedProperties',
})
.assortments([1, 2])
.build();Then when performing a search you want to add a product assortment filter to the search request.
ts
const settings = {
language: 'da-DK',
currency: 'DKK',
displayedAtLocation: 'Search overlay',
user: getUser(),
};
const builder = new ProductSearchBuilder(settings)
.setTerm('<search-term>')
.pagination(p => p
.setPageSize(10)
.setPage(1))
.filters(f => f
.addProductAssortmentFilter(1));
const response = await searcher.searchProducts(builder.build());If you are using Variants, and these also can be specific to market/customer then you can use the mechanism on variants and add an assortment to those.
Using the Data-bag to handle assortment
The second option is using the Products Data-bag to add a list of shops, where the product is available and then filter on those.
ts
const product = new ProductUpdateBuilder({
id: 'productId',
productUpdateKind: 'ReplaceProvidedProperties',
})
.data({
AvailableOnMarkets: DataValueFactory.stringCollection(['DK', 'DE']),
})
.build();Then when performing a search you want to add a product data filter to the search request.
ts
const settings = {
language: 'da-DK',
currency: 'DKK',
displayedAtLocation: 'Search overlay',
user: getUser(),
};
const builder = new ProductSearchBuilder(settings)
.setTerm('gaffel')
.pagination(p => p
.setPageSize(10)
.setPage(1))
.filters(f => f
.addProductDataFilter(
'AvailableOnMarkets',
c => {
c.addContainsCondition(DataValueFactory.string('DK'));
},
true,
true,
false));
const response = await searcher.searchProducts(builder.build());In Stock
Hiding products that are out of stock, can be achieved by adding an InStock indicator on products, like so:
ts
const product = new ProductUpdateBuilder({
id: 'productId',
productUpdateKind: 'ReplaceProvidedProperties',
})
.data({
InStock: DataValueFactory.boolean(true),
})
.build();Then when performing a search you want to add a product data filter to the search request.
ts
const settings = {
language: 'da-DK',
currency: 'DKK',
displayedAtLocation: 'Search overlay',
user: getUser(),
};
const builder = new ProductSearchBuilder(settings)
.setTerm('gaffel')
.pagination(p => p
.setPageSize(10)
.setPage(1))
.filters(f => f
.addProductDataFilter(
'InStock',
c => {
c.addEqualsCondition(DataValueFactory.boolean(true));
},
true,
true,
false));
const response = await searcher.searchProducts(builder.build());You can learn more about filters here.