SaaS CMS has officially launched! Learn more now.

Binh Nguyen Thi
Jul 1, 2024
  242
(0 votes)

Optimizely Search and Navigation - Part 2 - Filter Tips

Introduction

Continuing from Part 1 – Search Tips, today I will share the next part – filter tips.

The platform versions used for this article are Optimizely CMS 12.27.x, Optimizely Customized Commerce 14.21.x, and EpiServer.Find 16.1.x.

How to Add a New Custom Filter

In the built-in Optimizely Search & Navigation, the default filters are as follows:

  • And Filter
  • Bool Filter
  • Exists Filter
  • Geo Distance Filter
  • Geo Distance Range Filter
  • Geo Polygon Filter
  • Has Child Filter
  • Ids Filter
  • Kilometers Filter
  • Nested Filter
  • Not Filter
  • Or Filter
  • Prefix Filter
  • Query Filter
  • Range Filter
  • Script Filter
  • Term Filter

These filters generate corresponding body text when sending requests to Elasticsearch through the Search & Navigation framework using JSON converters.

What if a filter exists in Elasticsearch but not in Search & Navigation, or an existing filter lacks required parameters? Can you create a new filter?

Yes, you can add new custom filters in Search & Navigation. Here's how to build a new Regular Expression filter.

Step 1: Create a New DTO Based on Filter Class

[JsonConverter(typeof(RegularExpressionFilterConverter))]
public class RegularExpressionFilter : Filter
{
    [JsonIgnore]
    public string Field { get; set; }

    [JsonProperty("value")]
    public string Value { get; set; }

    public RegularExpressionFilter(string field, string value)
    { 
        Field = field;
        Value = value;
    }
}

Step 2: Create a New JSON Converter for the New Filter

internal class RegularExpressionFilterConverter : CustomWriteConverterBase<RegularExpressionFilter>
{
    public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer)
    {
        if (value is not RegularExpressionFilter)
        {
            writer.WriteNull();
            return;
        }
        var regularExpressionFilter = (RegularExpressionFilter)value;
        writer.WriteStartObject();
        writer.WritePropertyName("regexp");
        writer.WriteStartObject();
        writer.WritePropertyName(regularExpressionFilter.Field);
        serializer.Serialize(writer, regularExpressionFilter.Value);
        writer.WriteEndObject();
        writer.WriteEndObject();
    }
}

Step 3: Create a New Filter Method for Your Search

public static DelegateFilterBuilder MatchRegularExpression(this string value, string input)
{ 
   return new DelegateFilterBuilder((string field) => new RegularExpressionFilter(field, input));
}

Step 4: Apply the New Filter to Your Search

if (!string.IsNullOrEmpty(filterOptions.Q)){
    query = query.Filter(x => x.Name.MatchRegularExpression(filterOptions.Q));
}

The keyword for search in this example could be text within regular expression syntax. You can find syntax for ElasticSearch here.

How to Apply AND/OR for a Group of Sub Filters

Consider the following example:

You have a product content type with these properties:

[Display(Name = "On sale", GroupName = SystemTabNames.Content, Order = 50)]
public virtual bool OnSale { get; set; }

[Display(Name = "New arrival", GroupName = SystemTabNames.Content, Order = 55)]
public virtual bool NewArrival { get; set; }

[Display(Name = "Best seller", GroupName = SystemTabNames.Content, Order = 58)]
public virtual bool BestSeller { get; set; }

To find products that are on sale and/or new arrivals, you can:

Use AND/OR Operator in FilterExpression:

  • AND operator
query = query.Filter(x => x.OnSale.Match(true) & x.NewArrival.Match(true));
  • OR operator
query = query.Filter(x => x.OnSale.Match(true) | x.NewArrival.Match(true));

Use AND/OR Filter:

  • AND filter
