This shows you the differences between two versions of the page.
tutorials:zencartmods:daily_ajax.html [2011/06/22 15:55] daigo |
tutorials:zencartmods:daily_ajax.html [2016/01/28 18:05] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ==== AJAXify your Daily stats ==== | ||
- | Last week, we created a [[daily_stats.html| daily stats]] page. If you're like us, then you compulsively click refresh on this page way too often! So lets AJAX-ify this page so that it updates automatically every time someone makes an order. | ||
- | |||
- | === Get jQuery === | ||
- | |||
- | We're going to use jQuery for this page. [[http://jquery.com/|jQuery]] isn't necessary for AJAX, you could just use plain javascript as well, but jQuery makes things much easier in general. | ||
- | |||
- | You can either [[http://docs.jquery.com/Downloading_jQuery#Download_jQuery|download jQuery]] and host it on your own server, or use a CDN like Google or Microsoft. We use Google's CDN. | ||
- | |||
- | |||
- | If you're hosting it on your own server, then add into the **<head>** section of daily_stats.php | ||
- | <code> | ||
- | <script src="https://you.path/to.jquery.js"></script> | ||
- | </code> | ||
- | |||
- | or if you're using a CDN (this one is Google) then use | ||
- | <code> | ||
- | <script type="text/javascript" src="https://www.google.com/jsapi?key=YOUR_API_KEY"></script> | ||
- | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> | ||
- | </code> | ||
- | |||
- | you have to replace YOUR_API_KEY with the API key you've obtained from Google. | ||
- | |||
- | === Server Side PHP === | ||
- | |||
- | At the top of **daily_stats.php**, add this code AFTER the **require('includes/application_top.php');** | ||
- | |||
- | <code> | ||
- | $action = $_POST['action']; | ||
- | |||
- | if ($action != '') | ||
- | { | ||
- | if ($action == 'latest') | ||
- | { | ||
- | $selectql = $db->Execute("select orders_id from orders ORDER BY date_purchased DESC LIMIT 1"); | ||
- | echo json_encode($selectql->fields); | ||
- | exit(); | ||
- | } | ||
- | elseif($action == 'stats') | ||
- | { | ||
- | $selectql = $db->Execute('SELECT | ||
- | COUNT(orders.orders_id) as num, | ||
- | SUM(orders_total.value) as val, | ||
- | SUM(orders_total.value)/COUNT(orders.orders_id) as avg | ||
- | FROM orders, orders_total | ||
- | WHERE orders_total.title="Sub-Total:" AND orders.orders_id = orders_total.orders_id AND DATEDIFF(CURDATE(), orders.date_purchased) < 1'); | ||
- | echo json_encode($selectql->fields); | ||
- | exit(); | ||
- | } | ||
- | } | ||
- | </code> | ||
- | |||
- | This will make daily_stats.php echo out 2 different JSON files, depending on post data. 'latest' will be used for polling (we can poll the server every 5, 10, 15 seconds or so) and 'stats' will be triggered by new information in the polling event. | ||
- | |||
- | === Client Side Javascript === | ||
- | |||
- | This part depends heavily on what you're daily_stats.php page looks like, but you should be able to take this structure and apply it to any sort of style. | ||
- | |||
- | Put a script tag inside the **head** section and make it look like this. | ||
- | |||
- | <code javascript> | ||
- | <script type="text/javascript"> | ||
- | DAILY_JAX = 'daily_stats.php'; | ||
- | last_order_id = 0; | ||
- | |||
- | $(document).ready(function() { | ||
- | check_for_new_order(); // This will call the function one time, once the page has loaded | ||
- | }); | ||
- | |||
- | function check_for_new_order() | ||
- | { | ||
- | $.post(DAILY_JAX, "action=latest", function(json_latest){ | ||
- | if(json_latest.orders_id != last_order_id){ | ||
- | last_order_id = json_latest.orders_id; | ||
- | $.post(DAILY_JAX, "action=stats", function(json_stats){ | ||
- | | ||
- | // | ||
- | // Add code to update the page here | ||
- | // | ||
- | | ||
- | }, 'json'); | ||
- | } | ||
- | setTimeout(function() { check_for_new_order(); }, 15000); // This will wait x amount of time before calling itself again (in this case 15 seconds) | ||
- | }, 'json'); | ||
- | } | ||
- | |||
- | </script> | ||
- | |||
- | </code> | ||
- | |||
- | As you can tell most of the meaty stuff here is the [[http://docs.jquery.com/Post|$.post()]] function from jQuery. |