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 Reply