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.
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
- 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].featuresarray. 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
- If a feature cannot be edited in SKUs’ properties then its values must be obtained must be obtained only from the
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:
$products[id].featuresvariable 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
It was similar to the common product comparison, with the difference that feature values specified in product variants’ properties were not taken into account.