Recently Viewed Mod

MoonDog · #1 01-14-2008, 09:59 PM

Here is a mod that will display up to four recently view products with icons and price that the customer has looked at. It doesn't use the db or php. It's strictly javascript and cookies. The default cookie is set to expire in 30 days, so that whenever the customer returns to your site within the 30 days, it will still show the four last viewed items that the customer has looked at. The time of expiry can be set for any amount of time, days or years.
I can't take full credit for this mod, since a lot of this code was grabbed from the internet. Unfortunately, I don't remember where I got these different codes, but thanks to those who created them. All I did was piece these codes together so that this will work in x-cart. I've tried this code for v4.1.8 and v4.1.9 and it seems to work O.K.

There's still a lot of room for improvement, so please feel free to add and contribute to this mod.

In customer/home.tpl add the following code between the <head> and </head> tags:

Code:

 
{literal}
<script type="text/javascript">
 function setCookie(name, value) {
 var today = new Date()
 var expires = new Date()
 expires.setTime(today.getTime() + 1000*60*60*24*30)
 document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString() +";path=/"
}
 function getCookie(Name) {
 var search = Name + "="
 if(document.cookie.length > 0) {
 offset = document.cookie.indexOf(search)
 if(offset != -1) {
 offset += search.length
 end = document.cookie.indexOf(";", offset)
 if(end == -1) end = document.cookie.length
 return unescape(document.cookie.substring(offset, end))}
 else return ""
 }
}
</script>
{/literal}

Now add these two lines of code in home.tpl wherever you want the Recently Viewed box to display(NOTE: this mod will not display recently viewed items when the menu box is on left side but only on the right side of your webpage or at the bottom(see Qdox post #36)).
If you want to use this mod on the left side just continue with the instructions and then go to post #42 to add the other code needed to make this work on the left column.

Code:

 
<br />
{include file="customer/main/recently_viewed.tpl"}

For instance: if you want to display the Recently Viewed box after the the news box, then find the {include file="news.tpl"} code and place the above code below it. Just make sure that this menu box is displayed on the right side of your webpage.

Add the following code to the end of your customer/main/product.tpl file:

Code:

 
<script type="text/javascript">
prodImage='<img src="{$product.tmbn_url}"/>';
prodName='<{$product.product}>';
var p0=('<br/><a href="'+document.URL+'">'+prodImage+'<br/>{$product.product}</a><br/>${$product.taxed_price}<br/>');
</script>

Create a customer/main/recently_viewed.tpl file by using the following code:

Code:

 
{capture name=menu}
<div class="recently">
{literal}
 <script type="text/javascript">
  if (p0){
  }
  else {var p0=null;
  }
   var p1=getCookie("p1");
   var p2=getCookie("p2");
   var p3=getCookie("p3");
   var p4=getCookie("p4");
  if (p1){
  }
  else {document.write("You have no recently viewed items.")
  }
  if (p1 !=null) {document.write(p1)}
  if (p2) {document.write(p2)}
  if (p3) {document.write(p3)}
  if (p4) {document.write(p4)}
  if(p0 !=null && p0 != p1 && p0 != p2 && p0 != p3 && p0 !=p4){
   setCookie("p1",p0)
   setCookie("p2",p1)
   setCookie("p3",p2)
   setCookie("p4",p3)
  }
 </script>
{/literal}
</div>
{/capture} 
{include file="menu.tpl" dingbats="dingbats_categorie.gif" menu_title="Recently Viewed" menu_content=$smarty.capture.menu}

And finally, add the following code to the end of your skin1.css file:

Code:

 
.recently {text-align:center;}
.recently img {text-decoration:none;width:80px;height:auto;} 
.recently a{text-decoration:none;color:black;}

And that should be it.

Update: Added attachment of before a product has been viewed and after viewing 2 products.
Also updated added code from post#7
Updated to inform that menu box will not work when displayed on the left side of the webpage. You will need to add the code that is posted on post #42 to display this mod on the left column.

Note: to set the day for when you want the cookie to expire, find this line of code:

Code:

expires.setTime(today.getTime() + 1000*60*60*24*30)

The number thirty at the end of that line is the number of days until the cookie expires. You can set it to any number of days you want. 7 is one week and 365 is one year.

- MoonDog -

JDam · #2 01-14-2008, 10:36 PM

Great mod MoonDog!

Very simple and easy to install - works great with 4.1.9

Having the ability to make a quick change in product image size in CSS is great - I changed mine from 80 to 70 pixels.

Thanks again!

ProMuscles · #3 01-15-2008, 08:21 AM

Moondog the greatest mod contributor since... well Thanks for your hard work!

mike_turbo · #4 01-17-2008, 02:21 AM

I put this code in but the price was showing in $ my default is in ё.

Also when i added it came up with nullnullnull under the prices ?

Any advise.

Freakmode · #5 01-17-2008, 03:41 AM

mike_turbo

The $ comes from this entry in

customer/main/product.tpl file:

This line after the break.

var p0=('<br/><a href="'+document.URL+'">'+prodImage+'<br/>{$product.product}</a><br/>${$product.taxed_price}<br/>');

MoonDog · #6 01-17-2008, 06:57 PM

Hi mike_turbo,

Quote:

I put this code in but the price was showing in $ my default is in ё.
Also when i added it came up with nullnullnull under the prices ?
Any advise.

Try this; repace the code you added in product.tpl with the following code:

Code:

 
<script type="text/javascript">
prodImage='<img src="{$product.tmbn_url}"/>';
prodName='<{$product.product}>';
var p0=('<br/><a href="'+document.URL+'">'+prodImage+'<br/>{$product.product}</a><br/>ё{$product.price}<br/>');
</script>

It's almost exactly like the code in post #1 except for the code highlited in red.

Let me know if this works for you.

- MoonDog -

MoonDog · #7 01-17-2008, 11:37 PM

Instead of showing an empty Recentlly Viewed box on the homepage before the customer has viewed any products; you can add the following code to your recently_viewed.tpl file:

find:

Code:

 
   var p1=getCookie("p1");
   var p2=getCookie("p2");
   var p3=getCookie("p3");
   var p4=getCookie("p4");

and after the above line of code, add the following lines of code:

Code:

 
  if (p1){
  }
  else {document.write("You have no recently viewed items.")
  }

And that should take care of that.

Update: Post #1 has been updated to reflect this change

- MoonDog -

RichieRich · #8 01-19-2008, 08:23 AM

is there a demo or anyone like to share how they implemented?

Freakmode · #9 01-19-2008, 08:37 AM

We use it its great

http://www.jobananas.com

Thanks MoonDog

MoonDog · #10 01-19-2008, 11:58 PM

Great job 01bodyjewellery. I like the way it looks on your site.

I've updated post #1 for those of you who want to adjust the expiry date from 30 days to any number of days you want. At 30 days, the customer will see the last 4 recently viewed items everytime they log on to your site for the next 30 days. After that, the cookie gets reset again for 30 days. You can change this from a millisecond to any number of years.

- MoonDog -