Web-Procreate.Com - Datafeed and WebMerge Section


Detail Templates

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 is written in each of the completed detail pages by WebMerge

Figure 1 - Examples of Detail Pages in the hierarchy
Fig. 4 - 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. If the detail template is set up to display one product per page, then WebMerge will generate one page for each product (record) in the data feed. When using WebMerge, selecting the detail template you designed for a particular data feed, is found on the Detail Pages tab in WebMerge.

Laying Out The Detail Template

WebMerge can generate a set of pages using a default template, however to be effective, a custom template should be designed and used.

A lot of time can be saved by utilizing a blank page from your web site. This page should have all of the formatting and customization needed to have the look and feel of your existing web site. For example, logos, navigation, and anything else that is particular to your web site is already designed (and written). All that is required to modify the template, is to insert the WebMerge Tags in the place needed to display the information.

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 data feed.

Once the fields are found in the first record that match the WM-Tags in the template, WebMerge writes (generates or builds) a new page. 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. The WM-Tags do not get written into any of the completed files, and therefore will not be displayed to the site visitor, or indexed by a search engine spider.

Fig. 2 - WebMerge Process Simplified

Fig. 5 - WebMerge process simplified.


Template Example with WM-Tags

The HTML code in the detail template might look like this including the WM-Tags:

The WM-Tags above can look confusing, but will become easier to understand after working with WebMerge a little.

What Happens When WebMerge Runs?

WebMerge will use the WM-Tag for product-ID and will 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 Fig. 6, below for example).

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.

When looking back to the process for a minute, one can see where the information comes from in the data feed file:

Example Feed Grab

Fig. 6 - Data feed file information that is read by WebMerge as it appears in MS Excel. Note: The top row contains the Field name(s), and the second row is the first of many Records.

NOTE: This above image is a record number one with Field names highlighted in yellow. 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!

Acid Blaster Cleaner

Thank you for visiting our site!


Take a close look at the content in the finished page above, and compare it to the HTML template code. You can see where WebMerge inserted information from the data feed file into the document. 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

Designers are not limited to placing WM-Tags in the body of the web page; you can also use them in the header as well. Basically anywhere it makes sense in the document. From our example, the Title would get the WM-Tag [WM-Field: NAME].

Some data feeds 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.

Revision 4 (2014)

TIP: Please see the required file matrix for files and categories required for multi-Tier design...


NEXT SECTION - Index Templates