In the first part, I will address several server-side isses and possible solutions I encounter while trying to use Ajax in Zencart

1. Which format should be used to return data?
2. How to Implement ajax on current zencart pages/functions without breaking the default behaviors?
3. How to allow fall-back to the traditional methods when the browser does not support javascript?
4. How to load and return only certain parts to reduce load time(which is one of the main points of using Ajax anyway)

Lets use the contact us page as an example, throughout the tutorial we will build a simple Ajax based contact form.

JSON and Ajax

After playing with multiple data formats, I finally chose JSON as THE one that I will be using mainly in my ajax related projects. I think it’s a simple and easy to understand format, so I use it. If you want to use xml or plain text or any other format, it’s up to you. Just keep in mind that you have to be consistent, your choice of data format will affect both your server-side and client-side code.

After deciding to use JSON, I then came up with the general structure my returned data should have

1. status: this will tell if the request made was a ‘success’, ‘error’, or do I need to do ‘redirection’ etc…
2. message: this will include ‘success’, ‘error’, ‘warning’ messages etc. The content of Zencart messageStack will be returned here
3. content: content will be an array containing multiple content ‘blocks’ such as ‘leftColum’, ‘rightColumn’ etc so that you can update multiple parts of the current page.
4. url and redirect_type will be used mainly for redirection purpose

Houston, we have contact

To make sure that we support “graceful fallback” when the browser does not support javascript, we first need to detect if the request made to the server is an Ajax request.

Currently I do this by checking the HTTP_X_REQUESTED_WITH header and optional $_REQUEST field

if(((!empty($_SERVER['HTTP_X_REQUESTED_WITH'])) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') || $_REQUEST['isajaxrequest'] == 1)

Gotta Catch ‘Em All

Now that we decide to use JSON, we have to make sure the content returned is in JSON format, no extra character can be returned, otherwise we will not be able to decode the returned data correctly.

I achieved this by turning output buffering on before Zen prints out anything, and then clearing the output buffer after Zen has printed out everything.

Everything falls into place

So far, this is what we have:

class Ajax{

private $status = false;

public function start(){
// set status
if(((!empty($_SERVER['HTTP_X_REQUESTED_WITH'])) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') || $_REQUEST['isajaxrequest'] == 1){
$this->status = true;
ob_start();
}
}

public function end(){

if($this->status){
ob_end_clean();

}

}

}

And now we have to edit zencart’s index.php and put $Ajax->start(); right after calling application_top and $Ajax->end(); right before calling application_bottom.

 *
Load application_top.php - see {@tutorial initsystem}

 *
Set main language directory based on $_SESSION['language']

 *
Load all *header_php.php files from includes/modules/pages/PAGE_NAME/

 *
Load html_header.php (this is a common template file)

 *
Load main_template_vars.php (this is a common template file)

 *
Load on_load scripts (page based and site wide)

 *
Load tpl_main_page.php (this is a common template file)

 *
Load application_bottom.php

 * 

 *
 * @package general
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: index.php 2942 2006-02-02 04:41:23Z drbyte $
 */
/**
 * Load common library stuff
 */
  require('includes/application_top.php');
  $Ajax->start();
  // The usual Zencart's index.php code goes here
  // I skipped it so you can focus on the 2 new method calls we added it the file ($Ajax->start();and $Ajax->end();)
?>

end();?>

(You will find a complete package to download at the end of this Ajax tutorial series)

Related posts:

• Zencart + Ajax made easy (part 3) As an update to the long delayed series Zencart Ajax...
• Zencart + Ajax made easy (part 2) This is the second part of the series “Zencart +...
• Zencart Ajax Checkout In our continuous effort to help shop owners convert more...

Tags: ajax, Zencart

Enjoy this Article ?     Follow Us 

This entry was posted on Sunday, December 14th, 2008 at 12:28 am and is filed under Zencart. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.