Displaying Details of Each Result
Example
- Displaying product details from the search results. (Display templates
may be used when the search results are displayed on the search page or
when the search results are displayed on a different page. The following
example shows a separate results page.)
MGI Tags
Steps
- Include a displayTemplate field in your database.
- Populate each product record with the display template.
- Open the search page in a text editor.
- Insert the displayItem, displayTemplateField, and displayRecordButtonValue
parameters in the mgiSearchDatabase tag.
- Save the search page.
- Open the results page in a text editor.
- Insert the displayItem, displayTemplateField, and displayRecordButtonValue
parameters in the mgiSearchDatabase tag.
- Save the results page.
- Open the results format file in a text editor.
- Insert a column for the view item button.
- Save the results format file.
- Open the results template file in a text editor.
- Insert the mgiDisplayRecordButton variable.
- Save the results template file.
- Create a page to display product details.
- Save the display template page.
- FTP the search page, results page, results format file, results template
file, and display template to the web server running MGI.
- View the search page in a browser and perform a search.
Step 1: Include a displayTemplate field in your database.
- Product details are displayed in a display template file from a button
in the results list. The same display template can be used for all products
or different display templates can be used for groups of products or individual
products. The display template to use for a product is specified in a database
field. Add a display template field to your database. See the Creating Databases section for specific
instructions about adding a database field.
Step 2: Populate each product record with the display template.
- After adding the display template database field, enter a display template
file name for each product in that field. In this example, all products
share the same display template named "display.txt". See the
Populating Databases section for
specific instructions about updating database records.
Step 3: Open the search page in a text editor.
- Open the search page (search.html) in a text editing program that allows
you to view and modify the HTML.
Step 4: Insert the displayItem, displayTemplateField, and displayRecordButtonValue
parameters in the mgiSearchDatabase tag.
- To display product details, the displayItem and displayTemplateField
parameters are required in the mgiSearchDatabase tag. In the displayItem
parameter, enter "Yes". In the displayTemplateField parameter,
enter the name of the database field that contains the display template
file names.
-
- By default, a submit button with the value "View Item" links
to the product details. To customize the name of this button, enter the
displayRecordButtonValue parameter in the mgiSearchDatabase tag. In the
displayRecordButtonValue parameter, enter the value of the submit button
that links to the product details (e.g., "View Details").
<mgiSearchDatabase databaseFileLocation="Clothing" tableName="Tshirts"
searchFormatFileLocation="searchformat.txt"
resultsFormatFileLocation="resultsformat.txt"
resultsTemplateFileLocation="resultstemplate.txt"
orderByField="Design" postTarget="results.html"
displayItem="Yes" displayTemplateField="DisplayTemplate"
displayRecordButtonValue="View Details">
Step 5: Save the search page.
- Save the changes you have made to the search page.
Step 6: Open the results page in a text editor.
- Open the results page (results.html) in a text editing program that
allows you to view and modify the HTML.
Step 7: Insert the displayItem, displayTemplateField, and displayRecordButtonValue
parameters in the mgiSearchDatabase tag.
- The mgiSearchDatabase tag and parameters on the results page must match
the mgiSearchDatabase tag and parameters on the search page exactly. Copy
the mgiSearchDatabase tag from the search page and replace the existing
mgiSearchDatabase tag.
<mgiSearchDatabase databaseFileLocation="Clothing" tableName="Tshirts"
searchFormatFileLocation="searchformat.txt"
resultsFormatFileLocation="resultsformat.txt"
resultsTemplateFileLocation="resultstemplate.txt"
orderByField="Design" postTarget="results.html"
displayItem="Yes" displayTemplateField="DisplayTemplate"
displayRecordButtonValue="View Details">
Step 8: Save the results page.
- Save the changes you have made to the results page.
Step 9: Open the results format file in a text editor.
- Open the results format file (resultsformat.txt) in a text editing
program that allows you to view and modify the HTML.
Step 10: Insert a column for the view item button.
- If you created the shell table structure in the results format file,
insert a column and label to display the product details button.
<H3>Search Results</H3>
<p>The following results match the search criteria you entered.
Click the "Next" button to view additional results.
<CENTER><TABLE CELLSPACING="3" WIDTH="400">
<TR>
<TD WIDTH="350"><B>Product Details</B></TD>
<TD WIDTH="350"><B>T-Shirt Description</B></TD>
<TD WIDTH="50" ALIGN="CENTER"><B>Price</B></TD></TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD></TR>
<mgiGet name="mgiSearchResults">
</TABLE>
</CENTER>
<p><center><mgiGet name="mgiPreviousButton">
<mgiGet name="mgiNextButton"></center>
Step 11: Save the results format file.
- Save the changes you have made to the results format file.
Step 12: Open the results template file in a text editor.
- Open the results template file (resultstemplate.txt) in a text editing
program that allows you to view and modify the HTML
Step 13: Insert the mgiDisplayRecordButton variable.
- In the results template file, insert the mgiDisplayRecordButton variable
where you want the product details button to appear. Use the mgiGet tag
to display the variable.
<TR>
<TD><mgiGet name="mgiDisplayRecordButton"></TD>
<TD><mgiGet name="Description"></TD>
<TD ALIGN="RIGHT">
<P ALIGN=CENTER>$<mgiGet name="Price"></TD></TR>
Step 14: Save the results template file.
- Save the changes you have made to the results template file.
Step 15: Create a page to display product details.
- When a product details button is clicked, the search results are replaced
with the details for that product. The display template specifies the layout
of product details. The display template should contain HTML, text, and
MGI tags to display database information for the product.
-
- To include database information in the display template file, use the
mgiGet tag syntax. The name of the mgiGet tag specifies the database field
information to display. Keep in mind that the database field names are
case-sensitive.
<mgiGet name="DatabaseFieldName">
- In the Clothing database example, there is one display template for
all products. The display template presents the t-shirt design, picture,
description, color, price and productID. The following is the complete
display template file for the Clothing database:
<CENTER>
<TABLE WIDTH="500">
<TR>
<TD><H3 ALIGN=CENTER><FONT COLOR="#000099"><mgiget name="Design">
</FONT></H3>
</TD></TR>
</TABLE>
</CENTER>
<CENTER><img src="<mgiget name="Picture">"></CENTER>
<CENTER>
<TABLE BORDER="0" CELLSPACING="3" CELLPADDING="0" WIDTH="250">
<TR>
<TD COLSPAN="2"><B>Description:</B> <mgiGet name="Description">
<mgiGet name="Color"> T-Shirt Color.</TD></TR>
</TABLE>
</CENTER>
<CENTER>
<TABLE BORDER="0" CELLSPACING="3">
<TR>
<TD ALIGN="RIGHT"><B>Price Each:</B></TD>
<TD>$<mgiGet name="Price"></TD></TR>
<TR>
<TD ALIGN="RIGHT"><B>Item Number:</B></TD>
<TD><mgiGet name="ProductID"></TD></TR>
</TABLE>
</CENTER>
Step 12: Save the display template page.
- Save the display template page and name it "displayTemplate.txt".
Step 13: FTP the search page, results page, results format file, results
template file, and display template to the web server running MGI.
- Upload the search page, results page, results format file, results
template file, and display template to the web server using an FTP program.
Step 14: View the search page in a browser and perform a search.
- View the search page in a web browser. The static elements of the search
page (e.g., logos, headers, navigation, etc.) and the search form (from
the search format file) are displayed. Enter a search into the search fields
and click the "Search" button. The search criteria is posted
to the results page. Static results information (from the results format
file) and a dynamic list of results (formatted according to the results
template file) that match your search display on the results page. The
list of results is ordered by the "design" field (as specified
by the orderByField parameter of the mgiSearchDatabase tag). A button named
"View Details" displays beside each result in the results list.
Click the "View Details" button for the first product in the
list. The display template file with that product's specific information
is included on the results page (replacing the results list). To view additional
items, use the back button on your browser.
|