a freebie: recently viewed items.

[gabrielcrowe]

please be aware that i diddnt really write this, its just common ecommerce code hacked into actinic.

any changes/improvements would be greatly appreciated

Gabriel Crowe's recently viewed items script
that was stolen from the web somewhere =>


this css goes in your main template header
(or another appropriate external place)
=========================================================
<style type="text/css">
.recently {text-align:center;width:100%;margin:5px;}
.recentlyheader { font-size: 14px; font-weight: bold; text-align: left;color: <actinic:variable name="TextColor" />; margin: 5px; padding: 5px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: <actinic:variable name="Palette3" />;}
.recently img {text-decoration:none;width:100px;height:100px;}
.recently a{text-decoration:none;color:<actinic:variable name="TextColor" />;}
.viewed{margin-left:0px;float:left;text-align:center;width:130px;}
.viewed a:hover{background-color:<actinic:variable name="BGColor" />;}
.viewed img {padding:10px;border:2px solid <actinic:variable name="Palette2" />;}
.viewed img:hover {background-color:<actinic:variable name="BGColor" />;border:2px solid <actinic:variable name="Palette3" />;}
</style>
=========================================================



this part goes in the product layout, at the bottom.
=========================================================
<script type="text/javascript">
// Set current item as p0
proIMAGE='<actinic:variable name="ProductImageFileName" />';
var temp = new String('<Actinic:Variable Name="ProductName"/>');
proNAME = temp.replace(/[^a-zA-Z 0-9]+/g,'');
var p0=('<div class="viewed"><a href="'+document.URL+'"><img src=\''+proIMAGE+'\' width=75 height=75 /><br/>'+proNAME+'</a></div>');
// test to see if p0 is not equal to null and that it does not match any of the other products
// p1, p2, p3, or p4 - if all cases are true, set and rotate the cookies.
var p1=getCookie("p1");
var p2=getCookie("p2");
var p3=getCookie("p3");
var p4=getCookie("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>
=========================================================


this part goes at the end of the section that contains products.
==================================================================
<div class="recently">
<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){document.write('<div class="recentlyheader">Recently Viewed Items:</div>');}
if (p1 !=null) {document.write(p1)}
if (p2) {document.write(p2)}
if (p3) {document.write(p3)}
if (p4) {document.write(p4)}

</script>
</div>
<div style="clear:both;"></div>
==================================================================



please note that the locations of these items could be out, and that i DID NOT WRITE THIS.
original from: http://www.jesseo.com/Recently-Viewed-Products.txt

i merely adapted it for Actinic.

Good luck, may the force be with you, always.

- GC
http://interact-studio.co.uk/

[george]

You take this in your stride fella, well done... again.

[gabrielcrowe]

demo:

http://www.asylumunlimited.co.uk/acatalog/Books.html

the shop is a bit messy, but there are products in there someplace. lol.

[TraceyHand]

wow...thats not for viewing with a hangover, is it? (not that I have one...just saying, is all LOL)

Nice one on the code thingie though...
Can always rely on Gabe to come up with something for every occasion!

[george]

I have an idea, I'll give you a shout later dawg.

[gabrielcrowe]

kthx :cool: colours fixed. :p

[NormanRouxel]

A couple of notes:

1) actiniccore.js already contains functions getCookie() and setCookie() that are used by the Cart Summary. I'm not sure if you're intentionally replacing them or not. Probably not as setCookie has a different number of arguments.

2) The lines var temp = new String('<Actinic:Variable Name="ProductName"/>');
proNAME = temp.replace(/[^a-zA-Z 0-9]+/g,'');
may need tweaking to deal with all the { type stuff Actinic uses for special characters.

[Darren B]

Gabe you done it again - outstanding sir

Hey like the menu ;)

D

[leehack]

Sorry i'm having a whoosh moment, what the hell are we looking at?

[gabrielcrowe]

A couple of notes:

1) actiniccore.js already contains functions getCookie() and setCookie() that are used by the Cart Summary. I'm not sure if you're intentionally replacing them or not. Probably not as setCookie has a different number of arguments.

2) The lines var temp = new String('<Actinic:Variable Name="ProductName"/>');
proNAME = temp.replace(/[^a-zA-Z 0-9]+/g,'');
may need tweaking to deal with all the { type stuff Actinic uses for special characters.


its just a lazy initial attempt to strip out all the fluff from a variable. only letters and numbers should get through. though it could be a lot better. i'm open to cleaner suggestions.

[fibonacci-d]

A couple of notes:

1) actiniccore.js already contains functions getCookie() and setCookie() that are used by the Cart Summary. I'm not sure if you're intentionally replacing them or not. Probably not as setCookie has a different number of arguments.

