Solved

Setting Up Cookies For Shopping Cart

Posted on 2003-11-27
3
422 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
Comment Utility
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
Comment Utility
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
Comment Utility
You are a pimp and a scholar.

Thanks.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Often people are aiming at development of perfect Magento websites. Though, it is easier said than done. You know what’s much easier? To ruin everything. It can be done in seconds. Many of us experimented with design, tried to change some values dir…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

744 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now