Strawberry Tuesday

The following is probably an over engineered solution, but a solution nonetheless.

The problem was as follows:

Integrate coppermine photo gallery and an os commerce shop in such a way that products from os commerce can be displayed in the gallery (against a particular picture) and images in the gallery could be displayed against the appropriate products.

In my case the context was a craft web site. So the images in the gallery are projects that people have made with materials that are available in the store. I'm sure that you can see how having an example of the finished product in the shop can help prospective buyers imagine the possibilites for their own projects when browsing through the shop.

I looked at all the contributions relating to coppermine and os commerce, and I needed to do some digging in order to find them.

None of these really seemed to fit the bill, but I did find a contribution for os commerce that provided an XML feed and an equivalent for Coppermine.

The solution was to implement the integration using AJAX techiques. A handler was developed in PHP. This handler receives methods from the Javascript calls, determines the appropriate course of action based on the methods, gets the XML from the appropriate contribution, uses XSLT to translate the XML into HTML, and finally returns the target location and the HTML to the calling page.

It was necessary to modify the osc and the coppermine XML feed contributions so that the output could be filtered, a couple of additional methods were added.

So from the calling page you need to identify the location which will be overwritten by the returning data. In coppermine some DIV's were added with an ID="nameofsection". In OS Commerce I created another infobox, which has a ID attribute attached to a TD tag, rather than use a DIV.

In coppermine I created links to be clicked to activate the AJAX calls. I used the keywords as the search criteria for the XML, so these keywords are passed to the AJAX hander along with the method name (to switch between searching for different things in the XML), a result limit - which isn't fully implemented yet - and finally a XSLT stylesheet for the translation of the XML.

In OS Commerce I wanted the images to display "onload" of the page. Since the body tag seemed to be encoded in the product_info page I had to undo that and manually code it so that it called the AJAX Handler.

The solution has the following advangtages:

1. minimal code changes to each of the products
2. flexible and dynamic integration, without putting both the products in the same database.
3. useful introduction into AJAX

You can find links to the the resources used and the live examples here:
http://del.icio.us/waxingdigital/stajax