Adding a Recently Viewed Products Section to the Shopify Minimal Theme
Edwin Savarimuthu showed in his blog how to add recently viewed products to a Shopify theme. In his blog he utilizes the routine from Caroline Schnapp and this was also our starting point for the adding of recently viewed products to the Minimal theme. While doing that we modified this approach and here we want to share our solution. Please understand it as part of our journey to learn more about the Shopify technology.
We started out with a Liquid snippet like Edwin but soon tried to build a section to be able to customize the new functionality. To achieve this we created a new file product-recently-viewed.liquid in the section folder of the Minimal theme code, this is we copied the file product-recommendations.liquid and made adjustments. The whole file can be downloaded here. Here we just want to present the ideas behind it.
To add the new section to the product page just add
{% section 'product-recently-viewed' %}to the file product.liquid in the template folder of the theme.
Now you will see the new section when you customize the product page.
We were kind of surprised that we did not have to do any further adjustments to make our new section customizable, e.g. no need to edit the settings_data.json.
Our file product-recently-viewed.liquid more or less consists of three parts. The first part generates html code for the product which is currently visible in the browser. We use Liquid and existent snippets for that. The part below is mostly a copy taken from the file product-recommendation.liquid. There is a lot of code in the snippet product-grid-item.liquid which we liked to have but did not want to reprogram.
The trick is that whatever is between {% capture grid_item %}...{% endcapture %} will be captured as a string assigned to the Liquid variable defined in capture, heregrid_item. In the next step this Liquid string variable is attached to a data element of a node and such made accessible on the rendered page, here a div with the class product-recently-viewed.
In node definition the string is attached to the data element data-grid-item. So that we later do not interfere with the other elements on the rendering page we replace the ‘ProdutImage’ with ‘RecentProductImage’, ids which are defined deep down in the snippet product-grid-item. Except for the product.id the other values which are also attached to the other data elements are not really used in our solution. The attribute hidden will later be removed whenever a recent-product list is available.
The rest of the file product-recently-viewed.liquid is just the header with the text defined in the customizing and a div with the class recently-viewed. This div will be used to add the recent products. This step takes place in a javascript file which we named jquery.products.js and and which we added to the asset folder of the theme. It can be downloaded from here.
Within this javascript file there two two parts, the storing and retrieving the list of recently visited products and the adding of this list to the current product page. To make the javascript functions available add it just before the </body> tag at the end of the file theme.liquid sitting in the layout folder. With the if statement it is made sure that the file is only loaded on a product page.
The storing of the data is done in the local storage of the browser. The advantage of this location to cookies is that the local storage allows to store much more data. This is done in the functions storeRecentProduct and getRecentProducts
The Shopify.recentProductsKey is defined at the beginning of the file as
Using the shop name within the key should make sure that we actually retrieve the recent product list of our shop. The local storage in the Chrome browser then looks like.
The main function in the javascript then reads the data attached to the div with the class product-recently-viewed.
The container is the content wrapped by the div with the class product-recently-viewed and using the jQuery function,see here, the current product data is read from the current page (which is a product page, see above the added code to the file theme.liquid)
This function is called via
Asking for $(“.product-recently-viewed”).length>0 makes sure that the node exists.
The rest of the main function just reads in the list of the recent visited products via the function described above. In the same line it is made sure that that the current product on the page does not turn up in the recent list. This happens if someone returns to product and and we assume that he is not really interested to see the current product also in the recent list. In a next step we will also filter the product recommendations such that we do not have an overlap with the recent product list.
In the following line the recent product list is limited the to the maximum number using the parameter Shopify.recentProductHistoryMax , hard coded in the file. We were not able yet to steer the parameter via Liquid.
The next line steers that whenever there is a recent list available it is shown by removing the attribute hidden from the container, followed by a simple map over the recent product list that appends the previous stored grid_items to the div with the class recently-viewed, see above.
Finally the data from the current product is prepended to list of recent products and the list is stored in the local storage again.
We hope that our description is useful for your. Please test it out and let us know if it works. Any feedback is appreciated.