Jump to content

Latest products display fix


goober999

Recommended Posts

Hi,

Here's a fix for the latest products display problem. The problem is that the display is not setup to show a specific number of products across. And the <div> tags kind of go crazy and mess up the display.

Here's a fix that will enable you to specify number of products to display across and will fix the line up issue.

In the includes/content/index.inc.php find this line:

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


Replace with this code


	$across=4;

	$index->assign("TW",100/$across);

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

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

    $index->assign("TXT_TR","</tr><tr>");

	} else {

    $index->assign("TXT_TR","");

	}


in skins/{insert skin name}/styleTemplates/content/index.tpl replace all code

between 
<!-- BEGIN: repeat_prods -->
 and 
<!-- END: repeat_prods -->
 including those two lines above with this code


  <table width="100%" border="0"><tr>

  <!-- BEGIN: repeat_prods -->

  <td width="{TW}%">

    <div style="float: center; text-align: center;">

    	<a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" border="0" /></a>

    	<br />

    	<a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}" class="txtDefault">{VAL_PRODUCT_NAME}</a>

    	<br /> 

    	{TXT_PRICE} <span class="txtSale">{TXT_SALE_PRICE}</span>

    </div>

  	</td>

  	{TXT_TR}

  <!-- END: repeat_prods -->

  </tr></table>

The $across variable is used to specify number products across.

That's it. Good Luck

Link to comment
Share on other sites

  • Replies 71
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...
  • 4 weeks later...
Guest Insurrectus

Anyone now how to make this work for sub-categories too? If so a post would be greatly appreciated. It worked great for "latest products".

Link to comment
Share on other sites

Anyone now how to make this work for sub-categories too?  If so a post would be greatly appreciated.  It worked great for "latest products".

http://www.cubecart.com/site/forums/index....showtopic=11472

Make sure you modify subCat not subCats.

If you want to make the change the easy way, i.e. using styles, then you want to modify the style called ".subCat". This will be in one of the two style sheets. Locate this and then try setting different width and height attributes until you are happy with what it looks like. The idea is that all category images should fit within the width and height you specify, otherwise if one image is too large it may cause the effect you are currently observing. E.g. try adding this text to .subCat, and then you can probably reduce the numbers till you are happy:

CODE

width: 200px;

height: 200px;

It worked for me.

Link to comment
Share on other sites

Subcategories Alignment

tvnl is right -add a static height value in the stylesheet which will be a value equal to or greater than the largest height image you have displaying and the most lines of text in the element. Then all will display correctly.

Latest Products Alignment

This cropped up again today in PMs about my full-screen stock skins. The dialog ensues, where I add a value not to an includes file which will be overwritten with every update to CC3, but to a skin template file:

Idara wrote:

Hi, I just tested the Classic at my cc3.biz store (the skin is on there now, Monday Morning, 8:53 Central Time USA) for a few minutes, and it is showing four prods in latest prods.

This is set in your ACP, on the General Settings page, just below where you choose the skin . . .

Hi Mark

Thanks for your reply, yes u r right no problem with clasic skin, it shows 4 product in a row, but still there r some errors in display , the gap between two rows (when the product name is in 2 line) both in IE & FF. you can see my Test store with clasic skin

Legend skin still showing 3 products in FF, fine in IE with 4 products.

The gap between two product line is fine even if the product name is in 1 or 2 line the gap is maintaining in FF but not in IE. you can see My Test store with Legend skin

latest product setting in Legend & Clasic skin still need modifications.

looking forward for the update.

Kind reagrds

Mark wrote back:

Hi Idara,

The problems you mention are latent in the stock skins themselves; my full-screen modifications have not caused these problems.

I do know a way to solve the "alignment" problem, but I did not do it in my skins, because the point was to provide a stock skin with full-screen capabilities, not solve all the inherent problems with these skins. Also, I have noticed that others in the forums have solved the problem and offer mods and fixes; there may be a better fix than the one I use personally. I do not know, because I had already fixed the problems in my sites before noticing other posts. You can always do a search on this problem.

