ViewCat.tpl {spreading 4 images across in a table}

[Guest]

Hi Everyone

Ok - well i'd like to change the category page into something a little different from that of the normal cubecart in legend skin.

I'd like 4 images across instead of having the images going down the page individually.

I've had a look at the viewcat.tpl and have tried to add a table and inserted the image but it insists of going down the page.

So basically i'd like to have the image across.. so if these were products "O" "T" "G" "Z" i'd like them to sit in a table as they are. Instead in the category section it does this

"O"

"T"

"G"

"Z"

Original file

<!-- BEGIN: view_cat -->

<div class="txtContentTitle"><span>{TXT_CAT_TITLE}</span></div>



<div class="boxContent">



<br clear="all" />

<!-- BEGIN: sub_cats -->

<div id="subCats">

	<!-- BEGIN: sub_cats_loop -->

	<span class="subCat">

		<a href="index.php?act=viewCat&amp;catId={TXT_LINK_CATID}" class="txtDefault"><img src="{IMG_CATEGORY}" alt="{TXT_CATEGORY}" border="0" title="{TXT_CATEGORY}" /></a><br />

		<a href="index.php?act=viewCat&amp;catId={TXT_LINK_CATID}" class="txtDefault">{TXT_CATEGORY}</a> ({NO_PRODUCTS})

	</span>

	<!-- END: sub_cats_loop -->

</div>

<!-- END: sub_cats -->

<br clear="left" />

<!-- BEGIN: cat_img -->

<img src="{IMG_CURENT_CATEGORY}" alt="{TXT_CURENT_CATEGORY}" border="0" title="{TXT_CURENT_CATEGORY}" />

<!-- END: cat_img -->

<div><strong>{LANG_CURRENT_DIR}</strong> {CURRENT_DIR}</div>

<div class="pagination">{PAGINATION}</div>

<!-- BEGIN: productTable -->

<table border="0" width="100%" cellspacing="0" cellpadding="3" class="tblList">

  <tr>

	<td class="tdListTitle"><strong>{LANG_IMAGE}</strong></td>

	<td class="tdListTitle"><strong>{LANG_DESC}</strong></td>

	<td class="tdListTitle"><strong>{LANG_PRICE}</strong></td>

	<td class="tdListTitle">&nbsp;</td>

  </tr>

  <!-- BEGIN: products -->

  <tr>

	<td align="center" class="{CLASS}"><a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" border="0" title="{TXT_TITLE}" /></a></td>

	<td valign="top" class="{CLASS}"><a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self" class="txtDefault"><strong>{TXT_TITLE}</strong></a><br />

	{TXT_DESC}<div class="txtOutOfStock">{TXT_OUTOFSTOCK}</div></td>

	<td align="center" class="{CLASS}">{TXT_PRICE}

	<div class="txtSale">{TXT_SALE_PRICE}</div></td>

	<td align="right" nowrap='nowrap' class="{CLASS}">

	<form action="{CURRENT_URL}" method="post" name="prod{PRODUCT_ID}">

	<!-- BEGIN: buy_btn -->

	<input type="hidden" name="add" value="{PRODUCT_ID}" />

	<input type="hidden" name="quan" value="1" /><a href="java script:submitDoc('prod{PRODUCT_ID}');" target="_self" class="txtButton">{BTN_BUY}</a><!-- END: buy_btn --> <a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self" class="txtButton">{BTN_MORE}</a></form></td>

</tr>

<!-- END: products -->

</table>

<!-- END: productTable -->

<!-- BEGIN: noProducts -->

<div>{TXT_NO_PRODUCTS}</div>

<!-- END: noProducts -->



<div class="pagination">{PAGINATION}</div>

</div>

<!-- END: view_cat -->

and this is my attempt "a poor one at that"!!!!!

<!-- BEGIN: view_cat -->

<div class="boxContent">





<div class="pagination">{PAGINATION}</div>

<!-- BEGIN: productTable -->

<table border="0" width="100%" cellspacing="0" cellpadding="3" class="tblList">

  <tr>

	<td class="tdListTitle"><strong>{LANG_IMAGE}</strong></td>

	<td class="tdListTitle">&nbsp;</td>

	<td class="tdListTitle">&nbsp;</td>

	<td class="tdListTitle">&nbsp;</td>

  </tr>

  <!-- BEGIN: products -->

  <tr>

	<td align="left" class="{CLASS}"><a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" border="0" title="{TXT_TITLE}" /></a></td>

	<td valign="top" class="{CLASS}"><a href="index.php?act=viewProd&amp;productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" border="0" title="{TXT_TITLE}" /></a><br />	</td>

	<td align="left" class="{CLASS}">&nbsp;</td>

	<td align="left" nowrap='nowrap' class="{CLASS}">&nbsp;</td>

