Web-Procreate.Com - Datafeed and WebMerge Section


Three Tiered Affiliate Web Site Design

(Continued from Previous)

STEP TWO

Index Template

An index template is required to build the Category Index Pages (Tier-Two in fig. 1 - previous page).  This should be set up with WM-Tags, so that we end up with links to individual detail pages.  It will be quite easy to simply modify the Index Template used in step one, and save it with a new name.

What to modify?

The only items that need changing from the first Index Template are the WM-Tag, and any Meta Tags used in the header.  More specifically, the "Index Label" tags are no longer needed in building links to detail pages (see below).

Lastly, changing the file name to something logical like "index_template_02.html" (remember, we used "index_template_01.html" in step one).

WM-Tags:


Only one WM-Tag is required for this template, here is an example:

[WM-Record]

              (Your HTML linking code - see below)

[/WM-Record]


HTML linking code:

<p><a href="http://www.yoursite.net/betty_mills/[WM-Field: ProductID nolink].htm" title="[WM-Field: ProductID nolink] ">[WM-Field: ProductID nolink]</a></p>


And here's the full code with the WM-Tags:

[WM-Record]

    <p><a href="http://www.yoursite.net/betty_mills/[WM-Field: ProductID nolink].htm" title="[WM-Field: ProductID nolink]">[WM-Field: ProductID nolink]</a></p>

[/WM-Record]


Notice the only real change that was made was to the Field Name used in the WM-Tags.  This time we're using "ProductID" (in step one, we used "Main_Category").  We only need to place this once in the code for the Index Template.

After saving the Index Template, move on to the Detail Template.

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


Detail Template

As with the Index Template, start out with a Detail Template that already has your standard site navigation embedded in it, along with images you choose, like logos and any text or banner links. 

TIP: Because you are making many detail pages, it may be wise to choose a design that will result in a smaller file size.  10,000 detail pages, with a size of 20k each results in a disk storage requirement of 200MB !  Getting the file size down without compromising the design of your web page is very important.

WM-Tags:

They key to the Detail Template is how you arrange the WM-Tags to present the information from the data feed.  Some of the field names that you may want to include in the Detail Template are:

Some of the WM-Tags need to be placed in the body of the document, while others need to be placed between the <head></head> tags.

For example, if your data feed has a keywords field name (and actual records for that field name), then a WM-Tag can be placed in the appropriate Meta tag, for example:

<META name="keywords" content="[WM-Field: keywords]">

The product name can be placed between the title tags:

<title>[WM-Field: Product_Name]</title>

TIP: Leaving the price in your Detail Pages may or may not be a good idea.  For example, if the price changes and you don't update the site, the visitor will end up getting a mixed message about the product. You may also irritate the merchant, who has to deal with complaints about a web site (yours) that has out of date pricing.

TIP: Notice the "nolink" portion of the WM-Tag is left out in the Detail Template? It is only used in Index Templates.

Images aren't as tricky as one might imagine, using standard HTML and substituting image URL's with WM-Tags are common.  The code for a click able image with a source from the feed is shown below:

<a href="[WM-Field: Buy_URL]"><img src="[WM-Field: IMAGE_URL]" alt="[WM-Field: Product_Name]" border="0"></a>

In the example above, three WM-Tags are used to present more complete information to the site visitor.  The "<href=" tag which makes the image clickable by site visitors, contains the WM-Tag for the affiliate link "Buy_URL"  The "<img src=" tag contains the URL of the image source from the merchant "IMAGE_URL". And lastly, the "alt=" tag contains the name of the product  "Product_Name." Including the "alt=" tag means that site visitors will see the product description when they hover their mouse over the image.

The brief description of some tags above, has been added in order to demonstrate the flexibility of WebMerge in creating web pages based on data feeds. It's very easy to shape the completed detail pages utilizing these methods.  Basically, one can put information from the data feed file anywhere in the HTML document. WM-Tags can also be placed more than once in the same document. Please see the Index Template page for additional information. All of this flexibility makes for a completely customized web page, unique to your site.


WebMerge Settings

After initially saving the second settings file, we're ready to configure WebMerge.

Index Pages Tab
On the "Index Pages" tab locate the new Index Template created for step-two.  Next, in the Generated File Names area select "Name based on contents of field," and select the appropriate field name for the build.

This step is extremely important as the field name chosen must match the field-name used in step-one to generate links on the Main Category Page.

Let's review where we used this field-name in step-one.  We used the field-name "Main_Category" in our step-one template in the WM-IndexLabel Tag.  We also saw WebMerge build a Main Index page with links to Category Index Pages named after "Main_Category" field names.

Detail Pages Tab
On the "Detail Pages" tab, check the "Create Detail Pages in" box, and after the dialog box pops-up, select the directory (folder) where WebMerge should build the detail pages for this data feed.

Next, check the box for "Use one template file for Detail pages," and locate the new Detail Template created for step-two.

In the Generated File Names section, you have a couple of choices concerning the name of files, and how WebMerge assigns those names.  You can certainly generate names based on simple ascending numbers "Serialized names..."  However, it may be wiser to use one of the field names already provided in the data feed.  For example, the product number, or UPC code.  This will make tracing problems down, quicker, and will provide a measure of Search Engine friendliness.  Also, when users see the URL, they may be able to more readily identify the link and product that it relates to.

Save your second settings file again.  Everything should now be ready to build the second and final step in the three-tiered design.

Automate the Two-Step Process
As mentioned earlier, WebMerge can automate many tasks in building data driven web sites. When building a three-tier web site, two settings files are required.  You can run these manually and separately by selecting the first settings file, and have WebMerge build the first tier index page(s), then by manually selecting the second settings file, and build the last index tier, and detail pages.  Of course, it is a good idea to actually run the files separately the first time, to ensure everything is working the way it should.

Once run manually the first time, there is an easy way to automate the process.

Generation Tab
On the "Generation" tab in Webmerge, you can tell WebMerge to run more settings files automatically after the previous one completes. By clicking on "Run other WebMerge files after this one completes," and selecting the next settings file, WebMerge will run the first settings file one time to start the process, and automatically run the next Settings File you have selected. This tool's true value really comes out when it is time to make your process run quickly each time you need to build (re-build) the site, as the data feed file is updated from the Merchant.

More than one additional settings file can be selected to be run automatically, if an unusual configuration is required, or you are building additional tiers (four, five or more).

Figure 1 -  "Run other WebMerge files..." dialog.
Figure 1 - "Run other WebMerge files..." dialog.

Revision 4 (2014)


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

PREVIOUS PAGE - "Step One"

NEXT PAGE - "4 Tier Site Design"