Jump to content

Archived

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

Guest

Show Product Rows like Latest Products

Recommended Posts

Guest

Hello All;

I have searched but couldn't find an answer, please direct me to a link if this already exists.

I would like to make the main product rows look more like the Latest Products (images with a price and url under). I am using Killer skins, sorry but no link for now.

Now, the default products in each category are shown in rows with alternating colors. I know how to change and remove the column names and tags, but I am stuck there.

Thanks,

Share this post


Link to post
Share on other sites

well, sorry but no link for now here either, and no specific instructions - but I will encourage you :)

This is easliy done. Just compare the latest products layout code from styleTemplates/content/index.tpl with the product list code in styleTemplates/content/viewCat.tpl

You need to re-code viewCat.tpl to do away with thae table, and use floating divisions instead as with latest products.

Share this post


Link to post
Share on other sites
Guest

It's exactly what I was doing just after I send the post, and it seems to work great. Just need to add the code to get multiple rows showing. Thanks for your help!! :)

Share this post


Link to post
Share on other sites
Guest

Doooh!!

I just needed to change the amount of products per page in the Admin section. All works great now, thanks!!

Share this post


Link to post
Share on other sites
Guest malcolmord

cool :)

You could add exactly what you done, then when others earch for it in the future they'll get the coded answer!

(Only cos I'm looking for it lol)

Mally

Share this post


Link to post
Share on other sites
Guest

Ok, what I did was open the ViewCat.tpl file in /skins/MySkin/styleTemplates/content.

I then just compared the structure from the Latest Products coding, as Markscarts mentioned earlier. Here's my code for ViewCat.tpl. I kept the original code (in red and commented out) and entered new code (in green).

<!-- 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}</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="float: left; text-align: center; width: 145px; height: 150px;">

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

<br>

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

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

</div>

<!-- END: view_cat -->

I haven't cleaned up the code as of yet, but it works great. I also changed the width and added a height (see: <div style="float: left; text-align: center; width: 145px; height: 150px;">) to better control how the images line up in the page.

See what it looks like here. I also changed the amount of products to show from the Admin settings. Here, I am showing 8 products (4 per row).

Share this post


Link to post
Share on other sites
Guest Raimy

I love this, looks great! But I have a glitch that I can't quite figure out. I need to know how to get a border around the products as a whole not individually, like it is on the front page for latest products (see image 1 below). That's the way I'd prefer to go but failing that how can I just move the products down some so they are below the border and better aligned (image 2 below)?

I'm okay with making small changes to things here and there but major coding is way over my head so please help if you can. I'm sure it's probably a very simple fix.

viewprod.jpg

Image 1

viewcat-2.jpg

Image 2

I'm using a slightly modified Legend skin if that helps. Thanks.

Share this post


Link to post
Share on other sites
Guest lauriex

Thanks to these postings I successfully changed my product listing on my category page to the gallery style. RIght now I have one column of 8 products on the category page when I want 2 rows of 3 or 4 (if there is room) products. What settings/code do I change to obtain this?

Share this post


Link to post
Share on other sites
Guest

Check to see how wide the actual thumbnail image is and how wide you specified the box around the image. These numbers are in my original post in GREEN. I think they were at width=145px.

Also in the Control Panel, you can specify how many products to show, check this first.

Post a link to the site or page, this helps out. Thanks.

Share this post


Link to post
Share on other sites
Guest lauriex

Check to see how wide the actual thumbnail image is and how wide you specified the box around the image. These numbers are in my original post in GREEN. I think they were at width=145px.

Also in the Control Panel, you can specify how many products to show, check this first.

Post a link to the site or page, this helps out. Thanks.

Thanks!

I did use your width and I specified 8 products per page in the store setting. Here is the link to the page. http://www.misskriki.com/TEST_CubeCart/Cub...Cat&catId=2

I have altered the left/mid/right col widths in the layout CSS to be 165/460/120 px respectively so there should be enough room for 3 across.

I am also sending you link to live static site's current page which I am trying to emulate: http://www.misskriki.com/CategoryView/shop..._skirts_pg1.htm

Share this post


Link to post
Share on other sites
Guest

Lauriex,

I just realized your links where OK here. They were bad only in the PM. Thanks.