</tr>

<!-- END: products -->

</table>

<!-- END: productTable -->

<!-- BEGIN: noProducts -->

<div>{TXT_NO_PRODUCTS}</div>

<!-- END: noProducts -->



<div class="pagination">{PAGINATION}</div>

</div>

<!-- END: view_cat -->

As you can see i've added the image to the side and it replicates the thumb instead of giving me a new product... I'm totally lost here, your expertise would be greatly appreciated.

Thanks in advance.

Cheers

Antz :)

[burgensteen]

You just need apply the same method as is in the styletemplates/ content/ index.tpl for the latest products, you dont need to use tables to achieve what your after just use classes with a 4box / 100% - a little for browser compatibility = 24% width setting. (or maybe less dependant on borders and margins between the boxes).

Its easier than you think to do.

[Guest]

You just need apply the same method as is in the styletemplates/ content/ index.tpl for the latest products, you dont need to use tables to achieve what your after just use classes with a 4box / 100% - a little for browser compatibility = 24% width setting. (or maybe less dependant on borders and margins between the boxes).

Its easier than you think to do.

Thanks! yep well it may seem easy but i've been at it exactly 6 hours!!!!

Ok - so no tables! got that....

Except... latest products box had a table! and i'm not using the latest product box either for this project

When you say apply classes,,,, you mean create new css and apply that to the component right?

Ok so far this is how much i have done!!! and don't laugh!

I added to my style.css the following so far:

.prodpicture {

border-right:1px dotted #CCC;

height:170px;

}

.widebox {

width:177px;

height:200px;

float:center;

margin-top:0px;

margin-bottom:5px;

border-bottom:1px solid #663366;

padding-bottom:0;

}

Where prodpicture is where the picture will sit and widebox is the width of the actual box where i want prodpicture to sit (hope that makes sense!)

In my viewcat.tpl i have started with a clean start.... and this is what i've done... except i'm realising that this is floating left but i need it to be exactly where the edge of the middle content box would normally be to the end of where the banner ends.

<!-- BEGIN: view_cat -->



<div class="boxContent">



<div class="pagination">{PAGINATION}</div>

<!--<!-- BEGIN: productTable -->-->

<!-- BEGIN: products -->

<div class="widebox"></div>

<!--start widebox-->

<div class="CategoryProduct">

</div>

Ummm, thank-you for getting back to me

Cheers

Andrea

*********** Just fixed the way that the boxes spread across - they are now exact - had to delete the boxcontent div **************

[Guest]

You can take a look at what I have done here( http://www.shopmx.co.uk/v4_0_1/index.php?_...Cat&catId=1 ) if you want.

[Guest slysop]

Hello everyone.

I was searching the forum to find out how to select how many products I want to display per row in my view category page (viewCat.tpl)

Here is what you need to do.

Find this line in viewCat.inc.php

for ($i=0; $i<count($productResults); $i++){

Best to do a find and past the above in and do a find all + Just a note

Do not delete anything

Once you find that line add this just above it.

//this is the number of products you want to display per row.

$productsAcross=4;

Now just below for ($i=0; $i<count($productResults); $i++){

insert the below line of code right below for ($i=0; $i<count($productResults); $i++){

// Adding num of products per row if less than 4 do not do anything if there are 4 displayed

// add a CSS clear:both to delete the Float left/float right

// This will keep all your products spaced just as you want them.

if (!(($i+1) % $productsAcross)) {

$view_cat->assign("SIMP_DIV"," <br style=\"clear:both;\"/>");

} else {

$view_cat->assign("SIMP_DIV","");

}

INSIDE YOUR viewCat.tpl Do this

Here is the product code.

My Div element will look different than yours.

Just pay close attention to where I am placing the

{SIMP_DIV}

<!-- BEGIN: productTable -->

<!-- BEGIN: products -->

<div>

YOUR PRODUCT DISPLAY INFO

<div>

{SIMP_DIV}<!-- PUT THIS BELOW YOUR PRODUCT DIV. THIS PHP CODE PLACER INPUTES A BALNK VAR OR PUTS IN A CSS CLEAR BOTH-->

<!-- END: products -->

<br clear="all" />

<!-- END: productTable -->

There you have it. The code I was looking at to figure this out used tables.

When I displayed only two products they were spaced out really far. So this example keeps your products spaced out according to your CSS code.

Let me know what yall think.

Thanks

Wes Duff