Back to all How-tos

Creating a multi-page Web template

Snippets are useful for a lot of things, but in this How-To we’ll be seeing how they can be used to simplify service multiple web pages with the same design and different contents. This assumes that your contents is in various snippets, either internal to the template (in the Snippets folder) or external ones on local disk.

The magic part is the dymamic contents, done using snippets in an <article> element. We’ll choose the snippet to put in it using a short script.

Step 1: Creating the design

The first important part is of course the design – the parts that go around the contents. A web page generally contains a header, a menu, a footer, and the main contents area. But, obviously, the possibilities for design are pretty much unlimited.

When you drag an existing snippet on your page and insert it as a Shared Content, it will simply create the article element pointing to the script source file. Whenever output is generated (in any context), Connect replaces the article tag with the contents of the snippet.

The source code when adding the snippet looks like this:

<article source="snippets/my_snippet.html"></article>

In a connect Web template, you can try to create a snippet named ‘my_snippet.html’ (containing any HTML code) and insert the above code (in the Source tab). The result will appear (once the snippet is saved) by clicking on the Live tab.

Step 2: Identifying the element

In order for a script to be able to interact with the article element, it must be identified. Generally, a simple ID should suffice:

<article id="body_contents" source="snippets/my_snippet.html"></article>

You can add the ID from the Attributes Pane or directly in the source.

Step 3: Creating the script

The script that makes the magic work is a single line, so it’s really straightforward. Create a new Script (not a text script or otherwise) where the selector targets the article element, in this case simple #body_contents

The script below calls a dynamic snippet that’s based on a language tag. It assumes there are snippets named “contents-fr.html”, “contents-en.html”, etc and a record field called “language” with the value being “fr”, “en”, etc.

results.loadhtml("snippets/contents-" + record.fields.language + ".html");

Easy enough, right? I love simple stuff. But what about external snippets somewhere on the drive? That’s just as simple, you just need the full path to the file on the drive!

results.loadhtml("file:///d:/projectfiles/campain01/snippets/contents-" + record.fields.language + ".html");

Aaaand bingo, you’re done! Personally, I love to do this for web templates where the snippet is called using a variable coming from the Workflow module.

Leave a Reply

Your email address will not be published. Required fields are marked *