9.1. Listing all products
Now that your store is running, you need to display your products on the welcome page. We will loop over all of the products in our database and produce an entry for each one in a table. Replace the line "This is where your content goes" 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 from the products database you created. The [loop] [/loop] ITL tag pair tells Interchange to iterate over each item in the parameter list. In this case, the loop is over the result 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 ('ra') on the file ('fi') products respectively. The following should take the place of the ellipsis in the code you placed in index.html:
[loop search="ra=yes/fi=products"] . . . [/loop]
In the loop we just established, the individual elements of the entry 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 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 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>[loop-field description]</td> <td align=right>[loop-field price]</td> </tr> [/loop] </table> [include bottom]
Test this page by refreshing the index.html page in your browser.