Problem Displaying Products - Shop Made Simple

[dcleckley]

Hello.  I am running CMS Version 1.6.6.  Along with that, I am using ShopMadeSimple 0.2.6.  I am having an issue with the way that the products are being displayed using Shop Made Simple.  Here is the address of the site I am going to discuss: http://www.isaacbaker.com/index.php?page=store.  

I need to be able to display 3 products horizontally, and 3 products vertically (3 columns x 3 rows) per page for all categories.  In the preferences, I've set Shop Made Simple to display only 9 items per page...which reflects what I'm trying to achieve.  

When I add more than 3 products, instead of creating a new row, the module displays the 4th item in the same row.  In fact, no matter how many products are added, it attempts to show all in the same row.  If I change the css to constrain the width of the DIV that contains Shop Made Simple, it has no effect except that it squeezes the cells together closer.

My assumption is that Shop Made Simple displays its products in a table.  Please correct me if I am wrong.  I have placed my templates and css below.

Category & Products:

Code: Select all

{* List of category data *}
<div class="productlist"><h3 style="text-decoration:bold;background-color:#ABC5CF;font-family: arial;color:#ffffff;">{$categoryname}</div>



<div class="productlist">

<table>
   <tr>
	{foreach from=$products item=entry}

		<td style="border-right:1px solid #D0D0D0;"align="center" WIDTH="200"> 


<p style="font-weight: bold;text-decoration: underline;"class="productname">{$entry->prodname}</p>
			{if $prodimage!='*none'}

                            <p class="img">
				{image src=$entry->prodimage alt=$entry->proddesc}
                            </p>
				
			{/if}
			<p style="font-size:11px;" align="center">{$entry->proddesc|truncate}<br /><br />
		
                        $<span style="font-weight:bold;">{$entry->price}</span></p>
			<td>{$entry->addproduct}</td>
			
                     </td>
		
	{/foreach}
</tr>
</table>
{if $pagecount > 1}
	{$firstpage} {$prevpage} {$pagetext}: {$pagenumber} {$oftext}: {$pagecount} {$nextpage} {$lastpage}
{/if} 

</div>

Featured products:

Code: Select all

{* List of featured products *}
<div class="productlist"><h3 style="text-decoration:bold;background-color:#ABC5CF;font-family: arial;color:#ffffff;">Our Store</h3>

<table cellpadding="0">
<tr>
	{foreach from=$products item=featentry}

      <td  style="border-right:1px solid #D0D0D0;"align="center" WIDTH="200">

			
	<p style="font-weight: bold;text-decoration: underline;" class="productid" align="center">{$featentry->prodname}</p>

                         {if $prodimage!='*none'}
                        <p class="img" align="center">
                 	{image src=$featentry->prodimage alt=$featentry->proddesc}
                        </p>
			{/if}

	      <p style="font-size:11px;" align="center">{$featentry->proddesc|truncate}<br /><br />
		
                        $<span style="font-weight:bold;">{$featentry->price}<span></p>
			<p align="center">{$featentry->addproduct}</p>
			
       </td>

	{/foreach}
</tr>
</table>

{if $pagecount > 1}
	{$firstpage} {$prevpage} {$pagetext}: {$pagenumber} {$oftext}: {$pagecount} {$nextpage} {$lastpage}
{/if} 

</div>

CSS for Shop Made Simple

Code: Select all

/* Category related settings */
.catdescription
{
  margin-left: 0.5em;
  width: 250px;
}

#catid
{
  display: none;
}

#catinfo
{
  margin-bottom: 1em;
  border-style
  width: 450px;
}

#catimagethumb
{
  margin: 5px 0 0 0;
  width: 50px;
}

#catlistheader
{
  color: #294B5F;
  font-size: 130%;
  margin-left: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-right: 1em;
}

.catlistline
{
  text-indent: 5mm;
}

/* Product related settings */
#productcount
{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-top: 1px solid #294B5F;
}

#productid {
  display: none;
   margin-left: 50px;
   border: 1px solid #294B5F;
  vertical-align: top;
  
}



.productdesc
{
  margin-left: 0.5em;
  width: 250px;
}

.img
{
  float: center;
  text-align: center;
  
}	
.img img
{
  display: inline;
  height: auto;
  width: 100px;
  margin: 3px;
  border: 1px solid #ffffff;
}
.img a:hover img
{
  border: 1px solid #0066FF;
}

.productdesc
{
  vertical-align: top;
  width: 100px;
}

div.productlist
{
  
}

.productname
{
  padding-bottom: 3px;
  vertical-align: top;
  width: 80px;
}

.productprice
{
  vertical-align: top;
  color: #294B5F;
}

#productpricesin
{
  padding-top: 30px;
}

div.attributelist
{
  padding-bottom: 3px;
}
tr.row1
{
  background-color: #fff;
}

tr.row2
{
  background-color: #ececec;
}

table.productattr
{
  table-layout: automatic;
}

.attrname
{
  margin-bottom: 0.2em;
  width: 20%;
}

.attrdesc
{
  margin-bottom: 0.2em;
  text-indent: 1cm
}

[dcleckley]

Duketown:

Would you be able to spare some time to review this?  I know your schedule is heavy, so anything you could do would be appreciated.  Thank you!!

[Duketown]

dcleckley,

Tables are in use in the templates. Either you have to rebuild them yourself into CSS list items or use something as explained in http://forum.tufat.com/showthread.php?t=54324. That is a smarty related solution. You will have to build that in the templates as you have included in the posts above.

Duketown