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.