Product comparison

The product comparison feature allows visitors to compare features of products in a tabular way. A content editor can configure what catalog fields to display in the comparison per product type.

A webshop vistor can:

  1. Add products to the comparison
  2. View a summary of the products currently in the comparison
  3. See a status link with the number of products that links to the comparison
  4. See the results of the comparison in a tabular way
  5. Change the reference product
  6. Remove products from the comparison
  7. Clear the comparison
  8. Hide fields that have equal values
  9. Add products from the comparison to the cart
  10. Add products from the comparison to the wishlist

The content editor can:

  1. Configure the catalog fields to display per product type
  2. Configure custom comparers
  3. Configure the comparers to use per catalog field

Design

Model

The IFieldComparer interface is the workhorse of the comparison. The implementors of this interface will perform the comparison of a field between two products. There are two default implementations for comparing and annotating the field of two products. The EqualityFieldComparer compares fields for which it only matters if the result is equal or not and it allows the user to annotate this result with an equal and unequal text. The OrderedFieldComparer can be used for values for which the order also matters. Comparing numeric values or prices for example. The result can be annoted with a less than, equal and greater than text.

Product comparison model

React components

A product comparison view is generated using the React components located in UI/components. The components are structured as follows:

  • addtocomparison.jsx
  • bar.jsx
  • clearbutton.jsx
  • statuslink.jsx
  • table.jsx
  • bar
    • productblock.jsx
    • ..
  • shared
    • productblock
      • title.jsx
      • ..
  • table
    • productblock
    • propertyset
    • property
    • description.jsx
    • ..

At the top level table.jsx can be used to display the results of the comparison. The bar.jsx can be used to display a summary of the comparison. The statuslink.jsx is a small link to the comparison page, with an indication of the number of products in the comparison. The Bar and the Table share some components for displaying the product block. The table contains propertyset and property components for displaying the results of the comparison. This structure closely follows the model and adheres to the atomic design principle that components should consist of (replaceable) building blocks.

Functionality

Visitor

Add products to the comparison

Products can be added to the comparison from within product blocks and from the product detail page. The button can be added to the product details page by adding the /sitecore/layout/Renderings/Mercury/Feature/ProductComparison/AddToComparison rendering. The add to comparison button in the product blocks is automaticaly added when the feature is installed. This can be switched of by disabling the Enable Comparison field in the comparison settings. The settings can be defined by creating a Sitecore item based on the /sitecore/templates/Mercury/Feature/ProductComparison/Settings/ProductComparisonSettings templates within the Site node.

View a summary of the products currently in the comparison

The summary can be added by adding the /sitecore/layout/Renderings/Mercury/Feature/ProductComparison/ComparisonBar rendering to the page.

The status link can be added by adding the /sitecore/layout/Renderings/Mercury/Feature/ProductComparison/ComparisonStatus rendering to the page. The link of the page that contains the comparison can be configured in the comparison settings item described earlier.

See the results of the comparison in a tabular way

The comparison results can be displayed by adding the /sitecore/layout/Renderings/Mercury/Feature/ProductComparison/ComparisonTable rendering to the page. The fields displayed can be configured per product type. See the functionality for the content editor below on how to do this.

Change the reference product

Each product shown in the comparison result that is not the reference product will have a button to make it the reference product. Clicking that button will re-execute the comparison with this product as the reference or "main" product.

Remove products from the comparison

Each product in the comparison result has a button to remove it from the comparison.

Clear the comparison

The clear button displayed in the comparison summary will remove all the products from the comparison.

Hide fields that have equal values

The comparison results rendering shows a button that allows you to filter out all the catalog fields for which the values of the products are equal. In short: this will only show the differences between products.

Add products from the comparison to the cart

Each product in the comparison results can be directly added to the cart.

Add products from the comparison to the wishlist

Each product in the comparison results can be directly added to the wishlist.

Content editor

Configure the catalog fields to display per product type

The fields displayed in the comparison can be configured per product type. The product type settings need to derive from /sitecore/templates/Mercury/Feature/ProductComparison/_ComparableProductType, so you will need to create a project specific product type settings template that derives from this one and from the default Mercury product type settings template. This _ComparableProductType template adds a property sets used in comparison field to the product type settings, which can be used to select the property types that should be displayed in the comparison.

If products with different product types are used in the comparison, it will show a union of all the property types configured for those property types.

Configure custom comparers

