blog.Resource

Archive:

News-Feeds:


RSS 2.0
RSS 0.91
RDF
ATOM 0.3
July 27, 2009

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

Category: Ron Hall

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.


comments

comment #1
Gravatar: Rob Vonk Rob Vonk July 27, 2009 08:19
Never needed to create a subsite without Typo3 but i think it's a smart idea. Something to remember!

comment #2
Gravatar: Charles Coleman Charles Coleman July 27, 2009 19:02
I really appreciate your post. This has been something that we have been up against before.

I'm guessing the methods you describe here are most easily possible when using the old method of templating and not Templavoila correct???

comment #3
Gravatar: Ron Hall Ron Hall July 28, 2009 01:00
Actually, this site uses TemplaVoila for its pages including the include pages, but it could be done either way.

comment #4
Gravatar: Robert Robert August 9, 2009 11:10
Quite a clever hack. I had a similar requirement once where I shared a style sheet between an embedded Phorum subdomain and the main CMS-managed site. It's quite helpful to keep you sane once you figured out how to share common areas on both sites among one stylesheet.

comment #5
Gravatar: Patrick Patrick August 12, 2009 02:25
Hi Ron, I don't want to diminish your tip but I just find it funny because my very first TYPO3 site in 2003 had such ASPTYPO3 requirement.
We had about 3-4 different pages "produced by TYPO3" sent to a remote IIS server that used an include directive to wrap to logic of the ASP applications with menus and templates from TYPO3. In French I use to call it "enrobage" which translate into "coating". It was still better than using frames ! :)
Patrick

Sorry, comments are closed for this post.