Product comparison table
The product comparison will display the products and their compared fields in a tabular way. The fields displayed can be configured per product type.
Property sets
The product comparison table contains propertyset
and property
components for displaying the results of the comparison. In the example output the propertyset
Specifications and Warranty are selected. See Usage on how to configure the propertyset
.
Navigation
The table navigation will be shown if the number of visible products are less than the total amount of products.
Example output
Change the reference product
Each product shown in the comparison table 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 table has a button to remove it from the comparison.
Hide fields that have equal values
The comparison table 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.
Usage
The product comparison table component can be used on any content page.
Property sets
In order to manage which product properties will be visible in the product comparison table you will have to add a propertyset
to the following Property Sets folder.
Path to the Property Sets
/sitecore/content/{mysite}/Catalog content/Property Sets
In the example output the Specifications propertyset
contains the properties: Brand, Price and Color. The Warrenty propertyset
contains the property: Warrenty. These propertysets are then selected in the Property sets used in comparison property
in the Default Product type settings which resides in at the following location.
Path to the Product type settings
/sitecore/content/{mysite}/Settings/Catalog/Product Types/Default
Path to component
/sitecore/layout/Renderings/Mercury/Feature/ProductComparison/ComparisonTable
Cache behavior
[ ] Cacheable
[ ] Clear on Index Update
[ ] Vary By Data
[ ] Vary By Device
[ ] Vary By Login
[ ] Vary By Parm
[ ] Vary By Query String
[ ] Vary By User
Data source
No data source
Rendering parameters
No rendering parameters
Resource texts
Name | Variables | Example |
---|---|---|
mercury-comparison-add-to-cart | Add to cart | |
mercury-comparison-remove-product | Remove product from comparison | |
mercury-comparison-set-reference | Set this product as the main reference product | |
mercury-comparison-show-equal-properties | Show all properties | |
mercury-comparison-hide-equal-properties | Show differences only | |
mercury-comparison-add-to-wishlist | Add to wishlist |