A basket in my site!

[ConfusedOfLife]

Hi, I'm not sure that this article belongs to here! but well, you can redirect me if I'm wrong. I'm sure that you went to those sites with a basket, that after choosing what you want, it's gonna be in the basket and you can see it, I can simulate something like that with JS, but it has some problems, like I have to have an array in all my pages, containing the orders of the customer, because I can not put it in a one page, coz if I do that and the viwer closes that page, but he/she be still in the site, I mean just one page be open, then I will loose all my data! So, is it anyway that I can do it with javascript without all these problems? Also, I think this thing is usually written by means of a database like SQL, am I right?!

Cheers

[D2K2]

Well, to do that you could use Cookies.

EG:
The person selects 2 green Widgets on the Widget page, and its stored in a Cookie

document.cookie="greenwidgets="+document.form.greenwidgets.value

The person then goes to the Thing section, and selects 5 purple things

document.cookie="purplethings="+document.form.purplethings.value

The person then goes to the Basket link, and views the Basket

var greenwidgets=get_cookie("greenwidgets")
var bluewidgets=get_cookie("bluewidgets")
var purplethings=get_cookie("purplethings")
var orangethings=get_cookie("orangethings")

And you use that information to show what they are ordering.

The only draw-back is you need to check for ALL the items in your store in the cookie, which is why the Bluewidgets and Orangethings needed to be checked for too.

