Adding specifications to products
Product specifications are the key to filtering products at category level, but may also be used to display important technical information on its profile page.
The Product.specifications()
method returns an Array of ProductSpecification objects.
You can determine if the Product has specifications by checking the Array length.
<?ev if (product.specifications().length) { ?>
Product Specifications
<?ev } ?>
Basic specification display
In there simplest form, each specification may be displayed as a simple title and value pair.
<?ev if (product.specifications().length) { ?>
Product Specifications
<table>
<?ev for (var specification of product.specifications()) { ?>
<tr>
<th>
{{ specification.title }}
</th>
<td>
{{ specification.value }}
</td>
</tr>
<?ev } ?>
</table>
<?ev } ?>
Types of specification
Evance supports a variety of specification types and you may decide to improve how specifications are displayed within your
product template. In the example above we're simply printing out ProductSpecification.value
,
but it contains a lot more information within a ProductSpecificationValue object
which will depend on the ProductSpecification.type
. For the list of available types please
read the ProductSpecification.type documentation.
Swatch example
Other than the default "string"
specification type, "swatch"
is commonly used by product managers
to show available colours for a product. A swatch will have a colour (e.g. #ff0000
) or an image URI, and
will always have a named value (e.g. Red).
In the example below we determine whether the product specification contains a swatch-based value with
ProductSpecification.isSwatch
.
<?ev if (product.specifications().length) { ?>
Product Specifications
<table>
<?ev for (var specification of product.specifications()) { ?>
<tr>
<th>
{{ specification.title }}
</th>
<td>
<?ev if (specification.isSwatch) { ?>
<span
class="swatch"
style="background-color: {{ specification.value.color }};" >
<ev:img src="{{ specification.value.image }}" />
</span>
<?ev } ?>
{{ specification.value }}
</td>
</tr>
<?ev } ?>
</table>
<?ev } ?>
Note: by using <ev:img>
in the example above the image is ignored if its not set
or does not exist.
Variable specifications
As well as being used for category filters, specifications are used to establish variations in products. For example, a Product
may be available in various sizes or colours. When a Product has variants, or is a variant, any number of its specifications
may be variable and can be determined using the ProductSpecification.isVariable
property.
Displaying specification variations is a matter of preference. Many merchants prefer to show only the specifications for
the current Product, which change upon variant selection. However, all variant specification
values are available within the ProductSpecification.values
property, which contains an Array of ProductSpecificationValue objects for all variants.
Inspecting the ProductSpecificationValue.productIds
Array will allow you to see which product variants apply to the specification.
This is useful information when changing product specifications based on the current variant selection client-side.