Combining AJAX with Zen-Cart™

Articles

This has been quite a hot topic in Zen-Cart™ community lately. As more and more Zen-Cart™ developers are getting more savvy with Zen-Cart™ structure, they (we) began to find a way to add AJAX techniques in their module.

If you are a Zen-Cart™ developer or a PHP / Javascript developer new to Zen-Cart™ and are looking to implement AJAX techniques in Zen-Cart™ then this article is for you, provided you understand how to use AJAX techniques in general.

This article is not about what is AJAX, when to use and not to use AJAX, how to code AJAX techniques or similar articles. There are already thousands of similar articles out there, just ask Mr. Google for it.

AJAX Image Swapper was my first module implementing AJAX on Zen-Cart™. This module is basically letting its users to load up several image sets upon switching an attribute, without page refresh. This module is available on this page , you can download it to learn its structure.

In this article, I will explain the tricks I used (and am still using) to add AJAX request - response capability on my modules. This technique is very simple and is able to be performed on any Zen-Cart™ sites.

1. Client Side

There is nothing really special here. I use Javascript to send a request to the server and catch its response to manipulate the page and that was it.

Conforming with Zen-Cart™ file architecture, the Javascript files are named jscript_[name].js and put on includes/modules/pages/ folder if I want it to be loaded on a certain page, or includes/templates/YOUR_TEMPLATE/jscript/ folder if I want it to be loaded globally.

2. Server Side

This is where I do the trick. For the server side, I created a file inside AJAX_servers which I put inside root folder. To standarise it, I named all my AJAX servers with [module name]_server.php

The beginning of all the server files would contain this chunk of code:

if (isset($_GET['action'])) {
chdir('../');
include('includes/application_top.php');
header('Content-Type: text/xml');

First it checks whether there is a request, if it found one, then what it does are:

1. Change back the directory to root folder.
2. Including the application_top.php file. By doing this this server file should now have access to all Zen-Cart standard functions, classes, language libraries etc.
3. Then it changes the content type to text/xml. If you put this line before you include the application_top.php file, you would end up with having the change omitted.

That is basically it. Didn't I say it was simple?