2) The lines var temp = new String('<Actinic:Variable Name="ProductName"/>');
proNAME = temp.replace(/[^a-zA-Z 0-9]+/g,'');
may need tweaking to deal with all the { type stuff Actinic uses for special characters.

Norman/Gabe
Is this going to interfere with the general workings of the cart / checkout then?
Chris

[gabrielcrowe]

Sorry i'm having a whoosh moment, what the hell are we looking at?

'products you recently viewed'

you can see it working by browsing for products and seeing them appear in the footer of the products on the demo site.

[gabrielcrowe]

Is this going to interfere with the general workings of the cart / checkout then?

if someone could confirm renaming the function, or using the built in one. i dont think that it will interfere.

you could only test it, couldnt you?

[fibonacci-d]

absolutely - what i have now compared to what i had at the beginning of the day is great, so i shall test it when i have the time.
again (again!), thanks ;]

[leehack]

Ah gotcha, it fills out at the bottom if i add to cart on a product, i think i'm having a whoosh moment again....I should go get some sleep i think.

[gabrielcrowe]

no, you dont need to add to cart. if a product is displayed, code causes its details to be added to a cookie.

at the bottom of the page, cookies are collected, rotated and displayed.

no cartage was required. its a feature a lot of online shops have but actinic does not. shame, since it was actually easy to port.

i have however noticed, that on multiple product pages, only the bottom product is added. so, this suits single products per section type catalogs better.

[TraceyHand]

i have however noticed, that on multiple product pages, only the bottom product is added. so, this suits single products per section type catalogs better.

I wondered about that...let the Single Product Pages brigade step forward...

hehe

[fibonacci-d]

no, you dont need to add to cart. if a product is displayed, code causes its details to be added to a cookie.

at the bottom of the page, cookies are collected, rotated and displayed.

no cartage was required. its a feature a lot of online shops have but actinic does not. shame, since it was actually easy to port.

i have however noticed, that on multiple product pages, only the bottom product is added. so, this suits single products per section type catalogs better.

...so if a 'multi product page' is used as a thumbnail product list and a user clicks on the 'more...' button to view full product details of one particular product, would that product be listed in the recently viewed items list?

I bet you're gonna tell me to try it myself (which would be fair) rather than asking the forum - i suppose the q is 'in theory...' in that case?!

[gabrielcrowe]

well, no, see, the code in the product sets a variable that the code in the footer catches. so, in theory, if you added both pieces of code into the 'more info' bit, then that data would be added too.

but as i say, it could do with someone making it more compatible. I'v given a basic of something cool, now lets see some people fixing it up!

[gabrielcrowe]

updated:

- respects shop palete
- works for multiple products per page
- removed pointless javasctipt (thanks norm)

first post has the updated code.

[JSnow]

updated

Not counting the seconds, it took you 22 minutes from your previous post to do all that.

*bows in appreciation*

[gabrielcrowe]

total javascript pwnage.

[Darren B]

Gonna need to play with this a little more, not quite working to plan on my test site, need to sort out the placement of the code sections

Quck question Gabe, did you update the attached text file aswell

D

[gabrielcrowe]

i did, but if its not the same, then use the posted one.

this forum may have borken it, if someone wants to compare and get back to me, then i'lltry to put an updated one in there.

[RuralWeb]

Having a play loading it onto http://www.the-old-smokehouse.co.uk/acatalog/Cameron_s_Smokers_.html - going a bit wild at the moment but will keep playing!!!

[Darren B]

You and me both Malc, http://www.casupply.co.uk/acatalog/test/acatalog/index.html

slapped into a product layout, ooooh it does some funny stuff in there LOL

I think i will need to look properly tomorrow

Hey Gabe, can have some fun with this, chuck it in the product layout and it does not know what to show :D

[RuralWeb]

Well Gabe it works a treat - the mistake I made was to add it to duplicates which confused it completely but I prefer that it only changes an item when you view the single product page and Ive only got it showing on the single product pages at the moment - I will have another play over the weekend to add it to multiple listing pages.

Top bit of kit:D

[RuralWeb]

One minor problem (not really a big deal) when first viewing a page the recently viewed list is blank of course but there is some text there nullnullnullnull . this decreases as products are viewed - it would be nice if it was not there BUT I can live with it.

