|
JavaScript - Newbie Building A Simple Shopping Cart- Reward
Similar TutorialsI 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 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. 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. I have yet to have my ah-ha moment with Javascript but I think its coming soon. there are small things that seem to be baffling me and Im hoping posting to the forums to get help from people of limitless wisdom. What exactly does the "|" mean in this code? or I should say what does it do? Code: document.template.Aprod_string.value = document.template.Aprod_string.value + "|" + string_recode(Aprod_array) ; Lets say I have two images in a box Code: <body> <div id="box"> <img src="image1.jpg" id="image1" width="100" height="100" /> <img src="image2.jpg" id="image2" width="100" height="100" /> </div> </body> When I click on Image1 I want Image2 to get replaced with a new image, called Image3. So I tried this code: Code: var image1 = document.getElementById("image1");
image1.onclick = image1_click ();
function image1_click () {
new_image= new Image
new_image = document.getElementById("image2");
new_image.src="image3.jpg"
}
But instead of replacing the image on click, from some reason it replaces image2 with image3 from start/load. What should I do to make this work? Thank you. Not new to programming but I am to JQuery (and j/script in general). I need to query a mysql database to return a small amount of data (some text) based on a user code (e.g. MrABC). I could use an iFrame and PHP but if the internet connection is down I do not want error messages displayed - the intended audience have limited cognitive capabilities and will not cope with ERROR 404 etc... Essentially I need to be able to create a function that can be called with a parameter of the usercode and which returns the text from the lookup. What I put in the function is a complete mystery to me ... Hi, I have an array but I'm not exactly sure how to finish the build using an if statement. I have 6 elements and need the build to load a different top image for each array that loads that matches the specific element. Here is what I have but it only shows the first top image no matter what: PHP Code: <LINK REL=StyleSheet HREF="scrolling_popup/scrolling_popup.css" TYPE="text/css"> <script type="text/javascript" language="javascript" src="scrolling_popup/scrolling_popup.js"></script> <script type="text/javascript" > var array = new Array(); array[0]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/1.jpg" border="0" alt=""></a>'; array[1]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/2.jpg" border="0" alt=""></a>'; array[2]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/3.jpg" border="0" alt=""></a>'; array[3]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/4.jpg" border="0" alt=""></a>'; array[4]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/5.jpg" border="0" alt=""></a>'; array[5]='<a href="http://www.amateurmatch.com/in/?ainfo=MjI5MjR8Nnw3NDc=&atcc=0&_t=search3&id=489257" rel="nofollow" target="_blank"><img src="http://www.oohya.net/geoip/p/6.jpg" border="0" alt=""></a>'; var num=Math.floor(Math.random()*(array.length) ); var html_code = array[num]; if (array[0]) { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop1.png">', html_code); } else if (array[1]) { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop2.png">', html_code); } else if (array[2]) { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop3.png">', html_code); } else if (array[3]) { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop4.png">', html_code); } else if (array[4]) { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop5.png">', html_code); } else { buildPopup_HtmlCode(390, 329, '<img src="http://www.oohya.net/geoip/images/imtop6.png">', html_code); } </script> Any ideas? Hello, I'm trying to build a simple API - it's running fine in Safari and Firefox but failing in IE and Opera. In order to isolate the problem I've stripped it right back 'til all the methods are just alerting their own name. Safari and Firefox give me loads of alerts, but in Opera and IE I just get one, LMSInitialize() when the page first loads - at least I know the browser is finding the API properly. IE also runs LMSCommit() and LMSFinish() when you close the browser window; that's good, but not enough. Opera doesn't even do that. The trigger for all this is a Flash movie created in Adobe Captivate, and published with a whole lot of its own JS which I can't touch - it's running in an iframe, and it's the parent window which includes the API. I need to work out whether there's an issue in my code, or if it's to do with the movie or the publication settings - that side of things is out of my control. Here's the full code of my test version of the API. I'd really appreciate any comments! Thanks, Ben Code: function SIScormAPI(){
this.version = '1.2';
this.LMSInitialize = LMSInitialize;
this.LMSFinish = LMSFinish;
this.LMSGetValue = LMSGetValue;
this.LMSSetValue = LMSSetValue;
this.LMSCommit = LMSCommit;
this.LMSGetLastError = LMSGetLastError;
this.LMSGetErrorString = LMSGetErrorString;
this.LMSGetDiagnostic = LMSGetDiagnostic;
}
function LMSInitialize(){
var alertStr1 = 'LMSInitialize() - v.'+this.version;
alert(alertStr1);
}
function LMSFinish(){
var alertStr2 = 'LMSFinish()';
alert(alertStr2);
}
function LMSGetValue(){
var alertStr3 = 'LMSGetValue()';
alert(alertStr3);
}
function LMSSetValue(){
var alertStr4 = 'LMSSetValue()';
alert(alertStr4);
}
function LMSCommit(){
var alertStr5 = 'LMSCommit()!!!!!';
alert(alertStr5);
}
function LMSGetLastError(){
var alertStr6 = 'LMSGetLastError()';
alert(alertStr6);
}
function LMSGetErrorString(){
var alertStr7 = 'LMSGetErrorString()';
alert(alertStr7);
}
function LMSGetDiagnostic(){
var alertStr8 = 'LMSGetDiagnostic()';
alert(alertStr8);
}
API = new SIScormAPI();
Hey all, I have an issue building a query string. Basically, I have this: /sites?order=site_numper_page=20& But I would like to convert it to this: /sites?order=site_num&per_page=20 I have tried this to check if the current iterator is less than the length of the object and if so, then add the "&", otherwise, don't. But it doesn't seem to work: Code: $.each(query_string, function(key,value){
params += key + '=' + value;
if((value + 1) != query_string.length){
params += "&";
}
})
Thanks for any response. Hi forums, I'm building a website for my class and one of the things I was planning on doing is building a navigation where when you hover over the mouse, depending on which side, I wanted the content to scroll from that particular direction. The problem is, I am terrible at Javascript. I have nothing to work with, just the idea. This is an illustration to what I was referring to. Is there a term for this? All I really need is just something to work with, a redirect to an existing example that vaguely captures this idea along with the source is fine. I tried finding myself, but I only found and worked with one Javascript navigation and it didn't do what I was expecting to do. Any assistance is highly appreciated. I work for a university in Texas, and recently my boss indicated he wanted me to build a "help button" widget for our computers. We run both Mac and Windows, and will be upgrading to Windows 7 soon, as I understand it supports widgets. According to the guide I'm working my way through, Widgets can built using a combination of HTML and Javascript. While I know HTML, I know next to nothing about Javascript, hence, my question. Here's what I need the script to do: Pull the logged in username, pull the machine name, pull the time and date, then throw up a dialogue box which will send everything to an e-mail address/server. Does anyone know a spot for me to begin? I must confess, I'm a little befuddled by Javascript. Thanks Hi, I'm new to JS and I am trying to build my first script. My problem, is I'm trying to build a multi hide/show script, displaying paragraphs of information. If I want multiple variables for the script do I have to use an array? and if so, how can I construct this array? Here is my script as of now, <!-- // this tells jquery to run the function below once the DOM is read $(document).ready(function() { // choose text for the show/hide link var showText="Resume"; var hideText="Hide"; var profile_showText="Profile"; var profile_hideText="Hide"; // append show/hide links to the element directly preceding the element with a class of "toggle" $(".toggle").prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)'); $(".profile_toggle").prev().append(' (<a href="#" class="profile_toggleLink">'+profile_showText+'</a>)'); // hide all of the elements with a class of 'toggle' $('.toggle').hide(); $('.profile_toggle').hide(); // capture clicks on the toggle links $('a.toggleLink').click(function() { $('a.profile_toggleLink').click(function() { // change the link depending on whether the element is shown or hidden if ($(this).html()==showText) { $(this).html(hideText); } else { $(this).html(showText); } // profile_toggle if ($(this).html()==profile_showText) { $(this).html(profile_hideText); } else { $(this).html(profile_showText); } // toggle the display $(this).parent().next('.toggle').toggle('fast'); // profile_toggle $(this).parent().next('.profile_toggle').profile_toggle('fast'); // return false so any link destination is not followed return false; }); }); }); //--> Right now the script doesn't work with the bottom two variables profile_"ect." Please help, been working on this for sometime and its probably an easy fix for someone experienced. Thanks! |
|||||||