All Collections
Recommendations
FAQ
Useful Design Patterns for Recommendation Templates
Useful Design Patterns for Recommendation Templates

HTML/CSS code examples for recommendation templates

Dan Macarie avatar
Written by Dan Macarie
Updated over a week ago

Here are some design patterns that can be useful when working with Nosto recommendation templates.

Setting a minimum amount of products to show

Wrap the entire template in a conditional that checks that there are products to show. This way the none of the markup related to the recommendation element will be rendered if the product count is smaller than the limit. Omitting the clause would leave recommendation element and heading visible even if there are no recommendations to show, which is usually not desired.

Checking that there is at least one product to show is usually always recommended.

#if($products.size() >= 4)
 
## Only visible if there are four or more products  
 
<div class="nosto-recommendation">
...
</div>
 
#end

Change the number in the if clause to change the minimum amount. A higher limit can be useful if you don’t want to initialize a carousel when there are too few products.

#if($products.size() > 0)

<div class="nosto-recommendation">
...
</div>

#end

Did this answer your question?