Hungry for a System Mashup? Try a HTML Sandwich served by TYPO3.

An easy way to mashup another system with TYPO3

I recently launched a website for Fogo De Chão (www.fogodechao.com), a very nice steak restaurant with locations in both the U.S. and Brazil. Fusion Advertising provided the visual design and content while my company, Busy Noggin, Inc., handled the front-end coding and TYPO3 integration. Jeff Segars contributed an extension for customer comments and helped with server tweaking.

The site is graphically rich with with several interesting features including lightboxes and a scrolling JavaScript map of locations.

One of the project requirements was for the site to connect to a separate ASP site used to purchase gift cards. Additionally, the gift card site needed to be visually identical to the main site.

When on the main site (www.fogodechao.com) clicking on gift cards brings you to the ASP site (gc.fogodechao.com). Notice it is visually identical to the main site (see comparison). It is identical because much of its code is supplied by TYPO3.

Here is how it is done. TYPO3 is programmed to supply three pages of code that are used by the ASP site as server-side includes. None of these pages include any header data. This is the code they supply to the ASP site.

• Include #1: The style sheet links that are included in the head of the ASP pages.
• Include #2: The code for the design that falls after the opening body tag but before the main content of the page. This includes main menu and header image.
• Include #3: The code for the design that falls after the main content but before the ending body tag.

In effect this creates an HTML sandwich in which the TYPO3 supplied code from the main site surrounds the content on the ASP site. This means that when TYPO3 updates items such as menus and promotional items on the main site thee the changes will automatically be reflected on the second ASP site. Also, CSS and background image changes can be managed from the main web site.

Of course, care must be taken that the paths in the supplied code are full URL paths (including the domain of the main site) so that links and images do not break on the second site.

One of the includes contains this in its TypoScript template:

config {
disableAllHeaderCode = 1
absRefPrefix = www.fogodechao.com
}

This will produce a page without the head section or a body tag and will make all links full paths.

This is a very easy way to mashup two systems while keeping ongoing maintenance simple and presenting a unified experience to the front-end user. 

Ron Hall
Busy Noggin, Inc.