Check to see how wide the actual thumbnail image is and how wide you specified the box around the image. These numbers are in my original post in GREEN. I think they were at width=145px.

Also in the Control Panel, you can specify how many products to show, check this first.

Post a link to the site or page, this helps out. Thanks.

Thanks!

I did use your width and I specified 8 products per page in the store setting. Here is the link to the page. http://www.misskriki.com/TEST_CubeCart/Cub...Cat&catId=2

I have altered the left/mid/right col widths in the layout CSS to be 165/460/120 px respectively so there should be enough room for 3 across.

I am also sending you link to live static site's current page which I am trying to emulate: http://www.misskriki.com/CategoryView/shop..._skirts_pg1.htm

Share this post


Link to post
Share on other sites
Guest

I noticed that you forgot to add the comment out text at the end of certain lines. You start with a <!-- but dont end with the required -->.

Check the script below and add the --> text (I put it in red)

****this is from your site*************

<!-- I DONT THINK THIS IS NEEDED: LINE BREAK ONLY? <br clear="left" /> -->

<img src="images/uploads/categname1.jpg" alt="Skirts" border="0" title="Skirts" />

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

<!-- <tr-->

<!-- <td class="tdListTitle"><strong>Image</strong></td-->

<!-- <td class="tdListTitle"><strong>Description</strong></td-->

<!-- <td class="tdListTitle"><strong>Price</strong></td-->

<!-- <td class="tdListTitle"> </td-->

<!-- </tr>

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

**********end of your script*********************

<div style="float: left; text-align: center; width: 145px; height: 150px;">

<a href="index.php?act=viewProd&productId=9" target="_self"><img src="/TEST_CubeCart/Cube/images/uploads/thumbs/thumb_Kriki_0157_detail.jpg" alt="Rich Champagne Stretch Velour Skirt" title="Rich Champagne Stretch Velour Skirt" border="0"></a>

<br>

<a href="index.php?act=viewProd&productId=9" class="txtDefault"><strong>Rich Champagne Stretch Velour Skirt</strong></a>

<br>

<div class="(CLASS)">$0.00

<div class="txtSale"><strong></strong></a>

</div>

*************************

Lauriex,

I just realized your links where OK here. They were bad only in the PM. Thanks.

Check to see how wide the actual thumbnail image is and how wide you specified the box around the image. These numbers are in my original post in GREEN. I think they were at width=145px.

Also in the Control Panel, you can specify how many products to show, check this first.

Post a link to the site or page, this helps out. Thanks.

Thanks!

I did use your width and I specified 8 products per page in the store setting. Here is the link to the page. http://www.misskriki.com/TEST_CubeCart/Cub...Cat&catId=2

I have altered the left/mid/right col widths in the layout CSS to be 165/460/120 px respectively so there should be enough room for 3 across.

I am also sending you link to live static site's current page which I am trying to emulate: http://www.misskriki.com/CategoryView/shop..._skirts_pg1.htm

Share this post


Link to post
Share on other sites
Guest TEL

Stever,

I just added this mod last nite to help clear up a product alignment issue and it worked beautifully! Very easy to do and easily adjustable....and it looks real nice too!

The only change I made was to add a little padding on each side to get my products placed exactly how I want:

<div style="float: left; text-align: center; width: 200px; height: 150px; padding-top: 30px; padding-left: 15px; padding-right: 15px;">

Thanks for posting it up! ;)

Share this post


Link to post
Share on other sites
Guest

Glad it worked out for you!

Stever,

I just added this mod last nite to help clear up a product alignment issue and it worked beautifully! Very easy to do and easily adjustable....and it looks real nice too!

The only change I made was to add a little padding on each side to get my products placed exactly how I want:

<div style="float: left; text-align: center; width: 200px; height: 150px; padding-top: 30px; padding-left: 15px; padding-right: 15px;">

Thanks for posting it up! :huh:

Share this post


Link to post
Share on other sites
Guest lauriex

Glad it worked out for you!

Stever,

I just added this mod last nite to help clear up a product alignment issue and it worked beautifully! Very easy to do and easily adjustable....and it looks real nice too!

The only change I made was to add a little padding on each side to get my products placed exactly how I want:

