|
JavaScript - Need Help Listing Shopping Cart Items With Document.write From Cookie
hello
recently i finally managed to make a working shopping cart system, in that i can add as many items as i want and it will work, all using cookies. Then i have another page, the cart which reads the cookie entry made with each demo purchase, then using a while loop lists these items, the problem i am having, is that when i add the textbox which would hold the value of the quantity, it is put out on the next line down, instead of next to the text which i find quite annoying. Also i would like to know how i can add a button next to the textbox, for updating the quantity, also ide like to know how i could access that button, or have it do something, since it wouldnt be prewritten. any help would be greatly apreciated. here is a zip file containing the html files of the customizable purchase page, and the new shopping cart. be sure to refresh the page before trying to use the first page, so it establishes the counter cookie. Similar TutorialsI'm working on a website that will basically embed a widget/frame sent by a handler into a user's current page. The user basically adds a script tag to where they would like the HTML to be. The script tag has their settings and is basically a document.write that calls all the code that we want displayed. So here's my problem. We have a map that we need to add in a specific section, and to get the map we have to call another script tag. So we end up having a script tag (map) embedded in another script tag (the code for the widget/frame) or we end up having to document.write inside a document.write. Now this works just fine and as expected in Firefox, Safari, and Chrome. However, Internet Explorer and Opera wait until the first document.write is completely finished before calling the embedded one. Of course the problem with this, is that it takes the map out of the document's flow and just appends it to the bottom left of the page. Since the rest of the page has already been called, there's no way to move the interior "map" script. Any ideas? Basically just trying to figure out how (if even possible) to render an embedded script tag in Internet Explorer and be able to place it properly. I've tried everything that I can think of, including AJAX and Google's unescape script. Any suggestions, I'd greatly appreciate it. Or even if you've encountered a similar problem, and know that it just isn't possible in IE or Opera, that would be fine too. Thanks in advance! I am working on my shopping cart page with DOM. In my html I created two tables one for items with add buttons, and the other one for displaying how many items are added. So, here is my html codes Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="forms" />
<meta name="keywords" content="Client Side Programming, JavaScript, CSS" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<script type="text/javascript" src="shopping.js"></script>
</head>
<body>
<h1>Central Valley Chocolates</h1>
<h2>Gourmet Chocolates</h2>
<table border="1" id="chocoateTrable">
<tr id="ch1">
<td>Chocolate Truffles</td><td>$34.99</td><td>
<input type="button" value="Add" onclick="addItem(document.getElementById('ch1').rowIndex)" /></td></tr>
<tr id="ch2">
<td>Pecan</td><td>$14.99</td><td>
<input type="button" value="Add" onclick="addItem(document.getElementById('ch2').rowIndex)" /></td></tr>
<tr id="ch3">
<td>Truffles</td><td>$28.99</td><td>
<input type="button" value="Add" onclick="addItem(document.getElementById('ch3').rowIndex)" /></td></tr>
<tr id="ch4">
<td>caramel</td><td>$22.99</td><td>
<input type="button" value="Add" onclick="addItem(document.getElementById('ch4').rowIndex)" /></td></tr>
<tr id="ch5">
<td>Bark</td><td>$17.99</td><td>
<input type="button" value="Add" onclick="addItem(document.getElementById('ch5').rowIndex)" /></td></tr>
</table>
<h2>Your Shopping Cart</h2>
<table id="shoppingCart" border="1">
<tr><td>Your shopping cart is empty</td></tr>
</table>
<p id="total"> </p>
</body>
</html>
And in my js file, I have two functions one for adding items and the other for deleting items. Code: var emptyCart = true;
var salesTotal = 0;
var curRow = 1;
function addItem(selectedItem){
if(emptyCart == true){
document.getElementById('shoppingCart').deleteRow(0);
emptyCart = false;
}
var curItem = document.getElementById("chocolateTable").rows[selectedItem].cells;
var selectedItem = curItem[0].innerHTML;
var itemPrice = curItem[1].innerHTML;
var lastItem = document.getElementById("shoppingCart").rows.length;
var cartTable = document.getElementById("shoppingCart");
var newRow = cartTable.insertRow(lastItem);
document.getElementById("shoppingCart").rows[lastItem].id = "R" + curRow;
var itemCell = newRow.insertCell(0);
itemCell.innerHTML = selectedItem;
var priceCell = newRow.insertCell(1);
priceCell.innerHTML = itemPrice;
var actionCell = newRow.insertCell(2);
actionCell.innerHTML = "<input type='button' value = 'Remove' " + "onclick=\"removeItem('R"+curROw + "')\" />";
++curRow;
salesTotal += parseFloat(itemPrice.substring(1));
document.getElementById('total').innerHTML = "<strong>Sales total</strong>: $" + salesTotal.toFixed(2);
}
function removeItem(rowNum){
if(document.getElementById("shoppingCart").rows.length == 1){
document.getElementById("shoppingCart").rows[0].cells[0].innerHTML = "<td>Your shopping cart is empty</td>";
document.getElementById("shoppingCart").rows[0].cells[1].innerHTML = "<td>$0.00</td>";
document.getElementById('total').innerHTML = "$" + salesTotal.toFixed(2);
emptyCart = true;
}
else{
var selectedRow = document.getElementById(rowNum).rowIndex;
var itemPrice = document.getElementById("shoppingCart").rows[selectedRow].cells[1].innerHTML;
document.getElementById("ShoppingCart").deleteRow(seletedRow);
salesTotal = salesTotal - parseFloat(itemPrice.substring(1));
document.getElementById('total').innerHTML = "$" + salesTotal.toFixed(2);
}
}
However, when I click add button to add each item, I don't see anything in my shoppingCart. Anyone can tell me what is wrong with my code? Hi and hope someone can help, I'm doing some course work on setting / getting cookies for a shopping cart. It basically works except the user can only select one item of each of the goods on offer i.e. you can only buy one cup (not two), one saucer etc. etc. I've deliberately not put a quantity field on the goods selection page and was hoping to modify my set cookie function so that if you've already selected one cup, the next tiume you select a cup, cups become 2 etc. etc. Here's my set cookie function. Notice that I've hard wired a "1" in there which I want to change to the variable for the number of cups. I've also commented out some of the first few lines which were experiments to resolve the problem. Code: function setCookie(name)
{
alert("Thank you.\n\nYour basket has been updated.");
/* if(name.value !=0 || name.value==null)
name.value++;
x=getCookie(name) || 0;
alert(document.cookie);*/
var today = new Date();
var expiry = new Date(today.getTime()+28*24*60*60*1000); // plus 28 days
document.cookie=name+"= 1 ;expires="+expiry.toGMTString();
cart = document.cookie;
}
My thanks, R A little while later... I've cracked it, my function now looks like this and it appears to work... Code: function setCookie(name)
{
alert("Thank you.\n\nYour basket has been updated.");
x=parseInt(getCookie(name)) || 0;
alert(x);
y=x+1;
var today = new Date();
var expiry = new Date(today.getTime()+28*24*60*60*1000); // plus 28 days
document.cookie=name+"="+y+";expires="+expiry.toGMTString();
cart = document.cookie;
}
Thanks you fror your interest, appreciated, R My code is here and it works ... However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ... What am i missing ? Regards, Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE>
<META content="text/html"; charset="UTF-8" http-equiv="content-type">
<SCRIPT type="text/javascript">
function createTable(){
var Etudiant = new Array(Number(prompt("How many Students will you put in ?","")));
document.write("<table border=\"1\">");
for (var i=0; i<Etudiant.length; i++) {
Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","")
alert("Nice to see you "+Etudiant[i]);
document.write("<td>"+Etudiant[i]+"</td>");
j = parseInt(prompt("Combien de notes voulez vous calculez ?"));
for (h=0;h<j;h++){
notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i]));
document.write("<td>"+notes[h]+"</td>");
}
document.write("<tr>");
}
document.write("</tr>");
document.write("</table>");
document.getElementById('monTab').innerHTML=Etudiant;
}
</script>
<BODY>
<H1>Combien de note voulez vous cumulez ?</H1>
<br>
<br>
<input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()">
<div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div>
</BODY>
</HTML>
I'm using simpleCart.js (http://simplecartjs.com ) on http://yogasports.biz and have run into issues. I would like the checkout page to allow items to be removed or quantities edited and it is currently not allowing it. The javascript is located at http://yogasports.biz/simpleCart.js Also there are additional shipping options that are not appearing upon checkout yet they are declared in the paypal account. I'm unsure of what to edit in the javascript file so that they will appear. Hello guys my question has changed, i dont want to double post so here is my new question, I now have 3 arrays name price quantity totalPrices now i want to create a table that will hold them but it will be created when you click the shop cart button, this button will take you to a blank page with the table on it i would like something like this Toy name| Quantity | Price | Total price Toy1 | Quantity | Price | Total price of that toy Toy2 | Quantity | Price | Total price of that toy Toy3 | Quantity | Price | Total price of that toy ----- | -------- | ----- | Total price all together I have looked at many tutorials but i cant get any to work, all they do is draw nothing and i cant get it to work Hi all, I have just joined this forum hoping for some help on a problem i am having, i have a feeling the solution is simple but im a noob at JAVA so i have no idea how to work it out. The site is.... http://inspirecalendar.net/html/purchase.html The problem is the following.... When you select US (West Coast) as your location it doesn't update the price on the right properly. If you select it first it just won't display anything. if you select it after choosing another one and hitting continue then it doesn't change. Any help would be appreciated, hope i explain the problem properly if you have any questions feel free to ask... Thnks in advance :Smiley Hi Guys, I am trying to get the Fat-Free shopping cart woking with a flash file. I have tried [CODE] on (rollOver) { _parent.gotoAndPlay("s1"); } on (releaseOutside, rollOut) { _parent.gotoAndPlay("s2"); } on (release) {getURL("https://www.e-junkie.com/ecom/fgb.php?c=cart&cl=1&ejc=2&merchant_id=your_google_merchant_id&business=website.com" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this));"}[CODE] The compiler tells me that a ')' or ',' is expected. Any help appreciated. I am a newbie. Thanks PeterW Hi All! Thanks in advance to any and all who help me. What we are trying to do is have a form where customers can use a conditional logic based form that upon submission will redirect to checkout with an appropriate product bundle being populated in the shopping cart. I have some experience with creating forms, in fact I have made a decent form that I have modified from an online form builder... the problem is I have no idea how to auto-fill the shopping cart... period. From what I have read in my research this should be a function of Javascript. I have a decent working knowledge of php, and html, but I am pretty clueless when it comes to Javascript, if anyone could point me in the right direction for this project I would really appreciate it. Right now this javascript shopping cart works to 1. charge shipping based on the item, 2. the destination country, 3. it combines shipping for a quantity over 1 of the SAME item. Each item has 2 different possible shipping charges. I am trying to get the javascript to check the shopping cart to see what item in the cart has the highest possible shipping charge, charge that amount to that item, and charge the lowest possible shipping charge on all other items in the cart. If item A is purchased alone shipping is $5.00. If purchased with item B, which costs $10.00 to ship alone, the $10.00 is charged for item B and only $3.00 for item A. Because item B had the higher shipping charge at a quantity of one. I have tried adding various things like me.items[current], item.shipping, me.shipping, this.shipping, shipping_Cost, and other things next to the second && in the part of the script that shows the country. I have also tried adding && if (me.whatever) and && if (item.whatever) and similar things at the beginning of the script next to if (this.country). I have found the parts of the script that pertain to cart items and to updating the shopping cart. Now I am stuck. The javascript is in 2 parts. One part goes in the item page, which I will post first. The second part goes in an external javascript file which I will post at the bottom. In between there is the part that shows the shopping cart. It isn't part of the javascript. Code: <script type="text/javascript" src="simpleCart.js"></script>
<script type="text/javascript">
<!--
simpleCart.checkoutTo = PayPal;
simpleCart.email = "my Paypal email address";
simpleCart.cartHeaders = ["Name" , "Price" , "Quantity" , "remove" ];
CartItem.prototype.shipping=function(){
// we are using a 'country' field to calculate the shipping,
// so we first make sure the item has a country
if(this.country){
if( this.country == 'United States' && this.quantity == '1'){
return this.quantity*5.00;
} else if( this.country == 'United States' && this.quantity >= '2') {
return this.quantity*3.00;
} else if( this.country == 'Belgium' && this.quantity == '1') {
return this.quantity*12.00;
} else if( this.country == 'Belgium' && this.quantity >= '2') {
return this.quantity*9.00;
else {
return this.quantity*0.00;
}
} else {
// use a default of $0.00 per item if there is no 'country' field
return this.quantity*0.00;
}
}
// --></script>
Code: <div style="display:block;"></div> <div>SHOPPING CART</div> <div class="cartHeaders"></div><br><br><br> <div class="simpleCart_items"></div> <div id="totals"> Item Total: <span class="simpleCart_total"></span><br>Shipping Total: <span class="simpleCart_shippingCost"></span><br>Tax: <span class="simpleCart_taxCost"></span><br>Final Total: <span class="simpleCart_finalTotal"></span> </div> <br><br><br><br> <br><br> <a href="javascript:;" class="simpleCart_empty">Empty Shopping Cart</a><br><br> <a href="javascript:;" class="simpleCart_checkout">Checkout Through Paypal</a> </div></div> separate javascript file is here http://simplecartjs.com/documentation.html I need help in creating a multiple value cookie when the user clicks the Add to cart input button. Here is the portion of code from the html page that creates the inventory item display and the Add to cart button. There are six of these on the page: Code: <div id="inventoryspread">
<div class='productBoxInvUL'>
<script type:"text/javascript">
document.write("<img src="+"'"+"images/"+arrImage[0]+"'"+"align='left'/>"+
"<p><br/><span class='invName'>"+arrName[0]+"</span></p>"+
"<p>"+arrDescription[0]+"</p>"+
"<p>Item# "+arrItem[0]+"<br/>"+
"<span class='invPrice'>"+arrPrice[0]+"</p>");
</script>
<input type="button" value="Add to Cart" onclick='createCookie("name, value, 7", prompt("cookie created"))' />
</div>
And here is a portion of the array that fills it: Code: var arrItem = new Array(); var arrName = new Array(); var arrDescription = new Array(); var arrPrice = new Array(); var arrImage = new Array(); arrItem[0]= "FE100"; arrName[0]= "Blacktop Jazzmaster"; arrDescription[0]= "Monster dual-bucker tone. Vintage style alnico humbucking pickup, single coil, skirted black amp knobs, and 3-way toggle switch. Alder body, Maple neck, Rosewood fretboard, 21 medium jumbo frets, gloss urethane finish and nickel/chrome hardware."; arrPrice[0]= "$699.00"; arrImage[0]= "FE100.png"; arrItem[1]= "FE200"; arrName[1]= "Roland-Ready Stratocaster"; arrDescription[1]= "Time-tested Fender tone, timeless styling, 3 single-coil pickups, synchronized tremolo, high-mass bridge block, shielded body cavities and medium jumbo frets. Built-in Roland GK-2A pickup system, tinted neck, parchment pickguard and control knobs, and a '70s-style logo."; arrPrice[1]= "$1,019.00"; arrImage[1]= "FE200.png"; arrItem[2]= "FA100"; arrName[2]= "CD220SCE Exotics "; arrDescription[2]= "Exotic and beautiful with rich tone, laminated burl ash back and sides, with a solid spruce top. Fender-designed dreadnought body, X-bracing, and die-cast tuners. Cutaway body design with rosewood bridge featuring a compensated bone nut"; arrPrice[2]= "$629.00"; arrImage[2]= "FA100.png"; arrItem[3]= "FA200"; arrName[3]= "Dick Dale Mailbu SCE"; arrDescription[3]= "Thin folk body design, laminated spruce top, laminated mahogany back and sides, scalloped X-bracing providing well balanced tone. Maple neck, rosewood compensated bridge and fretboard, vintage-style Fender tuners, and a surfin' red paint job on the top and back"; arrPrice[3]= "$849.00"; arrImage[3]= "FA200.png"; arrItem[4]= "FB100"; arrName[4]= "Standard Precision Bass"; arrDescription[4]= "Sound, look, and feel today's bass players demand. Classic P-Bass old-school design. Contemporary features and refinements. Alder body and a split single-coil pickup, this classic electric bass guitar lives up to its Fender legacy."; arrPrice[4]= "$579.00"; arrImage[4]= "FB100.png"; arrItem[5]= "FB200"; arrName[5]= "Roger Waters Signature Precision Bass"; arrDescription[5]= "Tastefully tailored, black-on-black color scheme, Seymour Duncan Basslines SPB-3 Quarter-Pound split-coil Precision Bass pickup, knurled black control knobs, brass nut, black bridge and strap buttons, vintage '70s-style open-gear chrome tuners."; arrPrice[5]= "$1,199.00"; arrImage[5]= "FB200.png"; arrItem[6]= "GE100"; arrName[6]= "Firebird X Limited Edition"; arrDescription[6]= "Turbo-charged Pure-Analog engine. Hand-applied and unique high-end wood finish. Beautiful, historical and yet contemporary and unique. Limited run of just 1,800 units. It is sure to become a collector classic."; arrPrice[6]= "$5,569.00"; arrImage[6]= "GE100.png"; The cookie only needs to include the Item#, Name and Price of each item to populate a shopping cart page. This is only a small student project and is client side only using javascript. Thank you for any help we can get on this. Hi i have a function (i wont write it out coz it is too long!) but after i have done the main calculations within this function i wont to display some of the variables in a table. i have writen: document.write( <table border="1"> <tr><td> Value 1 </td><td> document.write(a); //here * </td></tr> </table> ); were it says "here *" i wont to write within the table variable a (which i have defined properly in the function). However, as i have already written document.write it actually displays the text "document.write(a);" instead of the value for var a. Help asap please as it in for school soon! Thanks in advanced :D What is an alternative to document.write? I know I could use <p> in html </p> I would like to use JS though. I hope you can understand my question. I am 14yo and this is not for homework. I just wanna try and learn JS. I read document.write can cause me problems. But all I ever see is: <script type="text/javascript"> document.write("any words"); </script> what alternate could I use? Hello, I'm new to Javascript. I know how to make a script that when you click on a button it changes a variable. I also know that with document.write I can express this variable but I do not know how to refresh document.write! For example, if I have a var car =3 and when I click on a button car++ (or increases by 1 so it becomes 4 then 5 and so forth depending how many times you click the button) and I write document.write (car), it only shows the 3 and no matter how many times I click on the button, the 3 doesn't change. How can I get the document.write to show the updated variable? Thanks! So I want to have a button that when I click it will change this variable and that number will change live on the page. I need to be able to get the last value saved in document.cookie. My current script creates a cookie every time a new value is chosen in a drop down menu. Is there anyway to do this? document.write("<script type='text/javascript' src='http://www.website.com/javscript.js'></script>"); For some reason this will not output correctly. It ouputs "); Which is the last three characters. |
|||||||