Figure 6-3. Product details page with attributes
How It Works: Presenting Product Attributes
You created the user interface for product attributes in two steps. You called the Catalog::
GetProductAttributes() method of the business tier to get the list of attributes for the specified product.
Then you updated the products_list.tpl template to display the list of attributes for each product.
At the moment, these attributes don??™t make much of a difference for a customer, because the products can??™t be
ordered yet??”but that detail will be taken care of in subsequent chapters.
CHAPTER 6 ?– PRODUCT ATTRIBUTES 185
The challenge of the exercise consists in understanding how the product attributes are displayed on the product
details page and on the product lists. A useful strategy to understand how the Smarty code works is to analyze the
input data received by Smarty and the code it generates. Let??™s once again look at the attributes data the catalog_
get_product_attributes procedure returns for the product with the ID of 1:
+----------------+--------------------+-----------------+
| attribute_name | attribute_value_id | attribute_value |
+----------------+--------------------+-----------------+
| Color | 6 | White |
| Color | 7 | Black |
| Color | 8 | Red |
| Color | 9 | Orange |
| Color | 10 | Yellow |
| Color | 11 | Green |
| Color | 12 | Blue |
| Color | 13 | Indigo |
| Color | 14 | Purple |
| Size | 1 | S |
| Size | 2 | M |
| Size | 3 | L |
| Size | 4 | XL |
| Size | 5 | XXL |
+----------------+--------------------+-----------------+
Now, let??™s look at the HTML source code generated for the details page of that product.
Pages:
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288