Detail templates are used by WebMerge to generate detail pages, and feature information on the individual products in your data feed. More specifically, the information in the data feed gets placed in the completed detail pages by WebMerge.
Figure 1- Examples of Detail Pages in the hierarchy
Detail Template Design
The design of the detail pages produced by WebMerge is governed by how you design the Detail Template. You can have your Detail Template set up to display one product per page, then WebMerge will generate one page for each product (record) in the data feed. Selecting the Detail Template you designed for a particular data feed, can be found on the “Detail Pages” tab in WebMerge.
Laying Out Your Detail Template
WebMerge can generate a set of pages using a default template, however to be effective at all, a custom template should be designed and used.
A lot of time can be saved by utilizing a blank page that already has all of the formatting for the web site where you are going to publish the data feed driven web pages. For example, your logo, navigation, and anything else that is particular to your web site will have already been completed. All you have to do is insert the WebMerge Tags in the place you need the information displayed.
WM-Tags
WebMerge Tags (WM-Tags) used with standard HTML or PHP are used in the Detail and Index Templates in order for WebMerge to put information into the pages it builds.
WM-Tags
look like this:
[WM-Field: field_name (option)]
When WebMerge builds pages, it reads the template you have created, and looks specifically for whatever WM-Tags that have been inserted into the HTML code. Once WebMerge reads a tag, it then looks into the data feed file to find a match in the first record of the feed. Once the fields are found in the first record that match the WM-Tags in the template, WebMerge writes (generate or builds) a new page for you. This process is repeated for every record in the feed, and a new file (page) gets written (generated or built) for each successive record. Another way to think about the WM-Tags, is that they are similar to placeholders (for data), with the information in the data feed file as variables.
Fig. 2 - WebMerge Process Simplified
Template Example with WM-Tags
The code in the detail template might look like this including the WM-Tags:
<html>
<body>
<h1>[WM-Field: Product-ID]</h1>
<p>This is another trusted product from XYZ Merchant. They have a great selection of cleaning products, including the [WM-Field: Product-ID] highlighted on this page.</p>
<p>Here is a basic description of the [WM-Field: NAME]:</p>
<p>[WM-Field: DESCRIPTION]</p>
<p>Your Cost: $[WM-Field: SALE_PRICE]</p>
<p><a href="[WM-Field: BUYURL]">Click Here</a> to purchase the [WM-Field: Product-ID] now !</p>
<a href="[WM-Field: BUY_URL]"><img src="[WM-Field: IMAGEURL]" alt="[WM-Field: NAME]" border="0"></a>
<p>Thank you for visiting our site!</p>
</body>
</html>
If you are still wondering what all that stuff was in the html code, don’t fret. Lets take a closer look at what will happen when WebMerge runs. For example, the WM-Tag for product-ID will simply insert the Product-ID for one of the records in the data feed file. In this case “FRS-300” The same goes for all of the WM-Tags in the above code, they all correspond to data in the data feed file (see below).
The last line with WM-Tags in the above code does a little more than a simple replacement. This will insert an image using the “IMAGEURL” from a record in the data feed file, the “BUY_URL” will make the image something the site visitor can click on to purchase. Lastly the “NAME” tag will insert the product name into an html alt tag on the image, this means that when a site visitor hovers their mouse over the image, the name of that particular product will appear.
If we go back to the process for a minute, we can see where the information comes from in the data feed file:
Product-ID |
DESCRIPTION |
BUY_URL |
SALE PRICE |
IMAGEURL |
NAME |
FRS-300 |
This cleaner gets everything clean as a whistle… |
http://www.xyz-merchant.com/?cgi=4-3556/id-blah-blah |
3.99 |
http://xyz-merchant.com/images/frs-300_sm_image.jpg |
Acid Blaster Cleaner |
 |
|
|
|
|
|
This just happens to be record number one with Field Names highlighted. Some of the fields have been abbreviated. Again, there are many records in the feed, WebMerge simply repeats this process over and over, moving to the next record when it is finished building a page with record one.
The finished detail page generated by this record would look like this in the browser:
FRS-300 This is another trusted product from XYZ Merchant. They have a great selection of cleaning products, including the FRS-300 highlighted on this page. Here is a basic description of the Acid Blaster Cleaner: This Cleaner gets everything clean as a whistle, so clean you’ll want to alert the neighbors. Scrubbing foam means the Acid Blaster Cleaner is eating everything away, leaving only a slight residue that you can wipe or feed to your neighbors cat. Your Cost: $ 3.99 Click here to purchase the FRS-300 now!
Thank you for visiting our site! |
Take a close look at the finished page above, and compare it to the template code. You can see where WebMerge inserted information from the data feed file into the document. The nifty part here, is that WebMerge will do this for every record in the data feed file, and build a page for each product in your feed!
The real trick, is to simply add this type of code to your existing site design. This way you’ll have whatever normally appears on your pages, including your logo, and navigation with (as an example) links to your privacy and about pages, and a link to the main page for the xyz merchant. It's all customizable by you - the web designer.
WM-Tags in the Header
You are not limited to placing WM-Tags in the body of the page, you can also use them in the header as well. Basically anywhere it makes sense in the document you like. From our example, the Title would get the WM-Tag [WM-Field: NAME].
If you are lucky, your data feed will have a keyword field name – and records that actually contain keywords. If so, you can use a WM-Tag to populate the keywords meta tag. There are ways to build keywords from names, descriptions, and categories in your feed if you don’t have one. This will be covered at a later date.
WebMerge puts it all together for you.
TIP: Please see the required file matrix for files and categories required for multi-Tier design...
NEXT SECTION - Index Template