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:

1. Show products we've already viewed.
2. 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