Professional CodeIgniter, Thomas Myer
Chapter 5: Building a Shopping Cart
139
While you ' re in the CSS file, create two new classes, one called
productlisting
and the other called
thumbnail
. The
productlisting
class will be used to encapsulate the text and the thumbnail, and
the
thumbnail
class will be assigned to each thumbnail image, giving it its own unique margin properties.
img.thumbnail{
clear:both;
float:left;
margin-right:5px;
margin-bottom:15px;
}
.productlisting{
float:left;
width:70%;
font-size:.8em;
margin-bottom:30px;
}
Next, go through the home, category, product, and search views, and do the following to each thumbnail
and product description:
Remove the align=left property on each thumbnail image.
Add a class of
thumbnail
to each thumbnail.
Wrap the entire block (thumbnail and text) in a div with a class of
productlisting
.
Remove any
<
br style='clear:both'/
>
tags you may find. Your new
thumbnail
class
replaces these.
Remove any
<
p
>
elements.
Here ' s what the home view should look like after you ' re finished (changes in bold):
<
div id='pleft'
>
<
?php
echo "
<
img src='".$mainf[`image']."' border='0' align='left'/
>
\n";
echo "
<
h2
>
".$mainf[`name']."
<
/h2
>
\n";
echo "
<
p
>
".$mainf[`shortdesc'] . "
<
br/
>
\n";
echo anchor(`welcome/product/'.$mainf[`id'],'see details') . "
<
br/
>
\n";
echo anchor(`welcome/cart/'.$mainf[`id'],'add to cart') . "
<
/p
>
\n";
?
>
<
/div
>
<
div id='pright'
>
<
?php
foreach ($sidef as $key =
>
$list){
echo "
<
div class='productlisting'
>
<
img src='".$list[`thumbnail']."' border='0'
class='thumbnail'
/
>
\n";
echo "
<
h4
>
".$list[`name']."
<
/h4
>
\n";
echo anchor(`welcome/product/'.$list[`id'],'see details') . "
<
br/
>
\n";
echo anchor(`welcome/cart/'.$list[`id'],'add to cart') . "\n
<
/div
>
";
}
?
>
<
/div
>
c05.indd 139
c05.indd 139
6/10/08 5:35:27 PM
6/10/08 5:35:27 PM