Jump to content

Archived

This topic is now archived and is closed to further replies.

goober999

Latest products display fix

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

Share this post


Link to post
Share on other sites

Guest gul

i tryed this.. but am getting index.ini.php error...

:(

Share this post


Link to post
Share on other sites
Guest americanheathen

I thought I'd never get this figured out! BTW: this also got rid of the problem I was having with the pics covering part of the subcat title.

Share this post


Link to post
Share on other sites
Guest tazca

Racked my brain for hours trying to figure this one out when i came accross this post thanx alot man works great

Share this post


Link to post
Share on other sites
Guest

Worked like a charm here also. Just thought you would like the feedback.

Share this post


Link to post
Share on other sites
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".

Share this post


Link to post
Share on other sites
Guest

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
Guest EaglePilot

This mod works perfectly (CC3.0.6). Fixed the problem just like I was hoping it would.

Thanks!

Share this post


Link to post
Share on other sites
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! :)

Share this post


Link to post
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

Share this post


Link to post
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 ;)

Share this post


Link to post
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 <_<

Share this post


Link to post
Share on other sites
Guest Zlatan

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. ;)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
Guest viss

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 ?

Share this post


Link to post
Share on other sites
Guest viss

@ 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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

×
×
  • Create New...