Solved

Setting Up Cookies For Shopping Cart

Posted on 2003-11-27
3
425 Views
Last Modified: 2013-11-29
All right here is the problem.

Trying to creat a shopping page that has three products.
I want the cookies to store the product name and a running quantity.
On "Add Item" button, it needs to check if the cookie is there.
If cookie is not there, create cookie with a value (quantity) of 1.  
If cookie is present and 1 to current value (quantity).

I am having two problems with current code.

Problem 1:
The code I am using now writes over present cookie value with new value.
Ex.
Click on "Product 1".  Cookie is added for Product 1 with quanity of 1.
Next.
Click on "Product 2".  Cookie is overwritten.  Product 1 information is lost.  Prosuct 2 information is written.

Problem 2:
Values (Quantity) is added together as strings instead on integers.  I have tried parseInt() and parseFloat() in various places with no luck.
Ex.
Click on "Product 1".  Cookie is added for Product 1 with quanity of 1.
Next.
Click on "Product 1" again.  Cookie is added for Product 1 with quanity of 11.
Next.
Click on "Product 1" again.  Cookie is added for Product 1 with quanity of 111.
Etc.

Here is the HTML page and code I am using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>JavaScript Cookies - Widgets</title>
      <SCRIPT LANGUAGE="JavaScript">
      var date = new Date("December 31, 2023");
    var cookieDate = date.toGMTString();

      function addItem(itemName) {
                  var cookieContent;
                  var counterValue = readCookie(itemName);
                  //this is where I have been trying the parseInt, parseFloat
                  quantity = counterValue;
                  quantity = quantity + 1;
            // I had to do this because on every click of the same item it would add a : Ex. Product1::11
                  cookieContent = itemName + ":";
                  document.cookie = cookieContent  + quantity + ";expires=" + cookieDate + ";";

                  function readCookie(itemName) {
                        var docCookies = document.cookie;
                        var startIndex = docCookies.indexOf(itemName);
                              if (startIndex == -1) {
                              cookieContent = itemName + ":";
                  document.cookie = cookieContent  + "1" + ";expires=" + cookieDate + ";";
                              };
                        startIndex += itemName.length + 1;
                        var endIndex = docCookies.indexOf(";",startIndex);
                        if (endIndex == -1) endIndex = docCookies.length;
                        var cookieValue = docCookies.substring(startIndex, endIndex);
                        return cookieValue;
            }
}
</SCRIPT>
      
</head>

<body>
<h3>Product 1</h3>
<p>Price - $150.00, Shipping - $10.95</p>
<a href='javascript:addItem("Product1")'>Put In Shopping Cart</a><br>
<br>

<h3>Product 2</h3>
<p> Price - $150.00, Shipping - $ 10.95</p>
<a href='javascript:addItem("Product2")'>Put In Shopping Cart</a> <br>
<br>

<h3>Product 3</h3>
<p>Price - $150.00, Shipping - $10.95</p>
<p><a href='javascript:addItem("Product3")'>Put In Shopping Cart</a>&nbsp;</p>
<p><a href="javascript:alert(document.cookie);">View Cookies</a></p>
</body>
</html>

I want to write the cookie something like this:

Product1:2;Product2:1;Product3:4;

Meaning: Product1 has quantity of 2; Product2 has quantity of 1; Product3 has quantity of 4

On the cart page I will try and parse out each item with a quantity value for each and then assign price * quanity for a total.

Sorry, all I have to give is 125 points.

Thanks in advance for any help.
0
Comment
Question by:brianindium
  • 2
3 Comments
 
LVL 5

Accepted Solution

by:
apparition earned 125 total points
ID: 9832666
The code below should do what you are trying to accomplish

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
     <title>JavaScript Cookies - Widgets</title>
     <SCRIPT LANGUAGE="JavaScript">
     // create an instance of the Date object
      var now = new Date();
      // fix the bug in Navigator 2.0, Macintosh
      fixDate(now);
      // cookie expires in one year (actually, 365 days)
      // 365 days in a year
      // 24 hours in a day
      // 60 minutes in an hour
      // 60 seconds in a minute
      // 1000 milliseconds in a second
      now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);


function setCookie(name, value, expires, path, domain, secure) {
  var curCookie = name + "=" + escape(value) +
      ((expires) ? "; expires=" + expires.toGMTString() : "") +
      ((path) ? "; path=" + path : "") +
      ((domain) ? "; domain=" + domain : "") +
      ((secure) ? "; secure" : "");
  document.cookie = curCookie;
}

function getCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  } else
    begin += 2;
  var end = document.cookie.indexOf(";", begin);
  if (end == -1)
    end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}

function fixDate(date) {
  var base = new Date(0);
  var skew = base.getTime();
  if (skew > 0)
    date.setTime(date.getTime() - skew);
}

function addItem(Prod) {
      var quantity = getCookie(Prod);
      if (!quantity) {
             quantity = 1; // the value for the new cookie
      
      } else {
        // increment the counter
        quantity = parseInt(quantity) + 1;
      }
      // set the new cookie
      setCookie(Prod, quantity, now);

}
</SCRIPT>
     
</head>

<body>
<h3>Product 1</h3>
<p>Price - $150.00, Shipping - $10.95</p>
<a href='javascript:addItem("Product2")'>Put In Shopping Cart</a><br>
<br>

<h3>Product 2</h3>
<p> Price - $150.00, Shipping - $ 10.95</p>
<a href='javascript:addItem("Product2")'>Put In Shopping Cart</a> <br>
<br>

<h3>Product 3</h3>
<p>Price - $150.00, Shipping - $10.95</p>
<p><a href='javascript:addItem("Product3")'>Put In Shopping Cart</a>&nbsp;</p>
<p><a href="javascript:alert(document.cookie);">View Cookies</a></p>
</body>
</html>
0
 
LVL 5

Expert Comment

by:apparition
ID: 9832674
ooops made a mistake at the bottom HTML for product 1


<h3>Product 1</h3>
<p>Price - $150.00, Shipping - $10.95</p>
<a href='javascript:addItem("Product1")'>Put In Shopping Cart</a><br>
<br>

It was
<h3>Product 1</h3>
<p>Price - $150.00, Shipping - $10.95</p>
<a href='javascript:addItem("Product2")'>Put In Shopping Cart</a><br>
<br>


0
 

Author Comment

by:brianindium
ID: 9832714
You are a pimp and a scholar.

Thanks.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How can I repeat this modal box over and over again...? 2 19
replace link with jQuery 4 15
alert(innerHTML); 8 21
How to resize a div in html 3 16
E-commerce is quite a gambling world, and you should never entrust your business to a lucky chance. In order to outrun your competitors in a race to attract as many customers as possible, you need to have a well thought-out strategy under your belt.…
Learn about the eCommerce marketing trends for the year ahead.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question