Name that Script. Can you help me find a JavaScript for this?

[ETpro]

This probably already exists, but I am not sure what to call it to Google for it. If you know of such a script, or even what to call it, that would steer me to a successful search.

What I want to do is put a checkbox beside each thumbnail and product description on the section pages of the website. I want to put a "I Liked These" section at the top of the right column, and each time a user clicks a checkbox beside an item, add a copy of it to the "I Liked These" list on the right. Here is a sample of a page I’d like to put this on.

I am not looking for a voting system. This is for an individual user. Say a large section has 200 products in it. I paginate it into 10 pages of 20 items each. By the time a user gets to page ten, they realize the items they liked best were back on one of those previous pages. So now they have to click back through and hunt for each one they liked. I want them to be able to mark things they really like, and collect them in the right column as the page through, so when they are done, they have a collection of their favorites to select from instead of having to page back and forth, or view all and scroll forever.

This is going to be installed on a Yahoo Store, where there is no active server-side language available at run time. So it has to be done entirely client side. And given the single user focus, I see no reason to make it database dependent anyway. I would use cookies to preserve the list for a return visit by the same user. And I would build in a way they can dump the cookie after they are done looking at a set of favorites. Also let them remove and add to the favorites column at will.

Is there something already out there I can start with, or do I need to code this up from scratch? Looking for suggestions on how to proceed.

If no such script exists, would someone be willing to quote modifying my Recently Viewed Items script to be triggered by checkbox selection or drag-and-drop of a copy to the "I Liked These" Column? You can see the cookie-based Recently Viewed Items script here. Visit a few items, then check the bottom of the content area just above the footer.

[djr33]

That makes sense. You want a ranking system that stores image ids in cookies. It sounds fairly simple to do (just attach an 'onchange' event to the checkbox, and if it is checked then add the image to the cookie, etc.). The complexity is later in how you want to deal with it. You want a paginated setup that will then display a 'favorites' page, perhaps? That sounds like an interesting way to approach this.


There is one problem, though. Everything about using client-side scripting is fine except the idea of a return visit. Cookies are in no way reliable. They're fine for keeping track of things for a while (assuming users have cookies enabled and at this point very few will have problems with that), BUT after a while it's going to get lost. This "while" is vague and depends on browser, system settings and user. Anyone using a shared workstation either will end up with overlapping preferences or no stored info (since it may be deleted with each use) and different browsers on the same machine won't match up. In other words, cookies are fine for temporary storage, but it gets very messy after some time. After about a day, there's a very good chance even on a home computer that it won't be there-- if the user cleans up their temporary files, for example. If you are ok with this, then continue. If not, you may need to find out a creative way to approach storing it in a database or possibly some way of creating a list a user can save in a text document.

[vwphillips]

what was wrong with

http://www.webdeveloper.com/forum/sh...d.php?t=227826

[ETpro]

That makes sense. You want a ranking system that stores image ids in cookies. It sounds fairly simple to do (just attach an 'onchange' event to the checkbox, and if it is checked then add the image to the cookie, etc.). The complexity is later in how you want to deal with it. You want a paginated setup that will then display a 'favorites' page, perhaps? That sounds like an interesting way to approach this.


There is one problem, though. Everything about using client-side scripting is fine except the idea of a return visit. Cookies are in no way reliable. They're fine for keeping track of things for a while (assuming users have cookies enabled and at this point very few will have problems with that), BUT after a while it's going to get lost. This "while" is vague and depends on browser, system settings and user. Anyone using a shared workstation either will end up with overlapping preferences or no stored info (since it may be deleted with each use) and different browsers on the same machine won't match up. In other words, cookies are fine for temporary storage, but it gets very messy after some time. After about a day, there's a very good chance even on a home computer that it won't be there-- if the user cleans up their temporary files, for example. If you are ok with this, then continue. If not, you may need to find out a creative way to approach storing it in a database or possibly some way of creating a list a user can save in a text document.

It's a little more complicated than just grabbing an image. The HTML I will have to grab and duplicate in the right column is contained in a DIV though. It looks like this:

  <div class="section" id="item1">
    <a href=
    "http://www.borderstogo.com/875933.html">Treehouse
    Mural<br />
    **FREE SHIPPING!!**</a><br />
    <img src="./clearance_files/trans_1x1.gif"
    height="2" width="1" border="0" /><br />

    <form method="post" action=
      "https://order.store.yahoo.net/cgi-bin/wg-order?yhst-68986320726817+875933">
      <br />
      <b>Availability:</b> Usually ships the next
      business day<br />
      <br />
      <b>Treehouse Mural<br />
      **FREE SHIPPING!!**</b><br />
      875933<img src=
      "./clearance_files/trans_1x1.gif" height=
      "1" width="10" border="0" />
      
      <div class="price">
        Regular Price: $160.00
      </div>
      
      <div class="sale-price-bold">Sale Price:
        <img src=
        "./clearance_files/yhst-68986320726817_2101_35284"
        width="47" height="16" align="absmiddle"
        border="0" hspace="0" vspace="0" alt=
        "$99.94" />
      </div>
      <input name="vwitem" type="hidden" value=
        "875933" />
      <input name="vwcatalog" type=
        "hidden" value="yhst-68986320726817" />
      <input type=
        "submit" value="Add to Cart" class="Add"
        onmouseover="this.className='Add AddHover'"
        onmouseout="this.className='Add'" /><br />
      <input type="hidden" name=".autodone"
        value="http://www.borderstogo.com/clearance.html" />
    </form>
  </div>

