Product Display

Product Listing

Now that your sample catalog is up and running, we'll display your products on the welcome page. We will loop over all of the products in our database and produce an entry for each product in the table. Replace the line "This is where your content goes" line in pages/index.html with the following:

<table cellpadding="5">
  <tr>
    <th>Test #</th>
    <th>Description</th>
    <th>Price</th>
  </tr>

  . . .

</table>
    

Now we will use Interchange tags to fill in the rest of the table with the products database you created. The [loop] ITL tag pair tells Interchange to iterate over each item in the parameter list. In this case, the loop runs over the results of an Interchange search. The search parameter does a database search on the provided parameters. In this case, we're doing a very simple search that returns all of the fields for all of the entries in the products database. The parameters passed to the search tell Interchange to return all records ('ra') from the products file ('fi'). The following should take the place of the ellipsis (the "three dots") in the above code that we placed in pages/index.html:

  [loop search="ra=yes/fi=products"]

  . . .

  [/loop]
    

In the loop we just established, the individual elements of each record are accessed using the [loop-field] tag. The following code should replace the above ellipsis in the code we placed in pages/index.html:

  <tr>
    <td>[loop-code]</td>
    <td>[loop-field description]</td>
    <td align="right">[loop-field price]</td>
  </tr>
    

The [loop-code] tag refers to the primary key (unique identifier) for the current row of the database table in question. In this case, it will produce the same output as the [loop-field sku] tag, because the 'sku' field is the primary key ("code") for products table. In each case, the tag is replaced by the appropriate element. When put together, Interchange generates a page with your products table on it.

Your finished pages/index.html page should look like this:

[include top]
[include left]
<table cellpadding="5">
  <tr>
    <th>Test #</th>
    <th>Description</th>
    <th>Price</th>
  </tr>
  [loop search="ra=yes/fi=products"]
  <tr>
    <td>[loop-code]</td>
    <td>
      [page [loop-code]]
      [loop-field description]
      </a>
    </td>
    <td align="right">[loop-field price]</td>
  </tr>
  [/loop]
</table>
[include bottom]

		

Test it by refreshing index.html page in your browser.

pages/flypage.html

The next step is to create an individual page for each item. You could theoretically create each page manually, but that approach isn't worth considering. So to do this the right way, we need to create a special generic page called the flypage (pages/flypage.html). When a page is requested that does not exist in the pages/ directory, Interchange will check and see if the requested page matches an existing product code from the products database. If it does, it will then show the flypage and populate it with the corresponding product's data. If there's no product with that ID, the special error page special_pages/missing.html (described in the next section) will be displayed.

For example, if you request page 0198.html, Interchange first checks if that specific page exists (pages/0198.html). If one is not found, it searches the products database table for product code 0198. When found, Interchange creates product page on the fly using pages/flypage.html. When constructing the flypage, the entire product record for the requested product is available through the [item-field] tag (similar to the [loop-field] tag). To create a fly page, type the following code and save it as pages/flypage.html.

[include top]
[include left]

<h3>Test #[item-code]</h3>
<p>[item-field description] . . . [item-field price]</p>

<br/>
Return to the [page index]Index page</a>.
[include bottom]

		

special_pages/missing.html

Create the special_pages/ directory in your catalog directory (the CATROOT).

It is a good idea to display an error page when Interchange is asked for an unknown page. To create a missing page for display, type the following and save it as special_pages/missing.html.

[include top]
[include left]
<p>We're sorry, the page you requested has not been found.</p>

<p>Try finding what you need on the [page index]welcome page</a>.</p>
[include bottom]

		

The addition of this page ensures that users see your error message instead of a mysterious server error if they mistype the URL or click a broken link.

Phase 2: Tutorial Files

We have prepared the files from this tutorial phase for download in .tar, .tar.gz, .tar.bz2, and expanded formats.

DocBook! Interchange!