How to add Recently Viewed Products Row on home page without apps?

Solved
Highlighted
Shopify Partner
1 0 0

Hi Vince, thanks for posting your solution.

 

I've got it working on my store in Chrome, but when I check on Safari (13.0.1) (and Mobile Safari) nothing is displayed. According to the Safari inspector, there is a problem in jquery.products.min.js: 

 

Line 85: undefined is not an object (evaluating 'j.split') 

The demo website in the Readme (https://hamsademo.myshopify.com) works fine on Safari though.

 

Unfortunately, editing the script is beyond my skill level. I'd really appreciate any advice :-)

Here's a sample product page on my store (Recently viewed is included at the bottom of the page, not yet styled):

https://linkcollective.com/collections/furoshiki/products/arcs-furoshiki

0 Likes
New Member
1 0 0

The wiki link in GitHub is broken, can you please provide installation instructions

 

Thx

0 Likes
Highlighted
Trailblazer
245 1 51

For anyone who interested, I was able to find a version of the instructions using the way back machine.

 

https://web.archive.org/web/20150509171952/http://docs.shopify.com/manual/configuration/store-custom...

 

I am still having a couple issues with currency and layout.

 

I added the extra code as instructed but the currency was not showing with the price.

 

And I'd really like to add a slider and or have a responsive layout. I tried this code but it didn't work:

Shopify.Products.showRecentlyViewed( { howManyToShow:4, onComplete: function() { } } )

 

0 Likes
Highlighted
Trailblazer
245 1 51

@VinceNg 

 

HI!

 

I've spent a long time trying to get the reveal working. 

This is what I have but nothing happens:/

 

<div class="image">
<a href="${url}">
<div class="reveal">
<img src="${Shopify.Products.resizeImage(featured_image, "medium")}" alt="${Shopify.Products.resizeImage(images[1], "medium")}" />
</div>
</a>

</div>

0 Likes
Highlighted
Trailblazer
245 1 51

It wasn't displaying for me either and I was getting jquery errors so I changed it to use jquery 2.2.3 which was already in my files and I used this cookie plugin from the demo instead of from git hub and so far so good. 

 

https://cdn.shopify.com/s/files/1/0021/7897/3753/t/1/assets/jquery.products.min.js?85

 

It was tricky to know where to put things...I had {% include 'recently-viewed' %} in product-template.liquid but now I just have the longer bit of code that begins with <!-- Begin Recently Viewed Products --> in my theme.liquid

 

I wasn't planning to have Recently Viewed products on all pages...I just wanted it on the products page but I will try this out. 

0 Likes
Highlighted
New Member
2 0 0

Hi there,

 

I would like to show "recently viewed products" only on specific pages - not on home page. Would you please help me to do it?

 

And another question, how many products will it show in mobile version? re we able to limit to 1 for mobile?

 

Thank you for your help in advance

0 Likes
Highlighted
New Member
2 0 0

https://dreadradar.myshopify.com/

Thank you, it works.

There is only one problem - the section is displayed in the same way in Russian and English localization. In English localization, links lead to products in Russian localization.
Please tell me how to fix the code. Thank you

0 Likes
Highlighted
New Member
2 0 0

Solved

   var root_url = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
   //console.log(root_url);
   
   var moveAlong = function() {
     if (productHandleQueue.length && shown < config.howManyToShow) {
       jQuery.ajax({
         dataType: 'json',
         url: root_url + '/products/' + productHandleQueue[0] + '.js',
         cache: false,
         success: function(product) {
           template.tmpl(product).appendTo(wrapper); 
           productHandleQueue.shift();
           shown++;
           moveAlong();
         },
         error: function() {
           cookie.remove(productHandleQueue[0]);
           productHandleQueue.shift();
           moveAlong();
         }
       });
     }
     else {
       finalize();
     }
     
   };
0 Likes