I definitely want to put the favorites in the right column and have it display on all pages of the site till items are purged.

I'm perfectly willing to live with the limitations of cookie permanence. For most users, I would guess the list of favorite items would not ever be used beyond a single session. I might set the cookie to 30 days, but doubt it would need to persist that long in very many cases. If their OS or Virus checker wipes it clean, so be it. That user will just have to collect favorites again. It's still a far sight better than the current system of paging through many pages trying to remember where your favorite items were.

[ETpro]

what was wrong with

http://www.webdeveloper.com/forum/sh...d.php?t=227826

I am a total neophyte to JavaScript coding and was still hoping to find an off-the-shelf script. The posted code works to do what it does, but what it does is not at all like what I am going to need, and there are so many things I have to learn to convert it to the task at hand that I have not yet decided whether I should roll up my sleeves and try to figure out how to program it myself, hire someone who knows how to do it, or adopt something that has most of what I am looking for in place.

PS: I have a script for Recently Viewed Items I would be happy to post. It works beautifully to display the last three time pages, showing a block of HTML pasted within a DIV. It can be set to display in either a right column or below the page content and above its footer. It is cookie based. It mill just need to be modified to be fed by the checkbox events and to have a system for removing items in the right column individually or all at once. I'm very open to proposals about doing that.

[vwphillips]

the script you refered to in post #1 is a 'breadcrumb' script.

this records and links to the pages visited and does not retain all previous links while navigating

what you have requested is to record and links to selected items on a number of pages which is quite different

the script I gave you meets your written requirement

Say a large section has 200 products in it. I paginate it into 10 pages of 20 items each. By the time a user gets to page ten, they realize the items they liked best were back on one of those previous pages. So now they have to click back through and hunt for each one they liked. I want them to be able to mark things they really like, and collect them in the right column as the page through, so when they are done, they have a collection of their favorites to select from instead of having to page back and forth, or view all and scroll forever.

[ETpro]

Sorry, it was in another post, but better put the links here. Here is a site where the Last Viewed script is in use. http://www.budgetcommercialmailboxes.com/
It write up to 3 recently viewed items at the bottom of the content area of the page. It can be set by a var to write a programmable number of items at max. before it starts dropping out the first in.

And the script itself is here. http://lib.store.yahoo.net/lib/yhst-...RecentItems.js

[vwphillips]

there was a mistake on the code I posted

try
100415A.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
  width:200px;height:200px;border:solid black 1px;
}

#tst .item {

}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/


function BookMark(o){
 this.ary=[];
 this.nme=o.ID;
 this.links=document.getElementById(this.nme).getElementsByTagName('A');
 this.days=o.DaysPersistance;
 this.url=window.location.toString();
 this.url=this.url.split('#')[0];
 var rtn=zxcReadCookie(this.nme);
 if (rtn){
  rtn=rtn.split('^');
  for (var s,z0=0;z0<rtn.length;z0++){
   s=rtn[z0].split(',');
   this.ary.push([s[0],s[1],s[2]]);
  }
  this.Populate();
 }
}

BookMark.prototype.Add=function(cb,txt,bm){
 for (var z0=0;z0<this.ary.length;z0++){
  if (this.ary[z0]&&this.ary[z0][0]==txt){
   this.ary.splice(z0,1);
  }
 }
 if (document.getElementById(cb).checked){
  this.ary.unshift([txt,this.url+'#'+bm,cb]);
 }
 this.Populate();
}

BookMark.prototype.Populate=function(){
 this.ary.length=Math.min(this.links.length,this.ary.length);
 for (var z0=0;z0<this.links.length;z0++){
  if (this.ary[z0]&&this.ary[z0][0]){
   this.links[z0].innerHTML=this.ary[z0][0];
   this.links[z0].href=this.ary[z0][1];
   if (this.url==this.ary[z0][1].split('#')[0]&&document.getElementById(this.ary[z0][2])){
    document.getElementById(this.ary[z0][2]).checked=true;
   }
  }
  else {
   this.links[z0].innerHTML='';
  }
 }
 zxcCreateCookie(this.nme,this.ary.join('^'),this.days);
}