Here is my fix:

The trick is to specify a static height setting for the image elements, so that the height will be the same whether they contain one or two lines of text, or even if one image is larger than the rest in height. Then, they will all line up properly. The height you specify should be equal to or greater than the the length of the cell required for your longest image with the most lines of text. You might have to experiment with this setting to get it perfect for your site.

In /your_skin/styleTemplates/content/index.tpl

FIND:

  



<div style="float: left; text-align: center; width: {VAL_WIDTH}px;">
 







CHANGE TO:






  



<div style="float: left; text-align: center; width: {VAL_WIDTH}px; height: xxxpx;">

Where "height:xxxpx" = the ideal number in pixels for the height of these elements for your site.

The number xxx will vary, depending on the size you've set for these pics or for your thumbnails, the size of your original images, and the amount of text appearing in the elements. For one of my sites, the best height was 250. Experiment with this number until your site looks just right.

Note that {{VAL_WIDTH} which stands for "width value" refers to the value you have set for thumnail size in ACP. This is a variable setting, and will change when you change the tumbnail creation size in ACP. Again, the trick is to add a static height value that will be equal to or greater than the maximum height of these elements when containing your largest image in height and the most lines of text.

HTH

Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...
  • 1 month later...
Guest jccboca

Subcategories Alignment

tvnl is right -add a static height value in the stylesheet which will be a value equal to or greater than the largest height image you have displaying and the most lines of text in the element. Then all will display correctly.

Latest Products Alignment

This cropped up again today in PMs about my full-screen stock skins. The dialog ensues, where I add a value not to an includes file which will be overwritten with every update to CC3, but to a skin template file:

Idara wrote:

Hi, I just tested the Classic at my cc3.biz store (the skin is on there now, Monday Morning, 8:53 Central Time USA) for a few minutes, and it is showing four prods in latest prods.

This is set in your ACP, on the General Settings page, just below where you choose the skin . . .

Hi Mark

Thanks for your reply, yes u r right no problem with clasic skin, it shows 4 product in a row, but still there r some errors in display , the gap between two rows (when the product name is in 2 line) both in IE & FF. you can see my Test store with clasic skin

Legend skin still showing 3 products in FF, fine in IE with 4 products.

The gap between two product line is fine even if the product name is in 1 or 2 line the gap is maintaining in FF but not in IE. you can see My Test store with Legend skin

latest product setting in Legend & Clasic skin still need modifications.

looking forward for the update.

Kind reagrds

Mark wrote back:

Hi Idara,

The problems you mention are latent in the stock skins themselves; my full-screen modifications have not caused these problems.

I do know a way to solve the "alignment" problem, but I did not do it in my skins, because the point was to provide a stock skin with full-screen capabilities, not solve all the inherent problems with these skins. Also, I have noticed that others in the forums have solved the problem and offer mods and fixes; there may be a better fix than the one I use personally. I do not know, because I had already fixed the problems in my sites before noticing other posts. You can always do a search on this problem.

Here is my fix:

The trick is to specify a static height setting for the image elements, so that the height will be the same whether they contain one or two lines of text, or even if one image is larger than the rest in height. Then, they will all line up properly. The height you specify should be equal to or greater than the the length of the cell required for your longest image with the most lines of text. You might have to experiment with this setting to get it perfect for your site.

In /your_skin/styleTemplates/content/index.tpl

FIND:

  



<div style="float: left; text-align: center; width: {VAL_WIDTH}px;">
 







CHANGE TO:






  



<div style="float: left; text-align: center; width: {VAL_WIDTH}px; height: xxxpx;">

Where "height:xxxpx" = the ideal number in pixels for the height of these elements for your site.

The number xxx will vary, depending on the size you've set for these pics or for your thumbnails, the size of your original images, and the amount of text appearing in the elements. For one of my sites, the best height was 250. Experiment with this number until your site looks just right.

Note that {{VAL_WIDTH} which stands for "width value" refers to the value you have set for thumnail size in ACP. This is a variable setting, and will change when you change the tumbnail creation size in ACP. Again, the trick is to add a static height value that will be equal to or greater than the maximum height of these elements when containing your largest image in height and the most lines of text.

HTH

I used this fix > works great! :)

Link to comment
Share on other sites

Guest theboylard

I've read through the guide on cc3.biz (ta muchly), and this thread, and other threads - probably doing something wrong but all it did was make the latest products box bigger!!!

As it seems the size of the image was what was throwing it out of kilter, and the acp only specifies width, not height - not to mention bilinear etc - why not just rework the images?

As it is mostly for guidance only, I resized my images using XnView (thanks Estelle, loverrly lttle app!) and now everything lines up as it should!

Ah, but obviously no large image - hmmm, ok not the ultimate answer, but I'll work on it!!!

hapless

Link to comment
Share on other sites

Hi hapless, yes, the point is to make the element containing the image long enough so they'll all be the same size. You are correct that part of the problem is having images of varying heights, but that is only part of it. Product name length causes the problem too, when some names wrap to two or more lines, and shorter names remain on a single line. So for everyone to be successful using your approach, they should also limit the number of characters being displayed in product name.

I still prefer my own fix, because it does not require reworking all product images, nor editing of any core files, only adding height values to a couple of skin files ;)

