Web-Procreate.Com - Datafeed and WebMerge Section

Three Tiered Affiliate Web Site Design

Tiers, Categories, and Detail Pages

This design is nearly identical to the two-tier design.  The three-tier design utilizes the following:

1.    A main category page for visitors to start "drilling down" into categories and products (Tier 1).
2.    A set of category index pages for category navigation (Tier 2).
3.    Detail pages for individual products (Tier 3).

Please see fig. 24 below to get a better understanding of the hierarchy to be built.

Fig. 1 - Three-Tier Hierarchy
Fig. 24 - Three-Tier Hierarchy

How does this work again?

Because WebMerge completes a maximum of two-tiers at a time, it is necessary to work on tier-one first. Once tier-one is completed, the last two tiers will be completed (see figure 25).

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

Two Steps - Two Settings Files

Two settings files are required to complete a three-tier design. Each settings file is used to build one or two tiers. Building more than two-tiers requires more settings files. Start out with WebMerge building the main category page, with the first settings file. After that is complete, WebMerge can build all of the category index pages, and the detail pages with the second settings file.

At least two category field names need to exist in the data feed file in order to build a site with more than two-tiers.

Fig. 2 - Components for the Two-Step Process
Fig. 25 - Components for the two-step process (three-tier affiliate web design.

First Step, Build Tier One

Getting WebMerge to build the Main Category Page

In the first step in the process, the links populating the Main Category Page are links to category index pages, not detail pages. The category index pages, and the detail pages are completed in the second part of the process (See figure 26 above). Please note, detail pages are not built in step one of the process (referred to as NOT BUILT in fig. 26 above).

The Main Category Page can be thought of as the main page for the merchant. In our example, we are calling it "Betty Mills." Once WebMerge has finished running the first settings file, the result is a Main Category Page populated with links to Category Index Pages like "Cleaning," "Brushes," and "Storage." The Main Category Page is based on information in the index template specified on the index pages tab in WebMerge, and saved with the first settings file.

TIP:  WebMerge can be set it to build either the index pages, or the detail pages, or both. This is advantageous when experimenting, building multi-tier web sites, or in cases where index pages do not require updating. Go to the appropriate tab (detail or index), and un-check the box Create Index/Detail Pages. Those pages will not be built.

The Detail Pages Tab in WebMerge is not used in step-one of a multi-tiered site design. This is labeled as "NOT BUILT" in Figure 26 above. Remember, in step-one only the Main Category page actually needs to be built.

WebMerge Settings:

The next step, requires that you have set up the data feed file information on the "Sources" tab in WebMerge.

Switch to the Index Pages tab , and identify where WebMerge can find your Index Template file, and select the directory (folder) where WebMerge will write the completed Main Category Index file.

Under the Generated File Names section, click on the Make Only One Index Page, then indicate the name of the file to use for this page. The default index.html can be used if it will be the main landing page for the site. Alternatively, something creative like "BestMerchant.html" can be used if it is a link off of one of the other pages on your site. There are many schools of thought concerning the naming of pages for Search Engine purposes.

Fig. 3 - "Make only one Index page" selected
Fig. 26 - "Make only one Index page" selected


Only one template (an Index Template) is required for the first step in the process. This is because the next step is to build the Main Category Page only. WebMerge needs to populate the Main Category Page with links to the category index pages, for example "Cleaners" and "Brushes." The Index Template needed will have the proper WM-Tags so that WebMerge will populate the page with these types of links.

IMPORTANT:  This tutorial assumes that you are using a template that already has your standard site navigation embedded in it, along with images common to your site, such as logos and any text or banner links.

The output of this type of template is to include and format the WM-Tags needed to get WebMerge to populate the page with links. Save the file with a logical name that will differentiate it from other template files, for example: "index_template_01.html"


The WM-Tags best suited for step-one would be the [WM-IndexLabel:] tag, and the [WM-Record] tag. These two tags are nested, and should appear this way in your code:

     [WM-IndexLabel: Main_Category]

              (Your HTML linking code - see below)

A Further Explanation about the HTML Code:

HTML between the WM-Record tags will be replicated once for each record in the data feed file. Conversely, the WM-IndexLabel tag tells WebMerge to write a link only when the value of the field (in the data feed file) listed in that tag changes. For example, it will create a link for "Cleaners" only once, and will not create another link until the value in the Main_Category changes. In this example, when the value changes to "Brushes," WebMerge will write a new link onto the page. When WebMerge has completed going through the data feed file records, and finds the next Main_Category - Field name (for example "Storage"), it will write the third link onto the page, and so on. This action will continue until WebMerge has completed running through the entire data feed file, and written links onto the page for every different Main_Category it reads in the data feed file. These tags are inserted once into the code of the template.

Your HTML linking code:

The code to use can be any form of link code, effectively containing an href= tag. This is a code format that works well, and includes the actual link, the text to display, and a title. In this example, the category's Field name is Main_Category.

Here is an example of the code:
<p><ahref="http://www.yoursite.net/betty_mills/[WM-Field: Main_Category nolink].htm" title="[WM-Field:">[WM-Field: Main_Category nolink]</a></p>

If the template were viewed in a browser, the link would look like this:
[WM-Field: Main_Category nolink]

If we look at the code as it was written into the final document, it will look like this. Open the page source code in your favorite HTML editor, and look at the link:
<p><a href="http://www.yoursite.net/betty_mills/Cleaners.htm" title="Cleaners">Cleaners</a></p>

After WebMerge has written the file including all of the Main_Category links, the link (from the first record) would look like this displayed in a web browser. If a visitor Hovers their mouse over the link, they will see the title:

WebMerge has inserted all of the information to complete the links, so that when a visitor clicks on a link on the Main Category Page, they will be directed to the correct page (next step in the hierarchy). There will likely be many links generated on that page, based on the number of different Main_Category, Field names present in the data feed file.

Settings File for step-two:

Check to make sure the Main Category Index page has been completed properly. If correct, save the first settings file. Use a logical name like "Zapos_first," or "za001." This is so it can be easily identified as the first settings file. Once this is completed, it can be added to the Favorites list in WebMerge. WebMerge will automatically add the proper file name extension.

Next, WebMerge must create the Category index pages, and detail pages. Name and save the second settings file now. Logical names (that match the first settings file name) might be "Zapos_second", or "za002."


Revision 4 (2014)

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

NEXT PAGE - "Step Two"

NEXT SECTION - "Building a Four-Tier Web Site"