I cannot believe how well it works - you should be selling it not giving it away;)

[fibonacci-d]

Hey Malc,
Checked the way you have it working on your site - great! This forum can work wonders I think - I put in this query yesterday morning and 24hrs later there's a working model.
I've read a few feedback items about the developers outside of the 'Actinic box' and really, I hope the guys at Actinic appreciate the support that people like Gabe give.
I certainly do ;]
Chris
:D

[gabrielcrowe]

I want actinic to send out cool badges.

'I use Actinic and all I got was this lousy badge'

[Darren B]

Gabe you telling me you have not got the mug with that on :D

[gabrielcrowe]

No, this is my mug(s).

Same as the ones that Hammond drinks out of in the SGC.

[TraceyHand]

oooh..I love Stargate!

[Darren B]

ooooh i want one of those

hey quicky note, this hack killed my upload, taking for ever to check the pages, removed it for now gone back to playing with menus ;)

[JSnow]

quicky note

Are you sure you like Stargate? The violence not a bit too much for you perhaps? :D

[valley decor]

Mr gabriel sir,

Can you give me a pointer on why the layout works on offline preview and not on the uploaded live site??. I am not sure where to put the first item that you say in the main template or somewhere else.(I placed this between the <head> and </head> on the $ icon layout.

I put the second part in the layout "image on left with name above image" after the </actinic:block>.

The third i put in the contempory left layout so it is under the left nav bar.

any suggestions??? the site is coming along nicely and I like this script.

Thanks,

I am trying really hard not to make baby jesus cry;) ;)

Regards,

[RuralWeb]

give me a pointer
Look at the code on this page http://www.the-old-smokehouse.co.uk/acatalog/ProQ_-_Amigo_BBQ_Smoker.html and see where to place the last viewed code.

[gabrielcrowe]

most problems with this code and other javascript milti-part codes like it, are based on the order of scripts.

if you can imagine a scenario where you ahve to collect the data, and then create the cookie, and then display it all, after it's collected.

to throw some more oddness into the mix, certain vatiables required of this code are only available in certain templates.

I tend to put the first 'collection' part, at the product template level.

and the display part, at the bottom of the 'sections/frags/products' template.

[kevster]

great find/tweak/widget - however you label it its very cunning - thanks :D

[OriginalTouch]

Had a go and it seems to work really well Gabe. Thanks.

Still tweaking but this is just the sort of marketing tool we needed!

Only one note for you: Had to change product names though as any symbols such as :;- etc were being changed into numbers?
- = 45
+ = 43

3135

also , where and how could we change the font on the product names? I've changed the size but not the actual font.

[OriginalTouch]

One minor problem (not really a big deal) when first viewing a page the recently viewed list is blank of course but there is some text there nullnullnullnull . this decreases as products are viewed - it would be nice if it was not there BUT I can live with it.

I cannot believe how well it works - you should be selling it not giving it away;)

Any chance of getting rid of that null thing when no previously visited products exist?
Seems to happen whenever revisit site too?
Don't want to tinker with your code!

[gabrielcrowe]

try this just after your first body statement, untested:

<script>
if(getCookie("p2")==null){setCookie("p2"," ")}
if(getCookie("p3")==null){setCookie("p3"," ")}
if(getCookie("p4")==null){setCookie("p4"," ")}
</script>

[OriginalTouch]

after which body statement

did it after <bodyonload> to no avail

or do you mean to replace one of the pieces of script you gave before?

[OriginalTouch]

Has anyone found a way of removing the 'null' indication when just visiting the site and there are no previously viewed products?

[gabrielcrowe]

please read this entire thread.

again.

[gabrielcrowe]

try this just after your first body statement, untested:

<script>
if(getCookie("p2")==null){setCookie("p2"," ")}
if(getCookie("p3")==null){setCookie("p3"," ")}
if(getCookie("p4")==null){setCookie("p4"," ")}
</script>

I bloody hate quoting myself. :D

[leehack]

I bloody hate quoting myself. :D
Recurring theme it would appear. Post now, think and look later.

[OriginalTouch]

after which body statement

did it after <bodyonload> to no avail

or do you mean to replace one of the pieces of script you gave before?

Believe me, I did read the thread over again.
But tried the above and was wondering why it didn't work.
Sometimes, it may be nice to remember that some of us are novices at this and that is why this forum is so useful.
Rather than criticising?........

