Hot Picks!

[ushop-online]

Unfortunately the layout system for Hot Picks is a mess.

I test everything in the most commonly used browser first then in the other most commonly used browsers.

In IE6 on Windows it works fine with the default '3' products but as soon as the number is enlarged the display breaks down - it doesn't locate below the search bar but overlaps plus the number of items per row breaks - sometimes 3 wide sometimes 1 wide etc.

http://a1gpinfo.com/images/awhotpk.jpg

I then tested it in IE7, Firefox 2.0.0.3, Mozilla 1.7.13 and Opera 9.10

Same result as far as layout but it now locates below the search bar.

Bad design feature and unless it can be sorted I will have to drop Hot Picks.

[ushop-online]

Further to IE6 problem.

If the window is not scrolled then the hot picks load below the search bar but if the page is refreshed with the page scrolled slightly then the hot picks load over the search bar.

Update: This is an IE problem -- tested IE7 as well with page slightly scrolled and on refresh the same effect covering the search bar.

[Neil]

I noticed this too - this is a great product in desperate need of template development

[digitalwindow]

Hi ushop / Neil,

Firstly thanks for all of your useful tips and posts on here.

With regards to the Hot Picks, we are currently looking into this.

Please bare with me, I will return to you with an update as soon as I can.

Thanks,

Amo

[Neil]

Great stuff

I recognise the product is new and I'm excited by it and can't wait to see what can be done with it !

[bionic]

The numbers of items per column is dictated by the heights of the containing li in the previous row. They float left, so when it floats at the end of the row it will float left and get stopped by the longest container in the previous row. You can see it in the screenshot. AW are aware of this. I think the solution is to fix the height of the div, although that long thumbnail in your screenshot might cause a problem, dunno.

[ushop-online]

That is indeed the problem which continues over from the 'Content Units' which is why I never used them.

The thumbnail size or availability and also size of description alters the layout.

[ushop-online]

Is there any news on this problem yet?

[ushop-online]

The changes in hot_picks.tpl don't seem to have made any difference.

[Confuscius]

Personally, the way that I addressed this issue was to move the price above the product name ( and made it a bit bigger and changed its colour ) and then loaded a few pages to see the longest product name that I could find. Then fix the height to just cover the longest that I could find. This then includes some white space below the image but clears the 'jagged display issue and it actually looks fine! I also fixed the width of each cell as well because I have a fixed width template - Firefox wraps earlier than IE - so you may have to experiment a little. Something like:

/* Hot Picks styling */

.sw_hotpicks {
background-color: #FFFFFF;
height: auto;
width: 100%;
border: 1px solid #FFE4B5;
}

.sw_hotpicks h3 {
font-weight: bold;
font-size: 12px;
}

.sw_hotpicks p {
font-weight: bold;
font-size: 12px;
}

.sw_hotpicks li {
float: left;
width: 246px;
height: 140px;
padding: 2px;
margin: 2px;
border: 1px solid #FFE4B5;
font: bold 24px Arial, Verdana, Helvetica, sans-serif;
color: #CC0000;
vertical-align: bottom;
}

.sw_hotpicks img {
float: left;
margin-right: 10px;
}


Hope this helps.

Paul

[ushop-online]

Thanks for that tip -- I will await the AW fix first but if it doesn't come, or work, then this is a good work around -- Cheers.