Building a shopping cart with LiveCode

A shopping cart is an essential part of any e-commerce website. It lets you accumulate a list of items shoppers wants to purchase and calculate totals, weights, shipping costs etc. This example will show how to build a simple shopping cart that you can use to power an e-commerce solution.

This example consists of 2 files:

  • products.lc – sample products available for purchase
  • cart.lc – the shopping cart

The products.lc files passes the product id, and price to cart.lc, where it is added to the shopping the cart. It lists 3 products, apple, oranges and kiwi fruit

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Products</title>
</head>
<body>
<h2>Products</h2>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td>Product Description</td>
 <td>Price</td>
 &nbsp;
 </tr>
 <tr>
 <td>Apple</td>
 <td>R1.00</td>
 <td><a href="cart.lc?product=Apple&price=1.00&action=add">add to cart</a></td>
 </tr>
 <tr>
 <td>Orange</td>
 <td>R1.50</td>
 <td><a href="cart.lc?product=Orange&price=1.50&action=add">add to cart</a></td>
 </tr>
 <tr>
 <td>Kiwi Fruit</td>
 <td>R5.00</td>
 <td><a href="cart.lc?product=Kiwi Fruit&price=5.00&action=add">add to cart</a></td>
 </tr>
</table>
</body>
</html>

The carts.lc file stores the contents of the shopping cart. It lets you add and update the contents of the shopping cart and stores the contents of the cart into a session variable, although you could quiet easily modify it to use cookies.

<?lc
start session
put $_SESSION["cartSession"] into cartArray
 if $_GET["action"] = "add" then
 put $_GET["product"] into product
 put $_GET["price"] into productPrice 
 put "1" into productQty
 if cartArray[product] is not empty then
 -- update product (add 1 to qty)
 put cartArray[product][qty] + 1 into cartArray[product][qty]
 put productPrice into cartArray[product][price]
 else
 -- add product
 put productPrice into cartArray[product][price]
 put productQty into cartArray[product][qty]
 end if
 end if
if $_POST["action"] = "update" then
 get the keys of cartArray
 split it by return
 repeat for each element mproduct in it
 put "qty" & mproduct into productID -- get the quantity of the product
 if $_POST[productID] = 0 then
 delete variable cartArray[mproduct]
 else
 put $_POST[productID] into cartArray[mproduct][qty]
 end if
 end repeat
end if
put cartArray into $_SESSION["cartSession"]
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<h2>Shopping Cart</h2>

<?lc 
get the keys of cartArray
if the keys of cartArray is not empty then ?>
<form id="form1" name="form1" method="post" action="cart.lc">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td>Product Description</td>
 <td>Price</td>
 <td>Quantity</td>
 <td>Total</td>
 </tr>
<?lc
put 0 into total
get the keys of cartArray
split it by return
repeat for each element mproduct in it
?>
 <tr>
 <td><?lc put mproduct ?></td>
 <td>R<?lc set the numberFormat to "#.00"; put cartArray[mproduct][price] ?></td>
 <td>
 <input name="qty<?lc put mproduct ?>" type="text" id="qty<?lc put mproduct ?>" size="3" value="<?lc set the numberFormat to "#"; put cartArray[mproduct][qty]; set the numberFormat to "#.00" ?>" />
 </td>
 <td>$<?lc put cartArray[mproduct][price] * cartArray[mproduct][qty]; put (cartArray[mproduct][qty]*cartArray[mproduct][price]) + total into total ?></td>
 </tr>
<?lc end repeat ?>
 <tr>
 <td> </td>
 <td> </td>
 <td> </td>
 <td><strong>$<?lc put total ?></strong></td>
 </tr>
</table>
<p>
 <input type="submit" name="button" id="button" value="Update Cart" /> 
 <input name="action" type="hidden" id="action" value="update" />
 | <a href="#">Proceed to checkout </a></p>
</form>
<?lc else ?>
<p>Your Shopping cart is empty</p>
<?lc end if ?>
</body>
</html>
<?lc 
stop session
?>

And there we have it, a functioning shopping cart.

Download Zip

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search