Ideas Please

2 posts by 2 authors in: Forums > CMS Builder
Last Post: October 14, 2010   (RSS)

Re: [kcmedia] Ideas Please

By Chris - October 14, 2010

Hi Craig,

I'd imagine this would make sense as an email form.

Let's say you have a Menu Items section with fields such as:

Title (for the item's name), Content (for the item's description), and Price

You'd want to display a list page, and add a text field for each record for the user to enter a quantity. Then you'd need some JavaScript to subtotal the prices * quantities, and probably more JavaScript to add tax.

Here's a (relatively) simple example:

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php


// load viewer library
$libraryPath = 'cmsAdmin/lib/viewer_functions.php';
$dirsToCheck = array('C:/wamp/www/sb/CMS Builder/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

// load records
list($menu_itemsRecords, $menu_itemsMetaData) = getRecords(array(
'tableName' => 'menu_items',
));

?>
<!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>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var prices = <?php echo json_encode(array_combine(array_pluck($menu_itemsRecords, 'num'), array_pluck($menu_itemsRecords, 'price'))) ?>;
$(document).ready(function() {
$("input[name|=quantity]").change(function(event) {
console.log("hello world");
var subtotal = 0;
for (var num in prices) {
var price = prices[num];
var quantity = 0 + $("input[name=quantity-"+num+"]").val();
var lineTotal = price * quantity;
$("#line-total-"+num).html(lineTotal ? '$' + lineTotal.toFixed(2) : '');
subtotal += lineTotal;
}
$("#subtotal").html(subtotal.toFixed(2));
$("#tax" ).html((subtotal * 0.14).toFixed(2));
$("#total" ).html((subtotal * 1.14).toFixed(2));
});
});
</script>
</head>
<body>

<h1>Menu</h1>

<table>
<tr>
<th align="left">Item</th>
<th align="left">Price</th>
<th align="left">Quantity</th>
<th align="left">Total</th>
</tr>

<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<?php foreach ($menu_itemsRecords as $record): ?>
<tr>
<td>
<b><?php echo $record['title'] ?></b> - <i><?php echo $record['content'] ?></i>
</td>
<td valign="top">
$<?php echo $record['price'] ?>
</td>
<td valign="top">
<input name="quantity-<?php echo $record['num'] ?>" size="2" />
</td>
<td valign="top">
<span id="line-total-<?php echo $record['num'] ?>"></span>
</td>
</tr>
<?php endforeach ?>
<!-- /STEP2: Display Records -->

<tr>
<th align="left" colspan="3">Subtotal</th>
<th align="right"><span id="subtotal"></span></th>
</tr>
<tr>
<th align="left" colspan="3">Tax</th>
<th align="right"><span id="tax"></span></th>
</tr>
<tr>
<th align="left" colspan="3">Total</th>
<th align="right"><span id="total"></span></th>
</tr>
</table>

</body>
</html>

You'll want to do the same calculations again on the server side before sending off the email, since you shouldn't trust your web visitors not to submit other values.

I hope this helps get you started! Please let me know if you have any questions.
All the best,
Chris