View Single Post
Old 01-14-2008, 09:59 PM
MoonDog MoonDog is offline

Advanced Member
Join Date: Aug 2007
Posts: 93

Default Recently Viewed Mod

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:
{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.
<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:
<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:
{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=$}
And finally, add the following code to the end of your skin1.css file:
.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:
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 -
Attached Thumbnails
Click image for larger version

Name:	viewed_noProducts.jpg
Views:	329
Size:	18.8 KB
ID:	729  Click image for larger version

Name:	viewed_Products.jpg
Views:	450
Size:	27.0 KB
ID:	730  
X-CART Gold v4.1.8
Reply With Quote