Products comparison in the storefront

As of Shop-Script version 8.21, users can compare products in the storefront in various ways:

  • common products comparison,
  • product variants comparison.

Common products comparison

In this case, all product variant’s feature values are displayed on the comparison page.

If some feature has no value specified for a product variant and there is a default value for the same feature specified in common product properties then such a default value is also displayed on the comparison page.

Product variants comparison

In this case, a user can select one of the variants of each product being compared. Only the feature values specified for the selected product variant are displayed in the table.

If some feature has no value specified for a product variant and there is a default value for the same feature specified in common product properties then such a default value is displayed.

Comparison implementation in a design theme

A design theme may support any of these comparison methods or both of them allowing an administrator to select the one which seems most appropriate for their online store.

Common comparison

For this method, you need to obtain feature values from the $products[id].features array, which is available in the comparison page template file compare.html, and display those vales to a user; e.g., in the form of a table.

The product price should be displayed as a range of values by taking into account all product variants’ prices. If a product has only 1 variant or if all product variants have equal prices then only one value should be displayed.

Comparison of selected product variants

You need to add tools for users allowing them to select product variants, which must update the contents of the comparison page to show only the properties of the selected variant and to hide other variants’ properties.

To implement this comparison mode, you need to check whether a particular feature can be edited in product SKUs’ properties. This information is available in the $features array in the form of Boolean values with the 'available_for_sku' key.

  • If a feature can be edited in SKUs’ properties then its values must be obtained for the selected product variant from the $products[id].skus[sku_id].features array. If a feature has no value specified in the selected variant’s properties then you need to use its value, if it is not empty, from the common product properties in the $products[id].features) array.
  • If a feature cannot be edited in SKUs’ properties then its values must be obtained must be obtained only from the $products[id].features array.

Only the price of the selected product variant should be displayed on the comparison page.

Support for Shop-Script versions below 8.21

Please take the following into account if you need to support the comparison logic in previous Shop-Script versions:

  • The $products[id].features variable contained only common product properties, without feature values specified in product variants’ properties.
  • Product variants’ features were not available in the comparison page template in the $products[id].skus[sku_id].features variable.

It was similar to the common product comparison, with the difference that feature values specified in product variants’ properties were not taken into account.