Link to comment
Share on other sites

Guest mashurst

I prefer this fix. I originally did it to my 3.06 store and I needed it for my 3.07p1 store. However, the last line of insert code was already in my Killer skin file, </tr></table> so when I performed the insert, the last line looked like:

</tr></table>

</tr></table>

which put all of my right hand featured products and favorite products boxes on the right underneath the shopping cart, etc. This didn't happen originally when I did it to 3.06, maybe something changed with 3.07? I am also not using a stock skin, so maybe it is just me.

-M <_<

Link to comment
Share on other sites

  • 2 weeks later...

Everything works for me too, does anyone know how to make Latest products display bigger, (thumbs) right now they go from 80x80, 76x72, ... I have four pictures per row, if It's posible to increase size, maybe 120x120, or 140x120, and go 3 pictures per row, if someone knows please help. I also tried thru admin General config of thumb size but nothing changes. ;)

Link to comment
Share on other sites

It is necessary to set the thumb size in ACP for the size you want. You've got that part right. However, this does not create new thumbs. The existing thumbs were already created at the previous settings.

You can create the thumbs of the size you prefer on your PC and upload them to images/uploads/thumbs via ftp

-or-

You can delete the existing thumbs and run a script instructiong GD to create new thumbs at the size you now have set in ACP

-or-

You can delete thumbs and go through and re-add the main images to all your products, and CubeCartâ„¢ will the create the thumbs through GD

There are several options to do do this, but merely changing the ACP setting won't get it done.

NOTE: If you can't figure out how to run a script telling GD what to do, I believe there is a free one, probably user friendly, available in the free mods over at cubecart.org

Link to comment
Share on other sites

  • 1 month later...

Ive just applied this fix as directed and when I go to my main page My latest product catagorys dissapear ? including the box that they are in everything else is there, what do I do ?

Link to comment
Share on other sites

@ viss, you can start by providing a link to the problem page

I had to restore the code to original because it was displaying nothing except the side boxes and the header and footer, the center box goes compleatly missing. I just thought somone might have an idea without having to look at it. I cant leave my page without any products on it, for a long period of time.

Link to comment
Share on other sites

Point is, I have seen a similar phenomenon and cured it many times, but without looking I wouldn't know if it was a case of the same bug. Read the pinned post, "PLEASE READ THIS BEFORE POSTING . . ."

It has some important tips on how to post best to get help in the forums.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.




×
×
  • Create New...