<div style="float: left; text-align: center; width: 200px; height: 150px; padding-top: 30px; padding-left: 15px; padding-right: 15px;">

Thanks for posting it up! :D

Thanks to all who successfully helped me out on this!

Share this post


Link to post
Share on other sites
Guest gizzip

Ok, what I did was open the ViewCat.tpl file in /skins/MySkin/styleTemplates/content.

I then just compared the structure from the Latest Products coding, as Markscarts mentioned earlier. Here's my code for ViewCat.tpl. I kept the original code (in red and commented out) and entered new code (in green).

<!-- 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}</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="float: left; text-align: center; width: 145px; height: 150px;">

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

<br>

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

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

</div>

<!-- END: view_cat -->

I haven't cleaned up the code as of yet, but it works great. I also changed the width and added a height (see: <div style="float: left; text-align: center; width: 145px; height: 150px;">) to better control how the images line up in the page.

See what it looks like here. I also changed the amount of products to show from the Admin settings. Here, I am showing 8 products (4 per row).

Share this post


Link to post
Share on other sites
Guest gizzip

Ok, what I did was open the ViewCat.tpl file in /skins/MySkin/styleTemplates/content.

I then just compared the structure from the Latest Products coding, as Markscarts mentioned earlier. Here's my code for ViewCat.tpl. I kept the original code (in red and commented out) and entered new code (in green).

<!-- 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}</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="float: left; text-align: center; width: 145px; height: 150px;">

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

<br>

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

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

</div>

<!-- END: view_cat -->

I haven't cleaned up the code as of yet, but it works great. I also changed the width and added a height (see: <div style="float: left; text-align: center; width: 145px; height: 150px;">) to better control how the images line up in the page.

See what it looks like here. I also changed the amount of products to show from the Admin settings. Here, I am showing 8 products (4 per row).

Share this post


Link to post
Share on other sites
Guest angeland

I got the same problem and confused ....

I read through the thread for dozen times,

and couldn't find any solutions regarding this.

I tried every possible ways, but still can't make it.... :)

Can anyone give me a helping hand?

Thanks!

I love this, looks great! But I have a glitch that I can't quite figure out. I need to know how to get a border around the products as a whole not individually, like it is on the front page for latest products (see image 1 below). That's the way I'd prefer to go but failing that how can I just move the products down some so they are below the border and better aligned (image 2 below)?

I'm okay with making small changes to things here and there but major coding is way over my head so please help if you can. I'm sure it's probably a very simple fix.

viewprod.jpg

Image 1

viewcat-2.jpg

Image 2

I'm using a slightly modified Legend skin if that helps. Thanks.

Share this post


Link to post
Share on other sites
Guest

Great code, but I'm having a bit of a problem I cannnot figure out. My background of the division wants to end on the row above the last one for some reason. I made the product boxes have a white background to get around it for now, but need to correct. Happening in both IE7 and Firefox.

Take a look at http://www.jewelrygemshop.com/index.php?ac...at&catId=29 and you can see, the final item, the wolf head pendant, sticks out below the background. Same on every page and cannot figure out why?

Also would love a small gap between the item borders, but haven't figure that one out either :)

Share this post


Link to post
Share on other sites
Guest

I'll have a look at it tonight (1pm now). Did you copy the code as indicated in RED/GREEN in the earlier posts? Sometimes the width of the images and spacing is wider than the page box remaining after the side baoxes are added. Just check this value and see if it is good.

Just a guide (for others reading), take the overall page width (say 800) and remove each left and/or right side box (2 x 175, or 1 x 175) and divide by the number of thumbnails you want to put in a row. Dont forget to include any cell padding or spacing as well.

My grade 8 teacher was right that I would need algebra one day!!

Share this post


Link to post
Share on other sites
Guest

Yes, I corrected for the width/height of my images and added a bit of padding to center it better. Still some work to do on that, but the last one sticking out over the background division is the annoying thing. Cannot seem to find a reason for it either in styles or viewcat. Must be missing something :)

Share this post


Link to post
Share on other sites

Mysty, there may be more than one problem there. For the first problem, look for the place that this text is generated and place a <br clear="all" /> just above it:

Usually Ships in 5-10 days

Share this post


Link to post
Share on other sites

×
×
  • Create New...