BTW: A get_cookie() script is available at Javascript Kit (http://www.javascriptkit.com/javatutors/cookie2.shtml#b), Just look for "Shelley Powers Get Cookie Script".

[ConfusedOfLife]

Thank you! you know something, I know about cookies and how to use them ( wow! ), but it just didn't come to my mind that I can use cookies on this thing! ppl were talking about SQL and I was just confused what to do, better to say scared! Thanks! I couldn't remember if you didn't jug my memory, but we still have another problem that I think I solved, it's that we have to delete all the cookies ( I mean entries ) when the last page of the all opened pages of the site is closed. I'm not talking about all the pages that my site is going to have, I mean that when the user opens the index.html and then navigates the site and orders some stuff, then his/her orders just have to be deleted when he/she leaves the site, not that for example he/she closes the index page, huh? For that, I think we can put a counter for each "<a href=''></a>" tag, and we save that counter in our cookie file each time that a new page is opened, incrementing that by one, and decrement that by one whenever a page is closed in the onbeforeclose event handler, how's that? let's say the user openes 13 pages, then our counter is 13, so, by closing each page, we say that if the number is already 1, means that this page that's about to be closed is the last opened page of the site, has to delete the cookie. Doing this ensures that when the user comes to the site the next time, he/she will have an empty basket, what do you think?

[moggers1]

i am also building a jscript shopping basket for a CD catalogue with jscript & cookies. on the "review order" page are you thinking of having an option where you can delete certain items if the person using the orderform decides that they don't actually want the item? ... if u've got any q's bout the shopping cart thing please ask & i'll see if i can answer...

ian.

[ConfusedOfLife]

Yeah, I wana do that too & I thought of that, it's not hard, what I'm gonna do is coding my items, because the maximum size of a cookie file is 4 kbs, you can not stuff your big names in it, so, I make 2 parrallel arrays, one containing the code, another containing the real names, that I can match them easily. Also ppl asked me to put a "see basket" button for them, but I think it's better that we just have one button, for example order, then when the person goes there and he/she didn't choose anything b4, then he/she'll be promted to choose something, or is gonna see just an empty table, but if they chose b4, then they'll see the items, each one having a checkbox, that if the person wants to delete them, he/she doesn't have to go back all the way to the products page for example, it's pretty easy in js. I also think that's better that we assign a number to all the items in our cookie file, I mean actually to all the codes, having 1 for a code, means that it's selected, and having zero for example, means that it's not, it's gonna be useful when later the customer tries to delete something from his order page. I don't think that we can use the expiration date in here, because I'm not gonna use it at all for any entry, coz I want my basket to be empty when all the pages of the site are closed. The only problem that I have, is that I can not send the list of items in JS to the server, I mean coz I don't know PHP or ASP, then I have to make a form that the person himself clicks the submit button, and all the items ( actually an array ) goes to the server, I know that's not a good way, coz I have to put all the items in seperate text inputs! and all of them shoud be read-only too( coz I don't want the users to be able to write into them!), I also have to change their look on the page with CSS, turning the border-width to zero, and showing them as they're not text inputs! then when the user clicks the submit button, then, well, everything is gonna be sent to the server. It's the whole story! What's your idea?!

[moggers1]

fairly similar. Instead of having to email it tho, i've been asked to just do a "printout" form - a bit easier, but it avoids all the rubbish associated with credit cards etc. This is on a CD rather than on a web page so no probs with file size(except for the 4kb cookie size). i've had loadsa probs with the checkbox thing, possibly cos i'm not v good @ jscript, so i'm just having a confirm box in the for loop which asks if they want a certain item & if they don't puts zeros into the cookie instead of the original value.
out of sheer curiosity, how are u thinking of doing the checkboxes? its taken me awhile & given me a few grey hairs but i'm almost there!... i tend to just rip off site code & alter it but i have enjoyed doing it & i'm looking fwd 2 putting my own disclaimer thing at the top :) do u often write your own code?

[ConfusedOfLife]

Well, I've done it b4 somehow in another program, a kinda URL Book. It's pretty simple to make the checkboxes, you said that you need to make a list, ok? You just get all the fileds of your cookie that I think you're gonna put them into an array, right? Let's say your array is called Items, so, you're gonna put checkboxes in your page by a for loop, making them equal to the number of items.length. Something like:

document.write("<form>");
document.write("<table border=0 cellspacing=0 cellpading=0>");
for (i=0; i<items.length; i++)
document.write("<tr>" +
"<td>"+
"<input type='checkbox' name='" + items[i] + "'>" + items[i] +
"</td></tr>");

document.write("</table></form>");

After setting up the checkboxes, you can refer to them whenever that you like!

You can download that another program that I said too, I keep my fingers crossed for you!

PS. Yeah, I usually ( almost everytime ) write my stuff myself! why did you ask?!

[moggers1]

finally figured out the checkboxes using a for loop .checked == true thing. works well, but now i gotta link up the checkbox thats been clicked to the relevant piece of cookie info - no rest for the stupid!
had a look at your attachment - v impressive... to be honest i did look @ the code but its a bit over my head in quite a few places. One thing that i did note was the separate css file which is kinda handy; must try that!

excuse me, back to work...

[ConfusedOfLife]

It's so natural that you do not understand a program/script the first time that you see it! Even when a pseudocode , that's easier to understnad, becomes a real program, sometimes the person who wrote it ( assuming the programmer and the pseudocoder were different ) can not figure out that it's his/her own code! It's like playing piano, when I started I thought that I should be able to look at the notes and play, like reading and listening! But then I understood that it's not like reading a letter!
Ok, I have one suggestion for linking your checkboxes to relevant cookie entries, you're pushing your cookie entries into an array, ok? for example if you have 7 values in your cookie file, then you're gonna make an array with the length of 7, putting those values in them, ok? so, why don't you simply name your checkboxes based on the number of your array? Let's say you have 7 names in your cookie file, you can push those values into an array and link the checkbox to them at the same time by means of a single for loop. Look:


for (i=0; i<document.cookie.length; i++)
{
myArr[ i ] = getCookie(); // This function gives you your relevant cookie entry, you know how to write it, ok?
document.write("<input type='checkbox' name='" + i + "' onclick='update(this.name)'>"
}


You see, it's very easy, then for example you have a function called update(Name) that gets the name of each checkbox, and does something, for checking that for example if myArr(5) is checked, you should just check the checkbox that's name is 5, ok?

[moggers1]

i've actually twigged the checkbox thing now with this little ditty:

function burnItem()
{
var num = 0;
var theboxes = document.valueField.box;

var sepValues1 = Order();

var num = 0;

for(j=0; j<sepValues1.length; j=j+2){

if(sepValues1[j] != 0){

//alert("" + num);
if(theboxes[num].checked == true){


sepValues1[j] = 0;
sepValues1[j+1] = 0;

//alert("" + sepValues1);
var inCookie = "order=" + escape("" + sepValues1);

document.cookie = inCookie;

history.go();

}//endif

num=num+1;
} }
}
}
Order() referring to the values plugged in by the cookie from the other page. 'boxes' referring to the checkbox array (or the single checkbox). The thing is now, as u delete the checkboxes & u get to the final one, the checkbox array then turns into a single checkbox with no array... which then sprouts errors. the main one being 'checked' is null or not an object. Any ideas??? thanks...

[moggers1]

all done. just used if(document.valueField.box!=null) which worked nicely. i'm going to bed now cos ive had enough of comps for the day!

[ConfusedOfLife]

Congradulations! I'm sure that you had enough for comps, but as you said just for today! Sorry that I didn't answer you, actually I didn't go online, and well, I didn't see your question, but you solved that yourself and your own answer is always better than others (Not always, but you like it more! ). I'm going to write my basket in few days, the site is almost finished, I was thinking of how to write it, I almost had a good and easy way for that ( I mean writing a complete function that just works for all the sites, the user just needs to push his array into the basket object and it works automatically), but they're not paying me enough! I'm gonna use that manual way that nobody can copy it, unless they know what I did, that would be easier for them to write it themselves!

[moggers1]

i know the feeling about not being paid enough... ! don't u just hate it!?

one question, how do you do decimalisation for money? if u've got one value say £10.00 it always gets rid of the final zero... i'll post my basket & see what u think when i sort this decimalisation thing, & if u've got any ideas they would be much appreciated!

[ConfusedOfLife]

Well, I think it's really better that you send your basket or at least you upload it somewhere, and unfortunately I can not show you mine, I mean I can but you're not gonna understand anything! Because it's in Farsi, my mother tongue language, and I don't think that you know that! Anyway, I don't know how you're trying to show the prices, and prices are not entered by the customer, right? I mean you have the list of prices for all your items for example let's say in an array, ok? So, when you want to show your prices, you can show them as string, not as ineger values that it doesn't show them, let's say your prices' array is called "oPrices", then for showing the price of item 10 for example, you can write it into the document by, again! for example typing : document.write(oPrices[10] + ".00");, ok?

But what I'm doing is totally diferent! I have a books page ( my site belongs to an english teaching institute that mainly wants to demonstrate its books ), that each book has two buttons, one for adding that item to the basket and one for removing that, by pressing the add button, you're not gonna be simply taken to the "show basket" page, the thing that most of the sites do, but instead it's gonna be a number on your button, showing how many items you have chosen to buy, if it's the first time that you're pressing the button, it's gonna be 1 on the button, and it'll incerement by one by each mouse click, and remove as it shows is gonna decrement that number by one, so, you can add and remove as much as you want within the Books page, also when you go to the Show Basket page, you'll see the items that you chose, by their prices, the name of the book's writer and lots of other things! If you change the number of let's say one book, I mean if in the books page it was 10 and in the basket page you reduce it to 6, it'll effect the books page AND vice versa, I hope I'm clear enough, and if you noticed it's the exact thing that I wanted to design for them but they said that they're not gonna pay me for that! But it doesn't matter! coz in that case I would have written that in just one function that they can set their basket themselves after this, I mean eliminating myself! But now I just wrote that manually, it means that whatever they wana do and whatever they need to add or remove from their site, they're gonna need me! And I'm gonna charge them again! Also it's a good advertisement for me, showing what I wrote with JS, and contarary to PHP that whatever you add or remove the whole page has to be loaded ( coz it's a server side language ), my program isn't like this! I mean whatever you do, you're not gonna see the page reloading!

[moggers1]

holy cow. its taken me about 2months to do my shopping cart! i'll leave you to do that, whatever it is (cos it sounds v scary) & good luck... but make sure you charge em loadsa money. give me a few weeks & i'll figure out how to put everything in a .zip file :).

[ConfusedOfLife]

Thanx, well, I think I'm gonna do that, but for the first time, I need to have a demo that others can see and then I can charge the future customers! Anyway, I wrote my basket and if you wana see that, send me an email and I'm gonna send you that by english description that you can work with it ( it's in Farsi as I said ), and good luck to you too.