function zxcCreateCookie(nme,v,days){
 document.cookie=nme+'='+v+';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
}

function zxcReadCookie(nme){
 nme+='=';
 var split = document.cookie.split(';');
 for(var z0=0;z0<split.length;z0++){
  var s=split[z0];
  while (s.charAt(0)==' ') s=s.substring(1,s.length);
  if (s.indexOf(nme)==0) return s.substring(nme.length,s.length);
 }
 return null;
}


/*]]>*/
</script>

</head>

<body>
<br />
 <a href="100415B.htm">GoTo 100415B.htm</a>
<div id="tst" >
<a href="#" class="item" ></a><br />
<a href="#" class="item" ></a><br />
<a href="#" class="item" ></a><br />
<a href="#" class="item" ></a><br />
<a href="#" class="item" ></a><br />
</div>
<a name="tom"></a>
I like 1<br />
<input type="checkbox" id="bm1" onclick="BM.Add('bm1','I like 1','tom');" />
<div style="height:500px;" ></div>
<a name="joe"></a>

I like 2<br />
<input type="checkbox" id="bm2" onclick="BM.Add('bm2','I like 2','joe');" />
<div style="height:500px;" ></div>
http://www.webdeveloper.com/forum/showthread.php?t=227826
<script type="text/javascript">
/*<![CDATA[*/

var BM=new BookMark({
 ID:'tst',
 DaysPersistance:1
});
/*]]>*/
</script>

</body>

</html>

100415B.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
  width:200px;height:200px;border:solid black 1px;
}

#tst .item {

}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/


function BookMark(o){
 this.ary=[];
 this.nme=o.ID;
 this.links=document.getElementById(this.nme).getElementsByTagName('A');
 this.days=o.DaysPersistance;
 this.url=window.location.toString();
 this.url=this.url.split('#')[0];
 var rtn=zxcReadCookie(this.nme);
 if (rtn){
  rtn=rtn.split('^');
  for (var s,z0=0;z0<rtn.length;z0++){
   s=rtn[z0].split(',');
   this.ary.push([s[0],s[1],s[2]]);
  }
  this.Populate();
 }
}

BookMark.prototype.Add=function(cb,txt,bm){
 for (var z0=0;z0<this.ary.length;z0++){
  if (this.ary[z0]&&this.ary[z0][0]==txt){
   this.ary.splice(z0,1);
  }
 }
 if (document.getElementById(cb).checked){
  this.ary.unshift([txt,this.url+'#'+bm,cb]);
 }
 this.Populate();
}

BookMark.prototype.Populate=function(){
 this.ary.length=Math.min(this.links.length,this.ary.length);
 for (var z0=0;z0<this.links.length;z0++){
  if (this.ary[z0]&&this.ary[z0][0]){
   this.links[z0].innerHTML=this.ary[z0][0];
   this.links[z0].href=this.ary[z0][1];
   if (this.url==this.ary[z0][1].split('#')[0]&&document.getElementById(this.ary[z0][2])){
    document.getElementById(this.ary[z0][2]).checked=true;
   }
  }
  else {
   this.links[z0].innerHTML='';
  }
 }
 zxcCreateCookie(this.nme,this.ary.join('^'),this.days);
}

function zxcCreateCookie(nme,v,days){
 document.cookie=nme+'='+v+';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
}

function zxcReadCookie(nme){
 nme+='=';
 var split = document.cookie.split(';');
 for(var z0=0;z0<split.length;z0++){
  var s=split[z0];
  while (s.charAt(0)==' ') s=s.substring(1,s.length);
  if (s.indexOf(nme)==0) return s.substring(nme.length,s.length);
 }
 return null;
}


/*]]>*/
</script>
</head>

<body>
<br />
<a href="100415A.htm">GoTo 100415A.htm</a>
<div id="tst" >
<a href="#" class="item" ></a><br />
<a href="#" class="item" ></a><br />
<a href="#" class="item" ></a><br />
<a href="#" class="item" ></a><br />
<a href="#" class="item" ></a><br />
</div>
<a name="tom"></a>
I like 3<br />
<input type="checkbox" id="bm3" onclick="BM.Add('bm3','I like 3','tom');" />
<div style="height:500px;" ></div>
<a name="joe"></a>

I like 42<br />
<input type="checkbox" id="bm4" onclick="BM.Add('bm4','I like 4','joe');" />
<div style="height:500px;" ></div>
http://www.webdeveloper.com/forum/showthread.php?t=227826
<script type="text/javascript">
/*<![CDATA[*/

var BM=new BookMark({
 ID:'tst',
 DaysPersistance:1
});
/*]]>*/
</script>

</body>

</html>