Here’s a bare-bones example of a recommendation template that outputs the HTML for product recommendations:
<h5>$!title</h5>
<ul>
#foreach($product in $products)
<li>
<a href="!$product.url"><img src="$product.thumb(1)" alt=""></a>
<div>
<a class="name" href="$!product.url">$!product.name.truncate(24)</a>
<div class="price">$!product.price</div>
</div>
</li>
#end
</ul>
The template outputs a heading and an unordered list populated with the product image, name and price. For more control over how the recommendation will look like you might want to add some class attributes to the rendered elements, depending on the CSS styles set in your site’s stylesheets. You can also use the class pattern we use in our default elements:
<div class="nosto-recommendation">
<div class="nosto-header">$!title</div>
<ul class="nosto-product-list">
#foreach($product in $products)
<li class="nosto-product-list-item">
<a class="nosto-product-image" href="!$product.url">
<img src="$product.thumb(1)" alt="">
</a>
<div class="nosto-product-info">
<a class="nosto-product-name" href="$!product.url">$!product.name.truncate(24)</a>
<div class="nosto-product-price">$!product.price</div>
</div>
</li>
#end
</ul>
</div>
Displaying a discounted price
When outputting the price you can do a check to see if the product is on sale and display the old price in addition to the current price. Note that the product information is only available inside the foreach loop.
## only works inside the foreach loop
#if($product.discounted)
<div class="discounted-price">
$!product.price <span class="regular-price">($!product.listPrice)</span>
</div>
#else
<div class="price">
$!product.price
</div>
#end
You can also make changes to the markup and classes to make the discounted price stand out more by styling them differently.
A full list of supported variables can be found in templating language reference.