Showing recently viewed products
When it comes to stores with large catalogues, it's easy to lose track of products you've looked at. Adding recently viewed product information to your website can help return users to products and aid conversion.
Evance does not track recently viewed data server-side, but we've published a client-side JavaScript plugin which utilises Evance's Ajax APIs and is easy to implement in to any Evance theme. In fact, the plugin isn't limited to tracking recent products and may be used to highlight recently viewed pages and/or categories.
Step 1: Download an install the Recently Viewed plugin
First, head over to the evanceit/theme-recently-viewed-js
Github
repo and copy the recently-viewed.js
file into your theme at a location like ~/theme/common/js/recently-viewed.js
.
Now include this file into your ~/theme/common/js/common.json
JavaScript packaging file.
{
"files": [
...
"˜/theme/common/js/recently-viewed.js"
]
}
Step 2: Add a JavaScript template
Within your product Template (e.g. ~/theme/product/index.evml
) add a new <div>
to
contain your recently viewed items. By default, this should have an ID of recently-viewed
.
<div id="recently-viewed"></div>
Then, create a new JavaScript template to render product information. In this example we'll assume we already have an EVML partial used to render Product cards in categories (e.g.
~/theme/category/product.partial.evml
).
We can use this partial to render individual products server-side, which makes our lives easier when it comes to maintaining
consistent product display.
<script id="recently-viewed-template" type="text/x-template">
<div class="recent-product" data-productid="<%= product.id %>">
<%= fragment %>
</div>
</script>
The <%= fragment %>
is where our ~/theme/category/product.partial.evml
will
be rendered.
Note, the product
object illustrated in <%= product.id %>
will
be available based on the Product Search Ajax API properties. This
means you could construct your template using only the available product properties, but we're going to use fragment
rendering for simplicity.
Step 3: Implement the RecentlyViewed plugin
Now, we can add our JavaScript to do two things:
- Show products we've already viewed.
- Register the current product page into our list of recently viewed products.
<script>
window.addEventListener('load', (event) => {
// Show recently viewed items
RecentlyViewed.show('product', {
fragment: '˜/theme/category/product.partial'
});
// Register the current product
RecentlyViewed.register('product', {{ product.id }});
});
</script>
With this plugin installed, you should now begin to see recently viewed products as you browse your site.
Customisation
Get the knowledge and inspiration
Get the knowledge and inspiration you need to build a profitable business — straight to your inbox.
Unsubscribe any time! / Privacy Policy