[RuralWeb]

Sometimes, it may be nice to remember that some of us are novices at this and that is why this forum is so useful.
Rather than criticising?........Its also nice to remember that people are giving thier time for free to help you make money - so be thankfull for what you get. If you cannot cope with the answers given then its not really our problem - Standard Actinic is sutable for the beginer but once you start fidling with things then you need to go away and get the skills required.

[OriginalTouch]

One of the assets of Actinic (and a reason for purchase) is the access to this forum, for ideas and support from more experienced users - a wealth of information that most software lacks after purchase. Unfortunately, nobody is unfallible and everyone makes mistakes. Many visitors, me included, are already experienced website and html designers, just needing an occasional nudge in the right direction for adapting this particular software to our own needs, sometimes even adding new tools (which I also have helped to adapt). This software can be adapted to many different styles of website with some great tweaks to be found in this forum. You can be assured that any support given by Actinic users is always much appreciated and saves great time and effort. My point was just that it does seem a shame if personal criticisms are posted that stray from the query in question (This seems to have happened on quite a few other threads). I am sure that we are all nice people really - let's all be supportive to each other - and I hate arguments!

In this case, the solution did not work - the script was added after
<body onLoad="<actinic:variable value="PreloadImages" name="OnLoadScript" />">
which may be in the wrong place?

[RuralWeb]

My point was just that it does seem a shame if personal criticisms are posted that stray from the query in question (This seems to have happened on quite a few other threads). This is a forum NOT Actinic support which many people tend to forget so if you bought Actinic on the basis that the forum would get your site built for you then thats not what will happen. May I suggest that you contact actinic support if you are having problems.

Gabe gave his code as a freebe to the forum and did not offer support for it. If you are having a problem then perhaps you could offer to pay him to fix it for you - a novel idea I know

[mattc]

how could i implement this so that the recently viewed items were only what the viewer had opened extended info on?

thanks

[NormanRouxel]

Matt,

Adapt the bit from post #1 "this part goes in the product layout, at the bottom" top be in your Extended Info layout instead. You should only need to alter the ProductImage variable to use the Extended Info one.

Post how you do it so others can benefit from it.

[code junky]

I guess I'm going to get slapped for this... But here goes. I have put the javascript in and it is all nearly working. I just don't get any images showing up. I'm sure the answer is simple. Could one of you Actinic Guru's point me in the right direction.

Here is a link to product page...

http://actinic.hud.ac.uk/u0769560/acatalog/Leaders_Backing.html

Thanks, and please go easy on me, I'm an Actinic Nube!

[NormanRouxel]

Greg,

This tweak was really intended for single product per page type sites.

Not for multiple product per pages like you're using but it will still work there - just a bit meaningless as it will be fully poulated by all the products on the last page viewed.

To debug, add some diagnostic code to your JS so you can see what's happening. E.g.

alert('Got here');

[NormanRouxel]

Update: Greg, your cookie contains

<div class="viewed"><a href="http://actinic.hud.ac.uk/u0769560/acatalog/Leaders_Backing.html"><img src='' width=75 height=75 /><br/></a></div>

And that src='' means that you haven't picked up the product image filename.

[code junky]

Ahhh right. So does that mean I need to create the variable ProductImage Filename?

[NormanRouxel]

No - it's a built-in Actinic Variable. It's not being picked up in the JS that sets the cookie. You have to discover why.

[mattc]

First, thanks for the direction Norman,

I have it working so that the cookie is only set when you open the extended info window, which is a good fix for those of us without SPPs. I did this by following Normans instructions above.

RE the nullnullnull problem, gabriel's way doesn't quite work yet...
I have a half fix, although even with my limited knowledge of javascript, i know it shouldn't really be done this way...
<script>
if(getCookie("p0")==null){setCookie("p0"," ")}
if(getCookie("p1")==null){setCookie("p1"," ")}
if(getCookie("p2")==null){setCookie("p2"," ")}
if(getCookie("p3")==null){setCookie("p3"," ")}
if(getCookie("p4")==null){setCookie("p4"," ")}
</script>

is the only way i can get it to hide the null words. The problem with this is that the "recently viewed items" text doesn't dissapear when you have no previous items. It just sits there empty. I have tried various combinations of this to similar effect. I understand this well enough to know there is a better way, but not quite enough to figure it out!

