Adding related products to product templates

Cross-selling related products is a key feature allowing product managers to direct their consumers to... related products.

There are ways of automating product relationships, but in this article we'll explore the key feature of displaying related products lovingly hand-selected by administrators within Evance's product manager. This is done using the Product.related() method which returns a ProductCollection Array containing zero or more Product objects.


<?ev if (product.related().length) { ?>
    
    Related Products
    
<?ev } ?>

In the example above we're ensuring there are related products before showing content.

Now we can iterate across related products in the same way you would when displaying products within a Category. You might like to keep your design consistent with products shown in categories. This is where partials come in handy, and can be included into the page using <ev:include>.


<?ev if (product.related().length) { ?>
    
    Related Products
    
    <?ev for (var related of product.related()) { ?>
        <ev:include src="category/product.partial" product="related" />
    <?ev } ?>
    
<?ev } ?>

In the code above we're including an EVML template partial ~/theme/category/product.partial.evml into the page and mapping the "related" variable created within our for loop to the partial's "product" variable. Utilising partials in this way can dramatically speed up the development of themes, but relies on consistency within your design and/or structure.