How can I create a recently viewed products section using modern methods?

[uptivya]

I need to create a recently viewed products section from scratch.

I have seen some .js code mixed with HTML about DOM manipulation. They are publications from a long ago.

Are there new ways to implement a recently viewed products section using shopify objects or a more useful way?

Otherwise, could you provide your way to implement this section?

Thank you very much

[NomtechSolution · Accepted solution]

Try this code:

function getRecentlyViewedProducts() {
  var viewedProducts = [];
  var cookie = Cookies.get('recently_viewed_products');
  if (cookie) {
    viewedProducts = JSON.parse(cookie);
  }
  return viewedProducts;
}

function addRecentlyViewedProduct(productId) {
  var viewedProducts = getRecentlyViewedProducts();
  var index = viewedProducts.indexOf(productId);
  if (index > -1) {
    viewedProducts.splice(index, 1);
  }
  viewedProducts.unshift(productId);
  Cookies.set('recently_viewed_products', JSON.stringify(viewedProducts), { expires: 30, path: '/' });
}

Yes, there are different ways to implement a recently viewed products section in Shopify. One way to do it is by using cookies and JavaScript to store and display the recently viewed products. Here are the general steps you can follow:

1. Add a script to your theme that will capture and store the IDs of the recently viewed products in a cookie.

2. Create a new section in your theme for the recently viewed products. In this section, you can use the Shopify Liquid language to retrieve and display the products stored in the cookie.

3. Add the recently viewed products section to your desired page(s) in your theme.

[uptivya]

Thank you NomtechSolution! So still all about .js cookies and HTML DOM manipulation. I wish Shopify would implement some native options for this.

[DavidT]

I wouldn't have marked this as solved, since it's not really what you were asking. We need a way to do it natively in Liquid so we can reuse the product card snippets and stuff.