Secondly,
Currently, the javascript writes the cookie so that the link for the image is to document.url, or self basically. Obviously if im setting it from the extended info page then it points to that. id like it so that when the image is clicked, the link is to the product anchor link on the section page, not the extended info page. This way they get taken to the item, not just shown info about it. Im sure there is a variable to do this, but i can't see it for the life of me.

Finally, it a bit messy how the images dont keep their aspect ratio. can this be fixed easily?

Many Thanks, matt

[NormanRouxel]

Link: Use opener.location.href in your JavaScript.

Images: Set only width or height - not both.

[purple]

Hi

Did anybody find a way to stop the - being displayed as 45 when part of the product name?

[malbro]

proNAME = temp.replace(/[^a-zA-Z 0-9]+/g,''); The problem is caused by the above line in Gabes code which will remove the extra characters used in HTML to code non alphanumeric characters but not the 4 & 5 which are part of the code e.g. & # 4 5 ; is the code for - and results in 45 being left in the name. Adding &, # and ; to the line should cure your problem but may introduce other problems, which Gabe was trying to sort out.

[adder]

Did anybody find a way to stop the - being displayed as 45 when part of the product name?

Let me put it this way: if you're using Actinic layouts with many products on one page, this script will do you no good as it would just fill in the recently viewed item slots with first four products form the particular category. If you have a separate html page for each product (section - subsection) you can remove the Product Name from your layout and leave just the Subsection Name. You can use the dashes and quotes in Subsection Name. This gives you a better choice of product naming. You can get rid of all dashes, quotes and other special characters. As other guys said, adding & and # to the list, will produce other unwanted problems.

Finally, it a bit messy how the images dont keep their aspect ratio. can this be fixed easily?

Just removing the height won't do the job. This looks like working good for me:
.recently img {text-decoration:none;width:75px;height:50%;}

Gabriel, many thanks for the code!

[gabrielcrowe]

congrats those that sorted it out. if possible if you ahve working version, could you please post it here for people to share.

also, about your vesion, can we see it in action? got a nice link?

[Jethro]

Just thought I should let people know that I have added this mod to our website, took a bit of work, but works well.

Has being running for a week or so and I not aware of any problems.

Thanks to Gabe for original post.

[NicNac]

Hi

Did anybody find a way to stop the - being displayed as 45 when part of the product name?

I know this was a long time ago, I'm just so chuffed I managed to get this working!

I've replaced this line of code

proNAME = temp.replace(/[^a-zA-Z 0-9]+/g,'');

With this one

proNAME = temp.replace(/\[^a-zA-Z 0-9 \. \+ \( \)&-]+/g,'');

This also allows for the following characters in product names

/ [ . + ( ) & - ]

Have a looky on my site

OnlyRugged (http://www.onlyrugged.com)

I know the aspect ratio needs sorting out yet, but yay me! :D

Btw, my cookies are set on the extended info pages, so needed a bit more tweaking from gabe's original code. I replaced

proIMAGE='<actinic:variable name="ProductImageFileName" />';

with

proIMAGE='<actinic:variable name="ExtendedInfoImage" />';

There may be an easier way of doing this, I'm not sure tbh, I just hope this helps someone else!

[Jethro]

Hi, I put this on our site, but found that it works fine without replacing any characters and just using the product name.

Please check it yourself, but I have tested across all main browsers and it seams to be fine on our site. See www.tridentuk.com

[NicNac]

Just had a quick look around your site jethro, looks good. You don't seem to have many items with special characters in their names though, the odd dash and full stop here and there but that's about it.

Ours have slashes and ampersands and brackets and all sorts, and instead of the character, the product name in the 'recently viewed items' box was something like "DL%46KYMAN %91something %93" etc. Obviously this wouldn't look good to the customer so I did the above and it sorted it :)

[Jethro]

Hi, I was meaning that I left out the following line

var temp = new String('<Actinic:Variable Name="ProductName"/>');

And changed the line after it to;

proNAME = new String('<actinic:variable name="ProductName" />');

This seams to work for us and special characters work ok. I can't remember the logic behind it.

The product below once viewed shows some of the special characters correctly. Although we don't use many we do use ( ) , + - / " '

http://www.tridentuk.com/sailing/product-Optimum_Race_Watch_Series_4__with_Compass___Tide-OT463.html

Don't know if that will help.

[NicNac]

Ah right, gotcha! That makes sense.

There must've been a reason gabe did it that way though. Gabe? :confused:

Edit: And this is the point I remember Gabe borrowed (:D) this code and got it working for Actinic, may be he just missed this? Dunno lol