Jump to content

Show Product Rows like Latest Products


Guest

Recommended Posts

That text is commented out using Stevies mod and it only appears on ViewProd which isn't what I'm changing at the moment.

Currently my viewCat (with Stevies Mod) is:

(removed since its better in the next post with code - didn't want to confuse anyone trying to do the same thing)

I've also been playing with trying to vertically center my thumbnail is a 140px high space with the text below that so that shorter photos would look better and the text would more or less align - but no joy in figuring that out yet. I got the text to align, but not the photo to center vertically.

Also for some reason, the margin shifts when you refresh. Sometimes it will be perfect, and other times it will shift back all the way to the left. And sometimes its wrong on the top, and right towards the bottom of the page! (which makes 0 sense to me), such as on the bracelets category (jewelrygemshop.com).

I think my problem is that I just haven't used css enough to get this perfect :)

Link to comment
Share on other sites

Okay, sort of figured it out and now the background is behaving correctly in IE7 and in Firefox to a point. The shorter pages in FF are perfect, the long pages (like bracelets) mess up towards the bottom (in fact, they even lose their formatting!)

Current code:

<!-- BEGIN: view_cat -->

<div class="boxContent">

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

<br clear="all" />

<!-- BEGIN: sub_cats -->

<div id="subCats">

<!-- BEGIN: sub_cats_loop -->

<span class="subCat">

<a href="index.php?act=viewCat&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&catId={TXT_LINK_CATID}" class="txtDefault">{TXT_CATEGORY}</a>

</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}<br>

Click an image or title to view more information</div>

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

<!-- BEGIN: productTable -->

<!--table border="0" width="100%" cellspacing="0" cellpadding="0" 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"> </td-->

<!--/tr-->

<!--/table-->

<!-- BEGIN: products -->

<!--*****MOD start: Steve R Dec 23 2006 Replaced product tables with images**************************-->



<div style="position: relative; float: left; text-align: center; width: 160px; height: 205px; padding-top: 1px; padding-left: 3px; padding-right: 3px; border-style: solid; border-width: 1px; border-color: #BA9B40; background-color: white; margin-left: 18px; margin-bottom: 8px">

<div style="position: relative; height: 146px; line-height: 146px; vertical-align: middle"><a href="index.php?act=viewProd&productId={PRODUCT_ID}" target="_self"><img src="{SRC_PROD_THUMB}" alt="{TXT_TITLE}" alt="{TXT_TITLE}" title="{TXT_TITLE}" border="0"></a></div>

<a href="index.php?act=viewProd&productId={PRODUCT_ID}" class="txtDefault"><strong>{TXT_TITLE}</strong></a>

<br> 

<class="(CLASS)">{TXT_PRICE}

<class="txtSale"><strong>{TXT_SALE_PRICE}</strong></a>

</div>



<!-- <tr-->

<!-- <td align="center" class="{CLASS}"><a href="index.php?act=viewProd&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&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&productId={PRODUCT_ID}" target="_self" class="txtButton">{BTN_MORE}</a></form></td-->

<!--/tr-->

<!--******MOD end***********************-->



<!-- END: products -->

<!--/table-->

<!-- END: productTable -->

<!-- BEGIN: noProducts -->



<div>{TXT_NO_PRODUCTS}</div>

<!-- END: noProducts -->

<br clear="all" /> 

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

</div>

<!-- END: view_cat -->

I played with the <br clear> tag markscart suggested and found it works where shown under END: noProducts.

Also, in IE7, the "Usually ships..." tag is gone as it should be, though it is still appearing in FF mid way down on "bracelets" and that seems to be when it messes up. BUT it's NOT showing on the shorter category pages??!!!

Link to comment
Share on other sites

Okay last update (I promise!)

Found that by deleting the line:

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

it solved the problem. Even though it was commented out, something was causing it to foul up Firefox apparently.

So only weirdness that still seems to happen are minor things that if someone can suggest a solution to, it would be muchly appreciated:

1. Margin shifts when you refresh it seems to 0 to 18 left as it's supposed to be. Seems to only happen in IE7 though.

2. Trying to vertically center the thumbnail within the 145px div for it to allow for some of my images that are shorter. Cannot seem to make it work in either browser.

Thanks for all the help! I have a TON of jewelry to add to the site and I think this will work a lot better for browsing :( Thank you Stevie for the original mod.

Link to comment
Share on other sites

Mysty;

Glad its working out better. In FF, trying clearing all the cache, sometimes this causes problems. It's important that thumbnails be kept the same size, it just makes things easier. I actually spent more time in Photoshop to set up templates to acheive uniform images rather than try to control them in CC. That's just my crazy method.

I also tried aligning images in my CSS templates, but found that IE, FF and Safari (Mac) treat them all diferently!!! So be very careful not to rely all your validation on 1 or 2 browsers. My Google analytics reports cleary shows that IE and FF are not alone out there, and if all Safari browsers show different than IE browsers, it may be enough to lose some of our sales.

Thanks for the kind words, and I am glad my little post back in December has been well received.

Link to comment
Share on other sites

Thanks Stever. With so many stores though, and thousands of items per store, trying to make all the images uniform is just too hard. It doesn't look that bad, though if I could align them to bottom or middle, I'd like it better. Oh well.

Truthfully, almost all of my traffic is IE6 or 7, only about 3% use Firefox, and less than 1% use other browsers, so not too worried about that.

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