Adding a viewed product history

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

In this setup we will display a list of the most recent X products (to change the number of products assign a different value to the howManyItems variable) viewed by the current site visitor. The site visitor does not need to be authenticated to use this feature as the visited product IDs are stored in a cookie.

Step 1 - creating the cookie and pushing the viewed product IDs

The first step is to paste this bit of code in the Individual product (large) layout . This code snippet checks if the cookie exists and if so reads it and pushes the current product ID. If it does not exist the cookie is created and the ID of the current product is pushed.

Make sure jQuery and the jQuery cookie plugin are linked in the template.


<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://docs.worldsecuresystems.com/assets/libs/jquery.cookie.js"></script>
<script>
  currentProductId = "{{id}}";
  howManyItems = 5;
  if(parseInt(currentProductId) != "NaN" && typeof $.cookie('lastVisited') == "undefined") {
    $.cookie('lastVisited', currentProductId, {
      expires: 70,
      path: '/'
    });
  } else {
    currentValues = $.cookie('lastVisited');
    currentValues = currentValues.split(',');
    //remove item if it already exists
    if($.inArray(currentProductId, currentValues) > -1) {
      currentValues.splice($.inArray(currentProductId, currentValues), 1)
    }
    currentValues.push(currentProductId)
    if(currentValues.length > howManyItems) {
      $.cookie('lastVisited', currentValues.splice(-howManyItems), {
        expires: 70,
        path: '/'
      });
    } else {
      $.cookie('lastVisited', currentValues, {
        expires: 70,
        path: '/'
      });
    }
  }
</script>

Step 2 - rendering the products with the IDs stored in the cookie

Now we need to read the IDs stored in the cookie and render the products to build the "Last visited" list. Paste this bit of code wherever you want to show the recent products list:

{% if globals.cookie.lastVisited %}
{% assign prodIds = globals.cookie.lastVisited | append: "]" | prepend: "[" | split: "%2C" | join: "," %}
{module_data resource="products" version="v3" fields="canonicalUrl, name, smallImage" where="\{'id':\{'$in': {{prodIds}} \}\}" collection="lastProducts" template=""}
<h4>Your last visited products:</h4>
<ul>
    {% for item in lastProducts.items %}
    <li><a alt="{{item.name}}" href="{{item.canonicalUrl}}"><img alt="{{item.name}}" src="{{item.smallImage}}?Action=thumbnail&Width=50&Height=50"/></a></li>   
    {% endfor %}
</ul>
{% endif %}

This bit of code reads the product IDs and passes the list of products to a module_data instance. When the product collection is retrieved we use a FOR loop to render each product thumbnail in an unordered list.

By modifying the liquid code above you can display the recently viewed products in any format you need.