5 Replies - 14089 Views - Last Post: 12 December 2014 - 09:16 AM

#1 mcbodee  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 23-January 04

Creating A Shopping Cart For My Website

Posted 23 January 2004 - 07:54 AM

I am trying to write the basic code to make a shopping cart. But at the moment i am stuck, not knowing that much about programming (complete novice) I need to make a loop (possibly a for loop) so that the cookie does not keep getting overwritten every time something is selected. As only one item can go in the basket at the moment, and I would like to be able to multiple items. Please, if you have any suggestions, post them. The code so far is below.

<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Shopping Cart</title>
<script>
function getCookie(NameOfCookie) {
// First we check to see if there is a cookie stored.
// Otherwise the length of document.cookie would be zero.
if (document.cookie.length > 0) {
// Second we check to see if the cookie's name is stored in the
// "document.cookie" object for the page.
// Since more than one cookie can be set on a
// single page it is possible that our cookie
// is not present, even though the "document.cookie" object
// is not just an empty text.
// If our cookie name is not present the value -1 is stored
// in the variable called "begin".
begin = document.cookie.indexOf(NameOfCookie+"="); 
if (begin != -1) { // Note: != means "is not equal to"
// Our cookie was set. 
// The value stored in the cookie is returned from the function.
begin += NameOfCookie.length+1; 
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end)); } 
}
return null; // Our cookie was not set. 
// The value "null" is returned from the function.
}
function setCookie(NameOfCookie, value, expiredays) {
// Three variables are used to set the new cookie. 
// The name of the cookie, the value to be stored,
// and finally the number of days until the cookie expires.
// The first lines in the function convert 
// the number of days to a valid date.
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
// The next line stores the cookie, simply by assigning 
// the values to the "document.cookie" object.
// Note the date is converted to Greenwich Mean time using
// the "toGMTstring()" function.
document.cookie = NameOfCookie + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}
function delCookie (NameOfCookie) {
// The function simply checks to see if the cookie is set.
// If so, the expiration date is set to Jan. 1st 1970.
if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" +"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
</script>
<meta name="Microsoft Theme" content="nature 011">
</head>
<body>
<p align="center"> 
</p>
<p align="center"><font size="7">Shopping Cart</font></p>
<script>
var basketcontents = getCookie('basket'); // get the cookie
basketarray = basketcontents.split(':'); // separate code, desc, price, qty
// do something to basketcontents
// ...
alert(getCookie('basket'));
</script>
<script type="text/javascript">
document.write(basketarray[0]); // display code
</script>
</body>
<script language="Javascript">
<!--
window.open = SymRealWinOpen;
//-->
</script>
<p align="center">
</p>
</P>
<center>
</font>
</font>
</font></font><table border=5 width="430">
<form action="mailto:..." method="post">
<tr>
<td width="118" align="center"><b>Product ID</b></td>
<td width="212" align="center"><b>Description</b></td>
<td width="78" align="center"><b>Price</b></td>
<td width="78" align="center"><b>Quantity</b></td>
<tr>
<td align="center"><script type="text/javascript">document.write( '<input type="text" name="prod" value="' + basketarray[0] + '">')</script> </td>
<td align="center"><script type="text/javascript">document.write( '<input type="text" name="desc" value="' + basketarray[1] + '">')</script> </td>
<td align="center"><script type="text/javascript">document.write( '<input type="text" name="price" value="' + basketarray[2] + '">')</script> </td>
<td align="center"><script type="text/javascript">document.write( '<input type="text" name="quant" value="' + basketarray[3] + '">')</script> </td> 
</tr>
</table>
<p align="center">
<b>Click here to email your order to <input type="submit" value="ButchBoy.co.uk"></b>
</p>
</form>
</P>
</body>
</html>

This post has been edited by laytonsdad: 12 December 2014 - 05:19 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Creating A Shopping Cart For My Website

#2 cyberscribe  Icon User is offline

  • humble.genius
  • member icon

Reputation: 10
  • View blog
  • Posts: 1,062
  • Joined: 05-May 02

Re: Creating A Shopping Cart For My Website

Posted 28 January 2004 - 11:26 PM

My suggestion may not be the one you are looking for, but it is none the less important to state: I recommend using a server-side approach to both generating and reading your cookies. PHP, for example, has excellent handling of cookie generation and can read cookie variables into variable names that make sense automagically (if you have post_vars turned on). Using a client-side approach like Javascript just doesn't make as much sense to me in the long run given you are largely reinventing the wheel here.

However, whatever approach you take if you want to store multiple items in a single variable you need an array. You can explicitly push variables into the array and store them as a cookie, for example:

setCookie(array_variable_name[],'value');
setCookie(array_variable_name[],'value2');



such that:

array_variable_name[0] == 'value'; // true statement
array_variable_name[1] == 'value2; // true statement



Cheers,
RP
Was This Post Helpful? 0
  • +
  • -

#3 richowe  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 64
  • Joined: 15-May 04

Re: Creating A Shopping Cart For My Website

Posted 26 May 2004 - 01:37 PM

You can see an example of a complete client-side shopping cart using frames and javascript at:

http://www.burgardstudio.com

No cookies used as all items are saved in arrays.

Yes you may say that the arrays are destroyed by leaving the page, but if you leave without buying, does anyone really care to save that info?
Was This Post Helpful? 0
  • +
  • -

#4 cyberscribe  Icon User is offline

  • humble.genius
  • member icon

Reputation: 10
  • View blog
  • Posts: 1,062
  • Joined: 05-May 02

Re: Creating A Shopping Cart For My Website

Posted 26 May 2004 - 10:15 PM

richowe, on May 26 2004, 01:37 PM, said:

Yes you may say that the arrays are destroyed by leaving the page, but if you leave without buying, does anyone really care to save that info?

That info? No. But a wealth of other info related to improving customer experience? Yes. Hence cookies.
Was This Post Helpful? 0
  • +
  • -

#5 softxml  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 12-December 14

Re: Creating A Shopping Cart For My Website

Posted 12 December 2014 - 08:52 AM

I would suggest you to work with array of objects and then output it to the DOM in order to accomplish your task.

You can see working example of following code at <link removed>

You can try following approach:

//create array that will hold all ordered products
    var shoppingCart = [];

    //this function manipulates DOM and displays content of our shopping cart
    function displayShoppingCart(){
        var orderedProductsTblBody=document.getElementById("orderedProductsTblBody");
        //ensure we delete all previously added rows from ordered products table
        while(orderedProductsTblBody.rows.length>0) {
            orderedProductsTblBody.deleteRow(0);
        }

        //variable to hold total price of shopping cart
        var cart_total_price=0;
        //iterate over array of objects
        for(var product in shoppingCart){
            //add new row      
            var row=orderedProductsTblBody.insertRow();
            //create three cells for product properties 
            var cellName = row.insertCell(0);
            var cellDescription = row.insertCell(1);
            var cellPrice = row.insertCell(2);
            cellPrice.align="right";
            //fill cells with values from current product object of our array
            cellName.innerHTML = shoppingCart[product].Name;
            cellDescription.innerHTML = shoppingCart[product].Description;
            cellPrice.innerHTML = shoppingCart[product].Price;
            cart_total_price+=shoppingCart[product].Price;
        }
        //fill total cost of our shopping cart 
        document.getElementById("cart_total").innerHTML=cart_total_price;
    }


    function AddtoCart(name,description,price){
       //Below we create Javascript Object that will hold three properties you have mentioned:    Name,Description and Price
       var singleProduct = {};
       //Fill the product object with data
       singleProduct.Name=name;
       singleProduct.Description=description;
       singleProduct.Price=price;
       //Add newly created product to our shopping cart 
       shoppingCart.push(singleProduct);
       //call display function to show on screen
       displayShoppingCart();

    }  


    //Add some products to our shopping cart via code or you can create a button with onclick event
    //AddtoCart("Table","Big red table",50);
    //AddtoCart("Door","Big yellow door",150);
    //AddtoCart("Car","Ferrari S23",150000);



<table cellpadding="4" cellspacing="4" border="1">
    <tr>
        <td valign="top">
            <table cellpadding="4" cellspacing="4" border="0">
                <thead>
                    <tr>
                        <td colspan="2">
                            Products for sale
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            Table
                        </td>
                        <td>
                            <input type="button" value="Add to cart" onclick="AddtoCart('Table','Big red table',50)"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Door
                        </td>
                        <td>
                            <input type="button" value="Add to cart" onclick="AddtoCart('Door','Yellow Door',150)"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Car
                        </td>
                        <td>
                            <input type="button" value="Add to cart" onclick="AddtoCart('Ferrari','Ferrari S234',150000)"/>
                        </td>
                    </tr>
                </tbody>

            </table>
        </td>
        <td valign="top">
            <table cellpadding="4" cellspacing="4" border="1" id="orderedProductsTbl">
                <thead>
                    <tr>
                        <td>
                            Name
                        </td>
                        <td>
                            Description
                        </td>
                        <td>
                            Price
                        </td>
                    </tr>
                </thead>
                <tbody id="orderedProductsTblBody">

                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" align="right" id="cart_total">

                        </td>
                    </tr>
                </tfoot>
            </table>
        </td>
    </tr>
</table>


Have a look at following free client-side shopping cart:

SoftEcart(js) is a Responsive, Handlebars & JSON based, E-Commerce shopping cart written in Javascript with built-in PayPal integration.

Documentation

<link removed>

Hope you will find it useful.
Was This Post Helpful? 0
  • +
  • -

#6 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1199
  • View blog
  • Posts: 7,308
  • Joined: 07-September 06

Re: Creating A Shopping Cart For My Website

Posted 12 December 2014 - 09:16 AM

Closing. Please don't necro a thread, it has literally been idle for 10 years.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1