var andFilter = new AndFilter();
andFilter.Filters.Add(new TermFilter(searchClient.GetFullFieldName("OnSale", typeof(bool)), true));
andFilter.Filters.Add(new TermFilter(searchClient.GetFullFieldName("NewArrival", typeof(bool)), true));
query = query.Filter(andFilter);
  • OR Filter
var orFilter = new OrFilter();
orFilter.Filters.Add(new TermFilter(searchClient.GetFullFieldName("OnSale", typeof(bool)), true));
orFilter.Filters.Add(new TermFilter(searchClient.GetFullFieldName("NewArrival", typeof(bool)), true));
query = query.Filter(orFilter);

Note that the field name understood by Elasticsearch is not the same as the field name in the Optimizely Content Type Model. Use the following method to get the indexed field name:

public static string GetFullFieldName(this IClient searchClient, string fieldName, Type type)
{
    if (type != null)
        return fieldName + searchClient.Conventions.FieldNameConvention.GetFieldName(Expression.Variable(type, fieldName));
    return fieldName;
}

Pros and Cons:

  • Using AND/OR Operator: Short and easy to use but not suitable for dynamically building filters.
  • Using AND/OR Filter: Longer code but allows for flexible filter building based on field names and input values.

How to Sort Search Results Based on a Set of Conditions

Search & Navigation allows sorting based on one or more fields:

query = query.OrderBy(x => x.Name).ThenByDescending(x => x.StartPublish);

Example Requirement: Display best seller products at the top, followed by new arrivals, and then on sale products.

You can achieve this by using boost matching:

query = query.BoostMatching(x => (x as GenericProduct).NewArrival.Match(true), 2);
query = query.BoostMatching(x => (x as GenericProduct).OnSale.Match(true), 3);
query = query.BoostMatching(x => (x as GenericProduct).BestSeller.Match(true), 4);

Issue: If a product is both on sale and a new arrival, it appears at the top even if it is not a best seller. The score of this product (5) is higher than that of a best seller (4).

Solution: Ensure best sellers are always on top by setting Boost value as following rule: Next boost value = total of all previous boost values + 1:

query = query.BoostMatching(x => (x as GenericProduct).NewArrival.Match(true), 2);
query = query.BoostMatching(x => (x as GenericProduct).OnSale.Match(true), 3);
query = query.BoostMatching(x => (x as GenericProduct).BestSeller.Match(true), 6);

Conclusion

These tips are based on my experience with Search & Navigation. I hope they help you implement similar features.

Enjoy coding!

Jul 01, 2024

Comments

Please login to comment.
Latest blogs
Getting Started with Optimizely SaaS using Next.js Starter App - Extend a component - Part 3

This is the final part of our Optimizely SaaS CMS proof-of-concept (POC) blog series. In this post, we'll dive into extending a component within th...

Raghavendra Murthy | Jul 23, 2024 | Syndicated blog

Optimizely Graph – Faceting with Geta Categories

Overview As Optimizely Graph (and Content Cloud SaaS) makes its global debut, it is known that there are going to be some bugs and quirks. One of t...

Eric Markson | Jul 22, 2024 | Syndicated blog

Integration Bynder (DAM) with Optimizely

Bynder is a comprehensive digital asset management (DAM) platform that enables businesses to efficiently manage, store, organize, and share their...

Sanjay Kumar | Jul 22, 2024

Frontend Hosting for SaaS CMS Solutions

Introduction Now that CMS SaaS Core has gone into general availability, it is a good time to start discussing where to host the head. SaaS Core is...

Minesh Shah (Netcel) | Jul 20, 2024

Optimizely London Dev Meetup 11th July 2024

On 11th July 2024 in London Niteco and Netcel along with Optimizely ran the London Developer meetup. There was an great agenda of talks that we put...

Scott Reed | Jul 19, 2024

Getting Started with Optimizely SaaS using Next.js Starter App - Configure local development - Part 2

This is part 2 of a proof-of-concept (POC) blog. In this post, I will guide you through the steps to configure your SaaS instance with your local...

Raghavendra Murthy | Jul 19, 2024 | Syndicated blog