Comparers can be added by creating a folder based on the /sitecore/templates/Mercury/Feature/ProductComparison/Comparer Folder template in the settings of the site node. This folder will have insert options for adding the equality- and orderedcomparers described earlier. The comparers that you add here are the ones you can select when configuring the comparer for a catalog field. If you have any custom field comparers you should create a new folder template that derives from the Comparer Folder. Add your custom field comparer to the insert options of the new templates standard values.

Configure the comparers to use per catalog field

The comparer used for a certain catalog field can be configured by having the catalog field derive from the /sitecore/templates/Mercury/Feature/ProductComparison/_ComparableCatalogField template. For this content type is also best to create project specific templates that derive from the default catalog field templates and this one. This template adds a comparer dropdown field to the catalog field.

If a catalog field has no comparer or does not derive from the comparable catalog field template, only its value will be shown.

Configure image sizes

Different image sizes can be configured for the comparison table and summary components. Please refer to your website configuration for the location where the image sizes are located.

Configuration

To get started with the Product Comparison feature this feature needs to be configured. The following steps needs to be done:

  • Configure the default comparer of Mercury:
    • Create a folder ProductComparison in the Mercury system settings located at: /sitecore/system/Settings/Mercury/.
    • Create a folder Comparers in the previously created folder.
    • Add an instance of the /sitecore/templates/Mercury/Feature/ProductComparison/Comparer template to the Comparers folder.
    • Set the factory type to Mercury.Feature.ProductComparison.Comparers.Annotated.ValueComparers.DefaultComparer, Mercury.Feature.ProductComparison.
  • Add the Product Comparison Settings (/sitecore/templates/Mercury/Feature/ProductComparison/Settings/ProductComparisonSettings) in your site root in Sitecore. This is usually placed in a settings folder which is part of your site root.
  • Configure the comparison settings:
    • Enable comparison.
    • Set max number of products in comparison.
    • Configure a comparison page (optional)

  • Create the image sizes for the comparison table and summary components with the following names:

    • ComparisonTableImage
    • ComparisonBarImage

    Please refer to your website configuration for the location where the image sizes are located.

  • Create project specific product type settings which is derived from /sitecore/templates/Mercury/Feature/ProductComparison/_ComparableProductType.
  • Update existing product type settings to use this template.
  • Create project specific catalog field templates which derives from the default catalog field template and /sitecore/templates/Mercury/Feature/ProductComparison/_ComparableCatalogField.
  • Update existing catalog fields to use project specific template.
  • Add comparison components (renderings) to layouts e.g.
    • Add comparison table to comparison page.
    • Add comparison status to all pages.
    • Add comparison bar to all pages.

Extension points

Pipelines

The following pipelines are offered as extension points for customization:

  • mercury.productComparison.compareProducts
  • mercury.productComparison.getPropertySets
  • mercury.productComparison.translateFieldComparer
  • mercury.productComparison.executeComparison

mercury.productComparison.compareProducts

This pipeline receives a list of property sets and products and executes the comparison.

mercury.productComparison.getPropertySets

Retrieves the property sets to display the comparison based on the list of products that need to be compared. The default processor does this based on the _Comparable templates.

mercury.productComparison.translateFieldComparer

Translates a comparer sitecore item to an implementation that implements the IFieldComparer interface. This pipeline can be used to create a custom comparer.

mercury.productComparison.executeComparison

This pipeline coordinates the comparison itself and uses the other pipelines to execute the comparison.

Creating a custom value comparer

The default field comparers (Ordered and Equality) use the .NET comparer mechanism for comparing the values themselve. The default comparer is configured out of the box, if you would like to add a different or create your own, you have to:

  1. Create the comparer by deriving from IComparer.
  2. Create a factory by deriving from IComparerFactory.
  3. Instantiate and return the comparer from the factory.
  4. Add an instance of the /sitecore/templates/Mercury/Feature/ProductComparison/Comparer template to the /sitecore/system/Settings/Mercury/ProductComparison/Comparers folder.
  5. Configure the fully qualified name of the factory created in step 2 in the factory type field.

Creating a custom field comparer

If the default mechanism doesn't suite your needs, then it's possible to create your own field comparer. An example of when you would need this is when you want to compare multiple field at once. To create a custom field comparer:

  1. Create custom field comparer template, which is used to configure the comparer.
  2. Create the comparer, which needs to derive from the IFieldComparer interface.
  3. Create a custom pipeline processor for the mercury.productComparison.translateFieldComparer pipeline, that takes an instance of the sitecore template and returns an instance of the comparer.

Now when the content editor create a Sitecore item based on the new comparer template and adds it to the comparers, it can be selected as comparer in the comparable catalog fields. When a comparison is done, this comparer will be used for that catalog field.