To integrate the products_list componentized template with the first page, you??™ll need to
create an additional template file (first_page_contents.tpl), which you??™ll implement later.
After creating products_list in the following exercise, you??™ll be able to browse the products by
department and by category. Afterward, you??™ll see how to add products to the main web page.
Exercise: Creating the products_list Componentized Template
1. Copy the product_images directory from the code archive of the book to your project??™s tshirtshop folder.
2. Add the following styles to the tshirtshop.css file, from the styles folder:
.product-list tbody tr td {
border: none;
padding: 0;
width: 50%;
}
.product-list tbody tr td p img {
border: 2px solid #c6e1ec;
float: right;
margin: 0 10px;
vertical-align: top;
}
.product-title {
border-left: 10px solid #0590C7;
padding-left: 5px;
}
.section {
display: block;
}
.price {
font-weight: bold;
}
CHAPTER 5 ?– CREATING THE PRODUCT CATALOG: PART 2 157
.old-price {
color: #ff0000;
font-weight: normal;
text-decoration: line-through;
}
3. Create a new Smarty design template named products_list.tpl inside the presentation/templates
folder, and add the following code to it:
{* products_list.tpl *}
{load_presentation_object filename="products_list" assign="obj"}
{if $obj->mrTotalPages > 1}
Page {$obj->mPage} of {$obj->mrTotalPages}
{if $obj->mLinkToPreviousPage}
Previous
{else}
Previous
{/if}
{if $obj->mLinkToNextPage}
Next
{else}
Next
{/if}
{/if}
{if $obj->mProducts}